CODEWITHSUNDEEP
javascriptangularangular-calendar
giolongo
giolongo

Reputation: 21

Customizing cell template for week view on Angular Calendar 6+

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.

Upvotes: 1

Views: 3250

Answers (1)

Kamil Augustyniak
Kamil Augustyniak

Reputation: 429

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>

Upvotes: 2

Related Questions