layui+fullcalendar写一个完整的日程管理
时间: 2023-09-10 12:10:52 浏览: 174
好的,我可以为您提供一个简单的实现方法。
首先,您需要包含 `layui` 和 `fullcalendar` 的相关文件。然后,您需要初始化 `fullcalendar` 组件,并设置一些参数。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日程管理</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css">
</head>
<body>
<div id="calendar"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script>
<script>
layui.use('layer', function () {
var layer = layui.layer;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format('YYYY-MM-DD'),
navLinks: true,
editable: true,
selectable: true,
eventLimit: true,
events: [
{
title: '会议',
start: '2021-10-01T14:30:00',
end: '2021-10-01T16:30:00',
color: '#FF5722'
},
{
title: '约会',
start: '2021-10-02T18:00:00',
end: '2021-10-02T20:00:00',
color: '#5FB878'
}
],
select: function (start, end) {
var title = prompt('请输入日程名称:');
var eventData;
if (title) {
eventData = {
title: title,
start: start.format('YYYY-MM-DDTHH:mm:ss'),
end: end.format('YYYY-MM-DDTHH:mm:ss'),
color: '#1E9FFF'
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
},
eventClick: function (calEvent, jsEvent, view) {
layer.open({
title: calEvent.title,
content: '开始时间:' + moment(calEvent.start).format('YYYY-MM-DD HH:mm:ss') + '<br>结束时间:' + moment(calEvent.end).format('YYYY-MM-DD HH:mm:ss')
});
},
eventDrop: function (event, delta, revertFunc) {
if (!confirm('确定修改日程时间吗?')) {
revertFunc();
}
}
});
});
</script>
</body>
</html>
```
该代码会在页面中生成一个 `fullcalendar` 组件,并且包含了一些默认的日程事件。您可以通过单击日历上的某个时间段,来创建新的日程事件。您还可以单击现有的日程事件来查看详细信息,或者拖动日程事件以更改其时间。
阅读全文