【问题标题】:Remove duplicate events删除重复事件
【发布时间】:2019-10-01 01:15:08
【问题描述】:

问题: 我正在使用 FullCalendar 4 我想创建一个“约会日历”,并且我正在使用 rrule 来保存可供选择的可用空间。

如果我为某个日期添加一个新约会,我想删除现有的可用空间并插入一个新事件。

喜欢: 开始时间:2019-10-10T10:00 标题:空闲空间

开始:2019-10-10T10:00 标题:为客户屏蔽

第一个应该消失,第二个应该显示。

现在同时显示 2 个事件。

我该如何解决这个问题?

编辑:

所以,第一个事件是使用 rrule,它每周一、周二和周五重复。

但我在星期二早上 7 点也有一个活动(第二个)。现在,我想在这个日期使用 rrule 删除事件。

我该怎么做?

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list', 'rrule'],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    defaultDate: '2019-09-12',
    editable: true,
    events: [
      {
        "title": "Free",
        rrule: {
          freq: 'weekly',
          byweekday: ['mo', 'tu', 'fr'],
          dtstart: '2019-09-02T07:00',
          until: '2022-06-01'
        },
      },
      {
        "title": "Blocked",
        "type": "call",
        "start": "2019-09-03T07:00"
      }
    ],
    eventTimeFormat: { // like '14:30:00'
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    },
    eventColor: '#378006',
    eventClick: function (info) {
      alert('Event: ' + info.event.start);
      alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
      alert('View: ' + info.view.type);

      // change the border color just for fun
      info.el.style.borderColor = 'red';
    },
  });

  calendar.render();
});

【问题讨论】:

  • 使用事件来表示空闲时间并不是一个好主意。一个空闲的位置应该由一个事件的缺席来表示。请参阅此答案以获得更好的模式:stackoverflow.com/a/58164691/5947043
  • 感谢您的回复,但这不是我想要的方式。我只想展示这样的空闲插槽(免费:蓝色,占用:橙色)imgur.com/0VJ70k4 - 知道如何实现这一点吗?
  • 将日历的默认背景颜色更改为蓝色,则可用空间将变为蓝色。通过使用事件来做你所要求的事情会产生比它解决的问题更多的问题
  • 只是另一个问题,我怎样才能删除重复的事件?我的意思是在一个 startTime 上发生 2 个事件。我只想显示一个。
  • 由于我不知道事件是如何到达那里的,所以我无法真正告诉您如何删除它们。我需要适当的示例数据和日历代码才能理解问题(即问题的minimal, reproducible example)。

标签: javascript fullcalendar fullcalendar-4 rrule


【解决方案1】:

您正在寻找的例外是 EXDATE。我不是 FullCalendar 用户,但从快速查看文档看来,您正在使用连接到此库的 rrule 插件:https://github.com/jakubroztocil/rrule

EXDATE 显示在那里,但在我看来,rrule 插件可能无法让您访问该功能(因为它支持创建 RRule,而不是 RRuleSet)。如果您可以使用 EXDATE,那将非常适合您的用例。

否则,我认为您最好的选择是在发生这种情况时拆分定期活动 - 在已预订的约会之前结束它,并创建一个在下一个空档开始的新活动。例如:

events: [
      {
        "title": "Free",
        rrule: {
          freq: 'weekly',
          byweekday: ['mo', 'tu', 'fr'],
          dtstart: '2019-09-02T07:00',
          until: '2019-09-04'
        },
      },
      {
        "title": "Blocked",
        "type": "call",
        "start": "2019-09-06T07:00"
      },
      {
        "title": "Free",
        rrule: {
          freq: 'weekly',
          byweekday: ['mo', 'tu', 'fr'],
          dtstart: '2019-09-09T07:00',
          until: '2022-06-01'
        },
      }
    ]

请注意,我已经移动了此示例的“已阻止”约会,因此我可以实际展示我所描述的内容。由于在您的示例中,被阻止的约会是该系列中的第二个,因此只有两个事件(第一个空闲时段和被阻止的一个)和其余的重复系列会更有意义。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-21
    • 2018-01-25
    • 2018-08-10
    • 2011-09-21
    • 2012-07-18
    相关资源
    最近更新 更多