If dayEndHour is lower than dayStartHour the calendar disappears completely

[elazarza]

Describe the bug

If for example I want the calendar to start from 8 am, and end at 7 am, I set the dayStartHour to 8 and the dayEndHour to 7, when doing that, the calendar disappears completely and does not render.
Minimal reproduction of the problem with instructions
set the mwl-calendar-day-view component's inputs dayStartHour=8 dayEndHour=7

Screenshots
Code:

result:

Versions

• @angular/core: 12.0.0
• angular-calendar: 0.28.11
• Browser name and version: Chrome 108.0.5359.100

[matts-bot]

Thanks so much for opening an issue! If you'd like to support this project, then please consider sponsoring me

[elazarza]

Looking a bit at the source code in calendar-utils.ts I've seen the obvious problem.. the Day component cant show 24 hours that are flowing into the next day in one instance.. some extensive tweaking will be needed here..

So its basically a feature request rather than a bug.

I'll see if I can deliver a PR that'll do the job when using Day view and not the whole week..
If the owner gets to it before me (highly likely:) please do so.. :)

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>