以下是一个使用FullCalendar库的简单示例代码:
```html
$(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`)。可以根据需要添加更多的事件。