FullCalendar 反应添加事件持续时间 - Javascript

FullCalendar是一个开源的全功能日历库，可以对日历进行各种操作，例如添加、编辑、删除事件等。本文将重点介绍如何用FullCalendar实现添加事件持续时间的功能。

实现步骤

1. 安装FullCalendar

首先需要安装FullCalendar，可以通过npm或直接在页面引入cdn来实现。

npm：

$ npm install fullcalendar

cdn:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

2. 初始化FullCalendar

接下来，需要使用FullCalendar初始化一个日历。

$('#calendar').fullCalendar({
  defaultView: 'month',          // 默认当前月份
  editable: true,                // 是否可以编辑日历
  eventLimit: true,              // 如果有太多事件，隐藏后面的
  events: [{                     // 添加一些默认事件
      title: 'Default Event 1',
      start: '2019-06-01T10:00:00',
      end: '2019-06-01T12:00:00'
    },
    {
      title: 'Default Event 2',
      start: '2019-06-05T14:00:00',
      end: '2019-06-05T16:00:00'
    }
  ],
});

3. 添加可选的持续时间

接下来，我们需要重写FullCalendar的select方法，以添加一个可选的事件持续时间。

$('#calendar').fullCalendar({
  defaultView: 'month',
  editable: true,
  eventLimit: true,
  events: [{
      title: 'Default Event 1',
      start: '2019-06-01T10:00:00',
      end: '2019-06-01T12:00:00'
    },
    {
      title: 'Default Event 2',
      start: '2019-06-05T14:00:00',
      end: '2019-06-05T16:00:00'
    }
  ],
  selectable: true,           // 添加可选事件
  selectHelper: true,         // 在选择区域显示帮助信息
  select: function(start, end) {
    var eventData;
    var title = prompt('Event Title:');
    if (title) {
      eventData = {
        title: title,
        start: start,
        end: end
      };
      $('#calendar').fullCalendar('renderEvent', eventData, true); // 添加事件到日历
    }
    $('#calendar').fullCalendar('unselect'); // unselect选中区域
  },
});

4. 添加持续时间选择器

现在我们已经可以选择事件持续时间，但是通过简单的文本输入难以计算复杂的时间，因此我们需要添加一个持续时间选择器。

$('#calendar').fullCalendar({
  // ...
  select: function(start, end) {
    var eventData;
    var title = prompt('Event Title:');
    if (title) {
      eventData = {
        title: title,
        start: start,
        end: end
      };
      $('#calendar').fullCalendar('renderEvent', eventData, true);
    }
    $('#calendar').fullCalendar('unselect');
  },
  selectOverlap: function(event) {
    return !event.allDay;
  },                        // 默认情况下选择所有时间，必须重写以选择非全天事件
  selectConstraint: {
    start: $.fullCalendar.moment().subtract(1, 'days').format('YYYY-MM-DD'),
    end: '2099-12-31'
  },                        // 限制持续时间选择器的开始和结束日期
  eventResize: function(event, delta, revertFunc) {
    event.allDay = false;   // 当改变事件的时间时，保证不是全天事件
  },
  eventDurationEditable: true, // 允许使用持续时间选择器
  eventDrop: function(event, delta, revertFunc) {
    event.allDay = false;   // 当改变事件的时间时，保证不是全天事件
  },
});

现在我们就成功的添加了FullCalendar可选事件持续时间的功能，效果如下图所示。

总结

在本文中，我们使用FullCalendar和一些简单的自定义代码实现了可选事件持续时间功能。希望本文能够对你有所帮助，谢谢阅读！