Не работает шаблон пользовательских событий календаря Angular 6+ для WEEK view - PullRequest
Новая
       25

Не работает шаблон пользовательских событий календаря Angular 6+ для WEEK view

1 голос
/ 01 июня 2019

Я работаю над угловым 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>
...