2

我正在研究角度 6+ 日历。我想添加自定义事件模板，但它不起作用。实际上我想添加一个进度条以及标题和操作按钮，这个自定义 eventTemplate 不起作用，周视图中没有显示任何事件，也没有错误。我究竟做错了什么？或者在标题中添加 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>
4

1 回答 1

4

你可以这样做-

<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>
于 2020-05-16T12:50:22.413 回答