'Can we use the Start Hour as 8 AM and End Hour as 7 AM in Angular Calendar

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>


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel Vágner