fullCalendar制作一款简单的日历日程

fullCalendar是一个非常流行的开源日历插件，可以轻松地在网站或应用程序中集成日历功能。以下是一个简单的例子，展示如何使用fullCalendar来创建一个日历，并添加一些简单的日程：

首先，您需要引入fullCalendar的JavaScript和CSS文件，可以通过CDN或下载本地文件进行引入。例如：

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

然后，在HTML中创建一个包含日历的元素，例如：

<div id="calendar"></div>

接下来，编写JavaScript代码来初始化fullCalendar，并添加一些日程。例如：

$(document).ready(function() {
  // 初始化fullCalendar
  $('#calendar').fullCalendar({
    // 设置日历的头部
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    },
    // 设置日程的数据源
    events: [
      {
        title: '会议',
        start: '2021-05-01T10:30:00',
        end: '2021-05-01T12:30:00'
      },
      {
        title: '约会',
        start: '2021-05-07T14:00:00',
        end: '2021-05-07T16:00:00'
      },
      {
        title: '生日',
        start: '2021-05-15'
      },
      {
        title: '旅行',
        start: '2021-05-20',
        end: '2021-05-23'
      }
    ]
  });
});

在这个例子中，我们设置了日历的头部，包括前一个月、后一个月、今天按钮和标题。然后，我们添加了一些日程，包括会议、约会、生日和旅行。

最后，您可以使用CSS来调整日历的样式，以适应您的网站或应用程序的外观和感觉。例如：

#calendar {
  max-width: 800px;
  margin: 0 auto;
}

这将限制日历的最大宽度，并将其居中放置。

这只是fullCalendar的基本用法，您可以使用fullCalendar的许多其他选项和方法来自定义日历和日程的行为和外观。