Angular-calendar: Fixed header with scrollable body in week view component

[meiuqer]

Is your feature request related to a problem? Please describe

When scrolling the scheduler in week view it would be recommended that the header stays on top so that you can still read the date and day of week.

Describe the solution you'd like

Scrolling through week view should only scroll the body, not the header.

Describe your use case for implementing this feature

Maybe add an input, so that the user can choose between fixed header or not?

Additional context

Google Calendar uses this behavior as I desribed.

[sandord]

It would also be very nice if a default vertical offset could be configured. For example, this would cause the view start at 5:00 AM but still allow for scrolling up all the way to 12:00 AM.

This would help keeping the part of the calendar where most events are in view for applications that have that kind of data.

[IamSef]

Agree, this will be very useful.

[IamSef]

It would also be very nice if a default vertical offset could be configured. For example, this would cause the view start at 5:00 AM but still allow for scrolling up all the way to 12:00 AM.

This would help keeping the part of the calendar where most events are in view for applications that have that kind of data.

Were you able to figure how to do this?

[sandord]

Were you able to figure how to do this?

Honestly, I haven't tried.

[mattlewis92]

Apologies on the late reply on this, you can actually add a few lines of CSS to make the body scrollable, I intentionally don't bake anything in as every app is different, maybe you want the calendar to fill the height, or be a fixed height, or maybe you want the all day events to be scrollable and the time events to be as well.

I put together a demo showing you how you can use CSS to do this, hope that helps! 😄 https://stackblitz.com/edit/angular-w4urnk?file=index.html

[meiuqer]

Thanks for the effort! Only one problem, and this is where i also struggled: I have a calendar that doesn't fit the browser on 1920*1080 resolution so I need scrollbars, but screens with a height of > 1080 it fits completely so no scrollbars.

With your solution the header and the calendar body will be offset if there is no scrollbar. I fixed this with javascript, but I wonder if there is a CSS solution for this?

[mattlewis92]

I'm not too sure, my css skills are pretty basic

[PBhanwal]

I got the scroll with above CSS but it's from 12 AM. I wanna have a default scroll value to 9 am and the before time should be scrollable. Any idea how to do that?

[FrankL-git]

Thanks so much! Your calendar is a masterpiece!