-1

I have a fullcalendar scheduler on my web app. The problem is that some event have long text, so I enabled this css:

.fc-timeline-event .fc-title {
        white-space: normal;
    }

Result is better but not acceptable yet cause events of 1 day one with long text, are not good to read. See events i've selected in red in the screenshot.

enter image description here

My question is: is it possible to force fullcalendar-scheduler to view on screen only 15 days (based on month) and others 15 outside screen enabling automatic horizontal scroller?

I tried: slotWidth: 300 option. It seem ok. Working good on desktop...but on mobile phone i'd like to set another value...

ADyson
  • 57,178
  • 14
  • 51
  • 63
Giuseppe Lodi Rizzini
  • 1,045
  • 11
  • 33

1 Answers1

1

You asked

is it possible to force fullcalendar-scheduler to view on screen only 15 days

That part is quite easy to achieve using custom views:

views: {
  resourceTimelineFifteen: {
    type: "resourceTimeline",
    duration: { days: 15 },
    buttonText: "15 day",
    slotDuration: { days: 1}
  }
},

Demo: https://codepen.io/ADyson82/pen/YzzKdXv?&editable=true&editors=001

The other part of your requirement

others 15 outside screen enabling automatic horizontal scroller

is not really possible because the width of the slots and the width of the calendar is not known in advance until the calendar is rendered (and can even change if the screen resizes). So simply splitting the view into 15-day sections is probably the best compromise. The user can just click the "next" button to see the next set of dates.

N.B. This approach will not always result in the view starting exactly on month boundaries (either start of the month or half-way through it), because months are not all the same length. You could try and do something a bit cleverer with the visibleRange setting if you wanted to attempt to correct that, but I'll leave that as an exercise for you if you feel you need it.

ADyson
  • 57,178
  • 14
  • 51
  • 63