FullCalendar 5 - 前日期属性被忽略

Question

我有一个重复事件的规则，从 2021 年 9 月 1 日开始到 2022 年 6 月 1 日。应该排除 2021 年 9 月 21 日，但实际上它仍然存在。

如何解决？

import { Component, OnInit, ViewChild } from '@angular/core';

import { BreadcrumbService } from '@core/services';
import {
  CalendarOptions,
  DateSelectArg,
  EventClickArg,
  EventApi,
  FullCalendarComponent
} from '@fullcalendar/angular';
import { Draggable, DropArg } from '@fullcalendar/interaction';
import bgLocale from '@fullcalendar/core/locales/bg';
import { ConfirmationService, MenuItem, MessageService, SelectItem } from 'primeng/api';

@Component({
  selector: 'app-add-schedule',
  templateUrl: './add-schedule.component.html',
  styleUrls: ['./add-schedule.component.scss']
})
export class AddScheduleComponent implements OnInit {
  items: MenuItem[];
  calendarOptions: CalendarOptions;
  currentEvents: EventApi[];

  educationForm: SelectItem[];
  selectedEducationForm: SelectItem;

  subjectType: SelectItem[];

  eventDialog: boolean;
  clickedEvent: EventApi;
  changedEvent: any;

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;

  constructor(
    private breadcrumbService: BreadcrumbService,
    private messageService: MessageService,
    private confirmationService: ConfirmationService
  ) {
    this.breadcrumbService.setItems([{ label: 'Разпис' }, { label: 'Създаване' }]);
  }

  ngOnInit(): void {
    this.changedEvent = { title: '', start: null, end: null, subject: '', room: '', lecturer: '', subjectType: '' };

    this.calendarOptions = {
      headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: 'today'
      },
      titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },
      initialView: 'timeGridWeek',
      events: [
        {
          id: '1',
          title: 'event 1',
          // startRecur: '2021-09-01',
          // endRecur: '2022-06-01',
          // startTime: '07:00:00',
          // endTime: '08:00:00',
          // daysOfWeek: ['2', '4'],
          extendedProps: {
            subject: 'Математика',
            room: '414',
            lecturer: 'Ванката',
            subjectType: 'Семинарно упражнение'
          },
          rrule: {
            freq: 'weekly',
            interval: 1, // every one week
            byweekday: [ 'tu', 'th' ],
            dtstart: '2021-09-01T07:00:00',
            until: '2022-06-01'
          },
          exdate: ['2021-09-21'],
          duration: '03:00:00'
        }
      ],
      slotMinTime: '06:00:00',
      slotDuration: '00:15:00',
      slotLabelFormat: [
        {
          hour: 'numeric',
          minute: '2-digit',
          omitZeroMinute: false,
          meridiem: 'short'
        }
      ],
      locale: bgLocale,
      firstDay: 1,
      allDaySlot: false,
      weekends: true,
      editable: true,
      selectable: true,
      selectMirror: true,
      droppable: true,
      expandRows: true,
      stickyHeaderDates: true,
      contentHeight: 'auto', // remove scrollbar
      eventOverlap: false, // no events overlap
      selectOverlap: false, // no events overlap
      nowIndicator: true,

      select: (selectInfo: DateSelectArg) => {
        const title = prompt('Event Title:');
        const calendarApi = selectInfo.view.calendar;

        calendarApi.unselect(); // clear date selection

        if (title) {
          calendarApi.addEvent({
            title: title,
            start: selectInfo.start,
            end: selectInfo.end
          });
        }
      },
      drop: (drop: DropArg) => {
        if ((document.getElementById('drop-remove') as HTMLInputElement).checked) {
          drop.draggedEl.parentNode?.removeChild(drop.draggedEl);
        }
      },
      eventClick: (clickInfo: EventClickArg) => {
        this.eventDialog = true;

        this.clickedEvent = clickInfo.event;

        this.changedEvent.id = this.clickedEvent.id;
        this.changedEvent.title = this.clickedEvent.title;
        this.changedEvent.start = this.clickedEvent.start;
        this.changedEvent.end = this.clickedEvent.end;
        this.changedEvent.subject = this.clickedEvent.extendedProps['subject'];
        this.changedEvent.room = this.clickedEvent.extendedProps['room'];
        this.changedEvent.lecturer = this.clickedEvent.extendedProps['lecturer'];
        this.changedEvent.subjectType = this.clickedEvent.extendedProps['subjectType'];

        // if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        //   clickInfo.event.remove();
        // }
      },
      eventsSet: (events: EventApi[]) => {
        this.currentEvents = events;
      }
    };

    this.items = [
      {
        label: 'New',
        icon: 'pi pi-fw pi-plus'
      },
      {
        label: 'Edit',
        icon: 'pi pi-fw pi-pencil'
      },
      {
        label: 'Delete',
        icon: 'pi pi-fw pi-trash'
      }
    ];
  }
}

Answer 1

日期中的 date/time 与事件中的 date/time 不匹配。你需要写：

exdate: ['2021-09-21T07:00']

匹配 RRule 的 dtstart 属性中的时间。然后它将排除在该特定时间段发生的项目。如果您只指定日期，那么它只会查找要排除的“全天”事件，它不会考虑当天发生的所有事情。我显然没有为此编写代码或规范，但可以想象这样一种场景，您想要在特定日期排除某些全天事件，但仍显示定时事件。我想这种行为的目的是为了说明这种情况。

有关 RRule fullCalendar 插件的更多信息，包括有关排除日期的信息，请访问 https://fullcalendar.io/docs/rrule-plugin

FullCalendar 5 - 前日期属性被忽略

FullCalendar5 - exdate property is being ignored

angular

fullcalendar

fullcalendar-5

FullCalendar 5 - 前日期 属性 被忽略

FullCalendar5 - exdate property is being ignored

angular

fullcalendar

fullcalendar-5

FullCalendar 5 - 前日期属性被忽略