Adding horizontal scroll to fullcalendar scheduler

Question

I am using Fullcalendar Scheduler, and the problem is when i have many resources, it becomes not good, like this:

The live demo with litle resources: http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html

I have an idea, it's adding an horizontal scroll, but i don't know the way, can you guys help me out ? Thank you very much and have a great day.

Answer 1

Use the combination of this configure options :

dayMinWidth: 150,
stickyFooterScrollbar : true,

• dayMinWidth : guarantees your horizontal titles are visible.
• stickyFooterScrollbar : guarantees horizontal scrollbar is visible.

Answer 2

Paresh's answer works for views with many columns, but has the limitation that views with few columns will have very wide columns.

Fullcalendar's render algorithm calculates equal column widths based on the view width, and there doesn't appear to be a simple way of setting the column widths using CSS.

Instead we need to enable scrolling on the x-axis:

.fc-view-container { 
    overflow-x: scroll; 
}

then use jQuery to calculate the overall width of the view. Here I am using a minimum column width of 100px:

var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
    $('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}

We only change the width of the view and enable scrolling if it exceeds the current width of the view. This has the effect of setting a minimum column size of 100px.

The jQuery needs to run after the calendar.render(); call.