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

Question

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>

Answer 1

Its currently not possible, I've issued a feature request for that when you use only Day View, so that you could show 24 hours that flow into the next day. https://github.com/mattlewis92/angular-calendar/issues/1629

The reason you cant do that is pretty obvious, say you're using the Week View, you cant really show a 24 hour day, lets say - Thursday, that flows into the next day, it wouldn't be Thursday but Wednesday, so the Days Headers will be off.

Its reasonable to add that feature only in the Day view, so that's a feature that's still not available.

What you can do in the mean time as a workaround and that's what I did, is to add another Day View component below the first one, make the first one start at 7 (no need for end time, it will automatically end at 11 pm), and the second one end at 6 am (no need for start time, it will automatically start at 12 am)

A bit of CSS, and it looks seamless.

Example:

  <div class="day-preview d-flex flex-column">
          <ng-container [ngTemplateOutlet]="todayPreview"> </ng-container>
          <ng-container [ngTemplateOutlet]="tommorowPreview"> </ng-container>
  </div>
  <ng-template #todayPreview>
        <mwl-calendar-day-view
          [dayStartHour]="7"
          [viewDate]="todaysDate$ | async"
          [events]="events"
          [hourSegmentTemplate]="weekViewHourSegmentTemplate"
        >
        </mwl-calendar-day-view>
      </ng-template>
      <ng-template #tommorowPreview>
        <mwl-calendar-day-view
          [dayEndHour]="6"
          [viewDate]="tomorrowDate$ | async"
         
          [events]="events"
          [hourSegmentTemplate]="weekViewHourSegmentTemplate"
        >
        </mwl-calendar-day-view>
      </ng-template>
      <ng-template
        #weekViewHourSegmentTemplate
        let-segment="segment"
        let-locale="locale"
        let-segmentHeight="segmentHeight"
        let-isTimeLabel="isTimeLabel"
      >
        <div
          #segmentElement
          class="cal-hour-segment"
          [style.height.px]="segmentHeight"
          [class.cal-hour-start]="segment.isStart"
          [class.cal-after-hour-start]="!segment.isStart"
          [ngClass]="segment.cssClass"
        >
          <div class="cal-time" *ngIf="isTimeLabel">
            {{ segment.date | calendarDate : 'weekViewHour' : locale }}
          </div>
        </div>
      </ng-template>

Answer 2

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.