Angular 6+日历自定义事件模板的WEEK视图无法使用。

Question

我正在使用angular 6+日历。我想添加自定义事件模板，但它没有工作。事实上，我想添加一个进度条以及标题和操作按钮，但这个自定义事件模板没有工作，在周视图中没有显示任何事件，也没有错误。我到底做错了什么？或者有什么其他方法可以在标题中添加html？我已经尝试过在标题中添加html(进度条)，但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>

Answer 1

你可以这样做

<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>