使用https://mattlewis92.github.io/angular-calendar/#/kitchen-sink创建仅适用于工作日的角度日历事件

Question

我正在使用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
    },

以下是如何创建仅限平日的活动？(示例周一到周五).In the CalendarEvent[]，我没有排除周末的选项。

Answer 1

​

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

​

对于一周的所有7天，此自定义模板的day属性的值分别为0、1、2、3、4、5、6。使用它，我们可以控制周末的活动。

代码：

​

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

</div>

​