我正在使用角度6以上的日历。我想添加自定义事件模板,但是没有用。 实际上,我想添加一个进度条以及标题和操作按钮,此自定义eventTemplate无法正常工作,在周视图中没有显示任何事件,也没有错误。我究竟做错了什么? 或以其他方式在标题中添加html吗?我试图通过在标题中添加html(progress bar)来进行操作,而angular只是不允许添加html。感谢帮助。 这是我的代码:
<ng-template #myTemplateId let-event="event" let-placement="placement">
<div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
<div class="cal-tooltip-arrow"></div>
<div class="cal-tooltip-inner" style="min-width: 200px; padding: 10px; text-align: left; font-size:14px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">
<span><b>{{event.classprogram.name + " " + event.name}}</b></span>
<div style="margin: 10px 0px;">
<b>Start </b> {{event.startDate | date: 'dd/MM/yyyy'}} {{ " " + event.startTime }}<br/>
<b>End </b>{{event.startDate | date: 'dd/MM/yyyy'}} {{ " " + (event.endTime) ? event.endTime : "" }}
</div>
<span>{{ event.min_participants + " of " + event.max_participants + " spaces left"}}</span>
</div>
</div>
</ng-template>
<ng-template #customEventTemplate let-dayEvent="dayEvent">
<div class="custom-event" mwlCalendarTooltip="true"
[tooltipEvent]="dayEvent"
[tooltipTemplate]="myTemplateId"
[tooltipPlacement]="'top'">
<p class="time">{{ dayEvent.event.start }}</p>
<p class="desc">{{ dayEvent.event.title }}</p>
</div>
</ng-template>
<mwl-calendar-week-view class="hub-calendar-week-view"
[viewDate]="viewDate"
[events]="courses"
[refresh]="refresh"
(eventClicked)="gotoCourseDetailPage($event.event)"
(eventTimesChanged)="eventTimesChanged($event)"
[eventTemplate]="customEventTemplate">
</mwl-calendar-week-view>
答案 0 :(得分:0)
您可以以这种方式做
<ng-template #weekViewEventTemplate let-weekEvent="weekEvent" let-locale="locale" let-eventClicked="eventClicked" let-tooltipPlacement="tooltipPlacement" let-tooltipTemplate="tooltipTemplate" let-tooltipAppendToBody="tooltipAppendToBody" let-tooltipDisabled="tooltipDisabled"><div class="cal-event" (mwlClick)="eventClicked.emit({ event: weekEvent.event })" >...</div></ng-template>