Customizing cell template for week view on Angular Calendar 6+

Question

How to customize cell template for week view? We have necessity of show a popover on segment time clicked (there are more check about this), and i want change the template of [hourSegmentTemplate]. Can you send an example? Thank you

Edit: I use this component.

I want to change the default week view, thanks [hourSegmentTemplate] attribute:

<mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [hourSegmentTemplate]="weekView" [events]="events" [refresh]="refresh"> </mwl-calendar-week-view> <ng-template #weekView let-segment="segment" let-locale="locale"> <div class="cal-hour-segment" [class.cal-hour-start]="segment.isStart" [class.cal-after-hour-start]="!segment.isStart" [ngClass]="segment.cssClass"> <span class="cal-time"> {{ segment.date | calendarDate:'dayViewHour':locale }} </span> This is some custom content </div>

But the result is this

I want only the hours on the left, and the possibility to manage a single template's cell.

Hi, your question isn't entirely clear. Would you be able to provide code samples of what you have so far? — Rob Bailey
– Rob Bailey, Commented Jul 23, 2020 at 8:50

Kamil Augustyniak · Accepted Answer · 2020-09-25 12:00:09Z

If you using ng-template, you have access to a context variable isTimeLabel which has a boolean value which describes where the time label is.

This is a solution for your example:

<ng-template #weekView let-segment="segment" let-locale="locale" let-isTimeLabel="isTimeLabel"> <div *ngIf="isTimeLabel"> </div> </ng-template>

Collectives™ on Stack Overflow

Customizing cell template for week view on Angular Calendar 6+

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related