Calendar Image 1 Calendar image 2
I am using an Angular Calendar and I want to set the start hour of the calendar to be 8AM and end hour to be 7 AM. It is possible to do something like that in the angular calendar. I am stuck at this particular issue for so long and I have not got any idea from reading the documentation. I have provided the code structure below.
<mwl-calendar-week-view
*ngSwitchCase="CalendarView.Week"
[viewDate]="viewDate" [events]="events"
[refresh]="refresh"
[dayStartHour]="dayStartHour"
[dayEndHour]="dayEndHour"
[weekStartsOn]="1"
(eventClicked)="handleEvent('Clicked', $event.event, 1)"
(eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-week-view>
What is your issue bcs in documentation there is description how to used dayStartHour and dayEndHour
/**
* The day start hours in 24 hour time. Must be 0-23
*/
@Input() dayStartHour: number = 0;
/**
* The day end hours in 24 hour time. Must be 0-23
*/
@Input() dayEndHour: number = 23;
So in your case
<mwl-calendar-week-view
*ngSwitchCase="CalendarView.Week"
[viewDate]="viewDate" [events]="events"
[refresh]="refresh"
[dayStartHour]="dayStartHour"
[dayEndHour]="dayEndHour"
[weekStartsOn]="1"
eventClicked)="handleEvent('Clicked', $event.event, 1)"
(eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-week-view>
and in typescript - ts file
dayStartHour: number = 5;
dayEndHour: number = 12;
Its just an example and you can set whatever you want in range o-23 like its described in doc.