fullcalendar分div_代码示例

fullcalendar是一个基于jQuery的开源日历插件，可以用于在网页中展示日程安排。使用fullcalendar时，我们需要在HTML中创建一个div元素作为容器，然后通过JavaScript代码来初始化并配置fullcalendar。

我们需要在HTML中创建一个div元素作为容器，用于展示日历。可以给这个div元素设置一个唯一的id，以便我们可以通过id来获取这个容器。

HTML代码示例：

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

接下来，在JavaScript代码中，我们需要使用jQuery来选中这个div元素，并调用fullcalendar的初始化方法。在初始化方法中，我们可以配置fullcalendar的各种参数，如日历的初始日期、头部的按钮和标题等。

JavaScript代码示例：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    // 在这里配置fullcalendar的各种参数
    // 例如设置日历的初始日期
    defaultDate: '2022-01-01',
    // 设置头部的按钮和标题
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    // 更多配置项...
  });
});

在这个示例中，我们使用了`$(document).ready()`方法来确保页面中的所有元素都加载完毕后再执行fullcalendar的初始化代码。然后，我们通过`$('#calendar')`选中了id为"calendar"的div元素，并调用了fullCalendar方法来初始化它。

在初始化方法中，我们配置了`defaultDate`参数为"2022-01-01"，这样日历就会默认显示在这个日期。我们还配置了`header`参数来设置头部的按钮和标题，左侧显示"prev,next today"三个按钮，中间显示标题，右侧显示"month,agendaWeek,agendaDay"三个视图切换按钮。

通过以上的代码示例，我们可以创建一个使用fullcalendar插件的日历，并根据需要进行各种配置。