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

Question

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 particular issue are you getting when trying to set the `dayStartHour` and `dayEndHour` input options? — Usman Anwar, Mar 21 '22 at 09:42
If this is the exact piece of code that you are using then there is a syntax error in this piece of code. You are missing an opening bracket on `eventClicked` event. — Usman Anwar, Mar 21 '22 at 21:06

score 0 · Answer 1 · answered Mar 21 '22 at 09:46

0

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.

answered Mar 21 '22 at 09:46

Daniel Vágner

538
3
19

I set the start and end hour as 8 and 7 respectively but the calendar completely disappeared when i did that. Precisely I want the start hour to be 8 AM and the End hour to be 7 AM so at the top it will be 8 AM and at the last it will be 7 AM. So what I mean is i wanted the time to be from 8 AM to 7 AM, so the times comes like 8am (at the top of calendar), 9am, 10am ... 11 pm, 12pm, 1 am, 2 am ... 6am, 7am (at the bottom of the calendar) – Ashwin Eswar Mar 21 '22 at 13:36
So dayStartHour should be 8 and dayEndHour 19. Bcs of 24hour. – Daniel Vágner Mar 21 '22 at 18:52
2

but 19 means 7 PM isnt it, i want 7 AM – Ashwin Eswar Mar 22 '22 at 04:12
same problem here.. any solutions? – Elazar Zadiki Dec 14 '22 at 17:57

score 0 · Answer 2 · answered Dec 21 '22 at 09:51

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>

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

2 Answers2