Horizontal scrollbar

[DanielaL]

Hi, I just found your calendar and am thinking about using it in a project, I was wondering if there is any possibility to add horizontal scrollbars to the resourceDay view? Best Regards Daniela

[seankenny]

Hi Daniela,

I am assuming you have a situation where you have a lot of resources and need to be able to scroll to see more of them?

I don't really have much time right now to investigate but I would have thought that this could be accomplished with CSS? Fix the width of the calendar and, where it overflows these boundries, you should get the scrollbars?

Alternatively, I accept pull requests!

All the best, Sean

On 14 November 2013 11:33, DanielaL notifications@github.com wrote:

Hi, I just found your calendar and am thinking about using it in a project, I was wondering if there is any possibility to add horizontal scrollbars to the resourceDay view? Best Regards Daniela

— Reply to this email directly or view it on GitHubhttps://github.com/seankenny/fullcalendar/issues/11 .

[DanielaL]

Hi Sean, thanks for your quick answer. it doesn't seem to be that easy I have tryed that with another fullcalendar fork and there has to be some javascript magic to be done. I am thinking about a pull request :-)

Best Regards Daniela

Am 14.11.2013 13:51, schrieb sean kenny:

Hi Daniela,

I am assuming you have a situation where you have a lot of resources and need to be able to scroll to see more of them?

I don't really have much time right now to investigate but I would have thought that this could be accomplished with CSS? Fix the width of the calendar and, where it overflows these boundries, you should get the scrollbars?

Alternatively, I accept pull requests!

All the best, Sean

On 14 November 2013 11:33, DanielaL notifications@github.com wrote:

Hi, I just found your calendar and am thinking about using it in a project, I was wondering if there is any possibility to add horizontal scrollbars to the resourceDay view? Best Regards Daniela

— Reply to this email directly or view it on GitHubhttps://github.com/seankenny/fullcalendar/issues/11 .

— Reply to this email directly or view it on GitHub https://github.com/seankenny/fullcalendar/issues/11#issuecomment-28481305.

[baker-travis]

I believe I have found a solution to this problem. It has worked for me,

If you add this css to the top of the page:

#calendar table th {
    min-width: 100px !important; /* set this width to however wide you want your resource columns to be */
}

#calendar .fc-view-resourceDay {
    overflow-x: scroll !important; /* forces the whole calendar to scroll instead of specific portions */
}

Add this to your initialization of FullCalendar:

viewRender: function(view, element) {
    if (view.name == "resourceDay") {
        $(".fc-view-resourceDay > div").width($(".fc-agenda-days").width());
    }
},
viewDestroy: function(view, element) {
    if (view.name == "resourceDay") {
        $(".fc-view-resourceDay").scrollLeft(0);
    }
}

The viewRender method makes sure that the width of the table is the same as the width of the element that holds the actual events. This makes them scroll in unison.

The viewDestroy method forces the scroll to return to the beginning before the new events are laid out. This prevents the events from being offset.

I'm pretty sure this is all I did to make it work. I tinkered with it for a few days, but there might be something I left out that I did to fix it, so if you can't get it to work, I would be happy to explore what else I did to let y'all know.

[HelikeLong]

It worked perfectly @baker-travis! Thank you, you truly saved my skin.

[neerajmaheshwari]

Not working for me.. actually my problem is different what i want is that is there any way to freeze the first column ( i.e. time column that shows time ) so that when we scroll horizontally this time column should always be visible to us?

[ryanbimmer]

@baker-travis I think something is missing. When I scroll to the right, the vertical scroll bar scrolls away as well. It doesn't look like I can move events to the resources off of the right side of the screen.

[rushabhsh]

@ryanbimmer @baker-travis I'm facing the same issue. Did you manage to find a solution for it?