fullcalendar

admin 65 0

以下是一个使用FullCalendar库的简单示例代码:

```html

FullCalendar Example

$(document).ready(function() {

$('#calendar').fullCalendar({

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

},

events: [

{

title: 'Event 1',

start: '2022-01-01'

},

title: 'Event 2',

start: '2022-01-05',

end: '2022-01-07'

title: 'Event 3',

start: '2022-01-09T12:30:00'

}

// 可以添加更多的事件

]

});

});

```

这个示例创建了一个FullCalendar日历,并添加了三个事件。通过引入FullCalendar库的CSS和JavaScript文件,然后在页面上创建一个具有唯一ID的`

`元素,我们可以使用`fullCalendar()`方法初始化日历。

在初始化过程中,我们可以通过配置`header`属性来定义日历的头部。`events`属性用于指定要在日历上显示的事件。每个事件都有一个标题(`title`)和开始时间(`start`),可以选择性地包含结束时间(`end`)。可以根据需要添加更多的事件。