Search code examples
htmlangulartypescriptangular-calendar

week view hour segment angular calendar


I need to display the hours with an interval of 15 that can be configured by the user.

I tried the way it is below but it is displaying as follows:

enter image description here

I need to display with an interval of 15 or 30 minutes: 15:15 - 15:30 - 15:45

html component:

<mwl-calendar-week-view [dayStartHour]="8" [dayStartMinute]="0" [precision]="'minutes'" 
[hourSegments]="4" [dayEndHour]="18" [dayEndMinute]="0" 
*ngSwitchCase="'week'" [excludeDays]="[0,6]" [viewDate]="viewDate" 
(viewDateChange)="selectedDay = {date:$event}" [events]="events" 
[refresh]="refresh" (dayClicked)="dayClicked($event.day)" 
(eventClicked)="edit($event.event" (eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-week-view>

scss:

.cal-week-view {

   .cal-hour-segment.cal-after-hour-start .cal-time {
       display: block;
   }
}

Solution

  • <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" 
      [tooltipTemplate]="tooltipTemplate1" [events]="event_data" [refresh]="refresh"
      (eventClicked)="handleEvent('Clicked', $event.event)" [hourSegments]="4"
      [dayStartHour]="dayStartHour" [dayEndHour]="dayEndHour">
    </mwl-calendar-week-view>
    

    To show an hour of 15 minute slot, use it with [hourSegments]="4"