Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

horizontal scrolling in timeGrid views #3022

Open
babeuloula opened this issue Jan 29, 2016 · 30 comments
Open

horizontal scrolling in timeGrid views #3022

babeuloula opened this issue Jan 29, 2016 · 30 comments

Comments

@babeuloula
Copy link

@babeuloula babeuloula commented Jan 29, 2016

Hello,
Is-it possible to scroll horizontally ?
Thanks

@dcryan

This comment has been minimized.

Copy link

@dcryan dcryan commented Jan 29, 2016

@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?

@arshaw arshaw added the Discussing label Feb 1, 2016
@babeuloula

This comment has been minimized.

Copy link
Author

@babeuloula babeuloula commented Feb 1, 2016

Hello,

I use your plugin like this:
capture

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

This comment has been minimized.

Copy link
Member

@arshaw arshaw commented Feb 3, 2016

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

@arshaw arshaw added Accepted and removed Discussing labels Feb 3, 2016
@r4j4h

This comment has been minimized.

Copy link

@r4j4h r4j4h commented Feb 3, 2016

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

This comment has been minimized.

Copy link
Author

@babeuloula babeuloula commented Feb 3, 2016

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

Is it possible to scroll only on this zone ?
capture-d ecran-2016-02-03-11 46

@r4j4h

This comment has been minimized.

Copy link

@r4j4h r4j4h commented Feb 4, 2016

@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:
1
2

Is that more like what you are going for?

@babeuloula

This comment has been minimized.

Copy link
Author

@babeuloula babeuloula commented Feb 4, 2016

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

This comment has been minimized.

Copy link

@r4j4h r4j4h commented Feb 4, 2016

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

This comment has been minimized.

Copy link
Author

@babeuloula babeuloula commented Feb 4, 2016

Ok I will test your fiddle. Thanks

@arshaw arshaw added Status-Accepted1 and removed Accepted labels Feb 23, 2016
@arshaw arshaw changed the title Scroll horizontally horizontal scrolling in Agenda views Feb 23, 2016
@gansky-alexander

This comment has been minimized.

Copy link

@gansky-alexander gansky-alexander commented May 13, 2016

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

This comment has been minimized.

Copy link

@flaracca flaracca commented May 23, 2016

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

This comment has been minimized.

Copy link

@srthakkar srthakkar commented May 31, 2017

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

@espen

This comment has been minimized.

Copy link

@espen espen commented May 31, 2017

@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

This comment has been minimized.

Copy link

@Jorace Jorace commented Jan 29, 2018

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

This comment has been minimized.

Copy link

@vishaldudhatra vishaldudhatra commented Feb 15, 2018

Hello

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

Thank you

@McQuinTrix

This comment has been minimized.

Copy link

@McQuinTrix McQuinTrix commented Feb 28, 2018

+1

@laddhadhiraj

This comment has been minimized.

Copy link

@laddhadhiraj laddhadhiraj commented Mar 17, 2018

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

This comment has been minimized.

Copy link
Member

@acerix acerix commented Apr 10, 2018

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

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

@e06widu

This comment has been minimized.

Copy link

@e06widu e06widu commented Jun 2, 2018

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

@jitendra-kr

This comment has been minimized.

Copy link

@jitendra-kr jitendra-kr commented Jun 4, 2018

+1

@mtuzinskiy

This comment has been minimized.

Copy link

@mtuzinskiy mtuzinskiy commented Aug 31, 2018

Any updates on this?

@mchirlin

This comment has been minimized.

Copy link

@mchirlin mchirlin commented Sep 27, 2018

We also have this same requirement.

@michelerota

This comment has been minimized.

Copy link

@michelerota michelerota commented Nov 22, 2018

+1

@richlandhosting

This comment has been minimized.

Copy link

@richlandhosting richlandhosting commented May 22, 2019

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

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

@arshaw arshaw changed the title horizontal scrolling in Agenda views horizontal scrolling in timeGrid views Jul 29, 2019
@arshaw arshaw added this to the css-refactor milestone Jul 30, 2019
@David-Ho

This comment has been minimized.

Copy link

@David-Ho David-Ho commented Oct 7, 2019

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

This comment has been minimized.

Copy link

@JWOverschot JWOverschot commented Oct 21, 2019

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

This comment has been minimized.

Copy link

@davidGPA davidGPA commented Oct 29, 2019

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

This comment has been minimized.

Copy link

@di1606 di1606 commented Nov 12, 2019

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

@arshaw

This comment has been minimized.

Copy link
Member

@arshaw arshaw commented Feb 5, 2020

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

This comment has been minimized.

Copy link

@prinzdezibel prinzdezibel commented Feb 5, 2020

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;
 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.