Fullcalendar: horizontal scrolling in timeGrid views

[babeuloula]

Hello,
Is-it possible to scroll horizontally ?
Thanks

[dcryan]

@babeuloula, the views, not including the timeline views included in the scheduler add-on, do not scroll horizontally. What are you trying to achieve by scrolling horizontally?

[babeuloula]

Hello,

I use your plugin like this:

And if I have to add a new column, it will be very small. And I would like to scroll horizontally to get a better view.

Thank you.

[arshaw]

Timeline view would probably be better suited for this. But I understand why someone might want this.

[r4j4h]

While not ideal, in the meantime perhaps one approach to getting what you desire is having your table wider than its container, and giving the container overflow-x: scroll?

For example, assuming you keep your calendar in some sort of container with the class .calendar-container:

.calendar-container {
    width: 300px;
    overflow-x: scroll;
}

.calendar-container .fc-view > table {
    width: 500px;
}

For the table you want to make sure that you specify WHICH table element. For example, the headers are sometimes nested tables, and you _likely_ don't want to affect them. Here, I tried to be specific and grab the closest table from the view, which in this case was a direct descendant from the view element. Please be sure to double check and alter as needed to suit your situation, but I checked the demos for both agenda week view and simple week view and both worked alright and were horizontally scrollable with those rules.

[babeuloula]

Thanks @r4j4h but with your code I don't see the times and the buttons.

Is it possible to scroll only on this zone ?

[r4j4h]

@babeuloula Sure!

.calendar-container {
    width: 300px;
}

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

.calendar-container .fc-view > table {
    width: 600px;
}

The container needs to have some sort of fixed width if you want to specify px/em in the inner table that will be scrollable.

If you use %s you could possibly get away with just

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

.calendar-container .fc-view > table {
    width: 200%;
}

At least it works in Chrome.

This allows me:

Is that more like what you are going for?

[babeuloula]

Hello @r4j4h, thanks you, it's very great. And how I can have always the time on the left when I scroll to the right ?

[r4j4h]

Hmmm, unfortunately that's harder to do right! Check out this answer on stackoverflow, I think it will be your best bet, but is a little more complex. It needs a duplicate table and some sync'ing between them to keep scrolling together. I suggest playing with the demo page from that stackoverflow answer to get used to the technique. Also check out the FixedColumns DataTable extension - it uses this technique and you can probably borrow some of its code for syncing vertical scroll amounts.

Also check out the other answers to that stackoverflow question because depending on your situation they may be easier alternatives. For example you might be able to get away with running a jQuery plugin over the table to freeze the first column (which is inside the .fc-time-grid and can be selected at td.fc-axis.fc-time.fc-widget-content).

[babeuloula]

Ok I will test your fiddle. Thanks

[gansky-alexander]

Hello, all.
I have problem with horizontal scrolling. I have added recommendation of @r4j4h but i got problem with time axis.
Could someone help me to find solution?

[flaracca]

I have managed to implement @r4j4h code. As she said, I ha dto check id' names and I have added these lines to fullcalendar.css:
`.fc-view-container {
width: 1000px;
}

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

.fc-view-container .fc-view > table {
width: 2500px;
}` on line 765.

I am struggling to have the time column fixed. I had implemented the FixedHeaderTable jQuery plugin and had modified fullcalendar.min.js to have a table id set but it isn't working.

Looking to set this straight through CSS, If anyone else comes up wtih a solution...

[srthakkar]

Any update on this issue?
@arshaw, when can we expect this feature?

[espen]

@srthakkar this is an open source project, feel free to make a pull request

Comments such as +1 or “when will this be ready” will not only receive a penalty in the ranking system, they will spam other watchers of the thread
https://fullcalendar.io/blog/2016/07/renovated-issue-tracker/

[Jorace]

Just want to add to the discussion, I was searching about how to keep the horizontal scrolling value. Was there any discussion about how to keep the horizontal scroll value?

[vishaldudhatra]

Hello

I have same issue related horizontal scroll in agenda views.
#110
Any update related this issue?

Thank you

[McQuinTrix]

+1

[laddhadhiraj]

As I look this issue open on 29 Jan 2016, so just thinking if it gets fixed? we have bought scheduler license but still required this 'horizontal scrolling in Agenda views' fix... Please let me know if anyone know it's fix.

[acerix]

Came across this demo using CSS for this that seems to work OK:

https://jsfiddle.net/3gpjjba1/98/

[e06widu]

@acerix Did you managed to resolve this issue? In your code we can not see any css.

[jitendra-kr]

+1

[mtuzinskiy]

Any updates on this?

[mchirlin]

We also have this same requirement.

[michelerota]

+1

[richlandhosting]

$(".fc-time-grid > .fc-slats").css('z-index','99999');

I added this to my $().ready(function() or anytime after the calendar is generated.

[David-Ho]

Hello,
Does anyone know if this feature will be addressed soon or in future release?

The suggestion or workaround above from previous post does not really work because the time slots does not stay as the horizontal scroll bar moves to the right and the vertical scroll bar is not shown until the container is scrolled horizontally to the end.

Is there any way to have both vertical and horizontal scroll bars shown within the FullCalendar that can handle many resources in resourceTimeGridDay view? This is a scrolling usability issue for us.

[JWOverschot]

In what time window can we expect this feature?
@arshaw said in #4819 that it's planed for next major release. When is that expected?
And does anybody know a better workaround than the suggested above?

[davidGPA]

Hi @arshaw, some news about this feature?
We are really interested in purchasing fullcalendar scheduler license but we have a large number of resources to show in vertical mode which makes horizintal scroll required.
Thanks.

[di1606]

Someone succeed to fix the first column (time column) in FullCalendar

[arshaw]

If you're curious to know, this will be included in v5 (currently in-development)
blog post: https://fullcalendar.io/blog/2020/02/changes-in-the-upcoming-v5

[prinzdezibel]

Until this feature is implemented properly, you may find the following workaround suitable to have the time column fixed. Note that this solution is imperfect and probably will most likely not work in all browsers:

http://plnkr.co/edit/ozSX424nDT3NmhzB13e4?p=preview

The gist of it is the following CSS:

 .fc-view {
    overflow-x: auto;
 }

.fc-view > table {
    min-width: 100%;
    width: 2000px;
 }

.fc-time-grid .fc-slats {
    z-index: 4;
    pointer-events: none;
 }

.fc-scroller.fc-time-grid-container {
    overflow: initial !important;
 }

.fc-axis {
    position: sticky;
    left: 0;
    background: white;
 }

[tsyrya]

@prinzdezibel Your solution is great, thanks. There is a side effect though - the headers stops being "sticky" and disappears when you scroll down. Is there any idea how to fix that? Thanks :)

[arshaw]

this feature is available in the latest v5 beta. please see the blog post.

You activate it by setting dayMinWidth to a numeric value. You'll also need to have the @fullcalendar/scrollgrid premium plugin loaded.

view a demo

[arshaw]

released in the official v5. please see the demo I posted in my previous comment