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 scrollbar #11

Open
DanielaL opened this issue Nov 14, 2013 · 7 comments
Open

Horizontal scrollbar #11

DanielaL opened this issue Nov 14, 2013 · 7 comments

Comments

@DanielaL
Copy link

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
Copy link
Owner

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 [email protected] 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//issues/11
.

@DanielaL
Copy link
Author

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 [email protected] 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//issues/11
.


Reply to this email directly or view it on GitHub
#11 (comment).

@baker-travis
Copy link

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
Copy link

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

@neerajmaheshwari
Copy link

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
Copy link

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants