layui+fullcalendar写一个日程管理的增删改查
时间: 2023-09-10 12:10:40 浏览: 106
FullCalendar应用——增删改数据操作
好的,我可以为您提供一个简单的示例代码。首先,您需要在页面中引入layui和fullcalendar的相关资源文件。然后,您可以按照以下步骤编写您的代码:
1. 初始化fullcalendar
```javascript
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: true,
eventLimit: true,
events: []
});
```
2. 添加事件
```javascript
$('#addBtn').on('click', function() {
var title = $('#title').val();
var start = $('#start').val();
var end = $('#end').val();
var eventData;
if (title && start) {
eventData = {
title: title,
start: start,
end: end ? end : start
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
});
```
3. 修改事件
```javascript
$('#calendar').on('eventClick', function(event) {
$('#title').val(event.title);
$('#start').val(event.start.format('YYYY-MM-DD HH:mm:ss'));
$('#end').val(event.end.format('YYYY-MM-DD HH:mm:ss'));
$('#editModal').modal();
$('#editBtn').unbind().on('click', function() {
event.title = $('#title').val();
event.start = $('#start').val();
event.end = $('#end').val();
$('#calendar').fullCalendar('updateEvent', event);
$('#editModal').modal('hide');
});
});
```
4. 删除事件
```javascript
$('#calendar').on('eventClick', function(event) {
if (confirm("确定删除该事件吗?")) {
$('#calendar').fullCalendar('removeEvents', event._id);
}
});
```
以上代码仅为简单示例,您可以根据实际需求进行修改和扩展。
阅读全文