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

Sticky/Fixed Header Row #3473

Open
chrisribal opened this issue Dec 30, 2016 · 16 comments
Open

Sticky/Fixed Header Row #3473

chrisribal opened this issue Dec 30, 2016 · 16 comments
Labels
Milestone

Comments

@chrisribal
Copy link

@chrisribal chrisribal commented Dec 30, 2016

It would be nice to have the ability to fix the calendars thead if it reaches the browser window top.
See http://www.w3schools.com/Bootstrap/trybs_affix_navbar.htm for example using bootstrap affix.

I'm using the scheduler with more than 50 resources. After scrolling the desired resource i can't see the header row, which makes it dificult to drop events to the right time.

@arshaw

This comment has been minimized.

Copy link
Member

@arshaw arshaw commented Jan 3, 2017

would be cool!

@sense-design

This comment has been minimized.

Copy link

@sense-design sense-design commented Jan 24, 2017

Would like to have this feature too

@VSpock

This comment has been minimized.

Copy link

@VSpock VSpock commented Feb 16, 2017

Would be great

@adamduren

This comment has been minimized.

Copy link

@adamduren adamduren commented Sep 7, 2017

Also locking time column is useful. I've been looking into if it can be done with purely css changes but with no luck. In our context the calendar is displayed on a phone with 7 days at a time. We can fit 3 days and want to scroll horizontally for the rest. Unfortunately the time column slides as well so we lose track of the timeslots.

@harish0000

This comment has been minimized.

Copy link

@harish0000 harish0000 commented Oct 23, 2017

ETA? or any work around to fix this?

@harish0000

This comment has been minimized.

Copy link

@harish0000 harish0000 commented Nov 19, 2017

any work around for this?? i need this badly

@adamduren

This comment has been minimized.

Copy link

@adamduren adamduren commented Nov 19, 2017

I found a JS/CSS workaround I'll post when I get back to a desktop.

@harish0000

This comment has been minimized.

Copy link

@harish0000 harish0000 commented Nov 20, 2017

@adamduren thanks ,awaiting your response

@adamduren

This comment has been minimized.

Copy link

@adamduren adamduren commented Nov 20, 2017

I found the code in the referenced gist in a previous commit. Apologies there will be some extra css in this solution as it also implemented a sticky label column for horizontal scrolling as well. We eventually dropped fullcalendar as a dependency and went with a custom solution but hopefully this will get you on the right track.

https://gist.github.com/adamduren/c1f746824b273bef85bc914637dca5be

@harish0000

This comment has been minimized.

Copy link

@harish0000 harish0000 commented Dec 11, 2017

@arshaw any fix for this ? need urgently..

@harish0000

This comment has been minimized.

Copy link

@harish0000 harish0000 commented Jan 11, 2018

@arshaw any updates ?

@frlinw

This comment has been minimized.

Copy link

@frlinw frlinw commented Jan 11, 2018

@harish0000 you can be patient or use the fullcalendar param height: 'parent' with something like height: 100vh; in the parent css class.
https://codepen.io/frlinw/full/JMvXEy/

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Sep 4, 2018

The above workaround does not solve all scenarios
Is there anything steady on the stove?

@IndyHaine

This comment has been minimized.

Copy link

@IndyHaine IndyHaine commented Dec 5, 2018

In case anyone else stumbles upon this and is equally stumped as me as to why height:parent isn't working for them: The parent is not the div you render fullcalendar into; it's the parent of that. So in frlinw's example, you'd need to change the html to


<div id='calendar-container'>
    <div id='calendar'> </div>
</div>

and then apply the height to #calendar-container.

@panfanky

This comment has been minimized.

Copy link

@panfanky panfanky commented Jan 29, 2020

A jQuery workaround
to fix header row:
css:

.fc-row.fc-widget-header{
	position:relative;
        z-index:2;
}

jQuery:

jQuery(window).on('scroll', function () {
 jQuery('.fc-row.fc-widget-header').css('top', jQuery(window).scrollTop());
});

to fix time column:
css:

.fc-axis.fc-time.fc-widget-content{
  position:relative;
}

jQuery:

jQuery(window).on('scroll', function () {
 jQuery('.fc-axis.fc-time.fc-widget-content').css('left', jQuery(window).scrollLeft());
});

Use jQuery("#container") instead of jQuery(window) if you have the calendar in overflow:scroll/auto element.

@arshaw arshaw added this to the v5 milestone Feb 5, 2020
@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

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
9 participants
You can’t perform that action at this time.