angular - календарь создать событие только для рабочих дней с https://mattlewis92.github.io/angular-calendar/# / кухонная раковина - PullRequest
0 голосов
/ 18 марта 2020

Я создаю события для календаря, используя https://mattlewis92.github.io/angular-calendar/# / kitchen-sink .

В соответствии с документацией события создаются, как показано ниже:

events: CalendarEvent[] = [
    {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
      color: colors.red,
      actions: this.actions,
      allDay: true,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    },
    {
      start: startOfDay(new Date()),
      title: 'An event with no end date',
      color: colors.yellow,
      actions: this.actions
    },
    {
      start: subDays(endOfMonth(new Date()), 3),
      end: addDays(endOfMonth(new Date()), 3),
      title: 'A long event that spans 2 months',
      color: colors.blue,
      allDay: true
    },

Здесь, как создать события только для рабочих дней? (пример с понедельника по пятницу). В CalendarEvent [] у меня нет возможности исключать выходные.

1 Ответ

0 голосов
/ 19 марта 2020

<ng-template #customCellTemplate let-day="day" let-locale="locale">
  <div class="cal-cell-top">
    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
      >{{ day.badgeTotal }}</span
    >
    <span class="cal-day-number"
      >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
    >
  </div>
  **<small style="margin: 5px"
    >There are {{ day.events.length }} events on this day</small
  >**
</ng-template>

это пользовательское свойство дня шаблона имеет значения 0,1,2,3,4,5,6 для всех 7 дней недели. Используя это, мы можем контролировать событие на выходные.

код:

<div *ngIf="day.day!=0 && day.day!=6">
  <small class="cal-event cal-month-veiw"></small>

</div>
...