FullCalendar日历组件：进行任务增删改，参考gitee例子修改

效果

参考路径

zxj/FullCalendar开发示例 - 码云 - 开源中国 (gitee.com)

代码

主页面：index.php

<?php
ob_start();
include('includes/session.inc');
?>
<!DOCTYPE html>
<html><head><title>日程管理</title><meta charset="UTF-8"><style>#calendar {max-width: 1100px;height: auto;margin: 0 auto;}.qtip-default {border: 1px solid #ffffff !important;background-color: #ffffff !important;color: #555;}.qtip-event-detail .qtip-content {width: 255px;background-color: #ffffff;border: 1px solid #e0e0e0;border-radius: 2px;border-top: 3px solid #2878f0;padding: 2px;box-shadow: 0 0 8px rgba(0, 0, 0, .2);}.event-detail-wrap {padding: 10px;font-size: 14px;line-height: 26px;color: #666}.detail-info-list {color: #999;}.event-detail-wrap .action-group {border-top: 1px solid #e0e0e0;padding-top: 8px;margin-top: 8px;text-align: right;}.event-detail-wrap .action-group a {color: #2878f0;text-decoration: none;display: inline-block;margin-left: 6px;}</style><link href="dist/jquery.qtip.min.css" rel="stylesheet" type="text/css" /><link href="dist/layui/css/layui.css" rel="stylesheet" type="text/css" />
</head><body><div class="layui-three-main"><div class="layui-card"><div class="layui-card-body zgui-marginTop10"><div id="calendar"></div></div></div><div id="add-wrapper" style="display: none;padding: 10px"><form class="layui-form" id="add-filter" lay-filter="add-filter"><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">任务标题<text style="color:red">*</text></label><div class="layui-input-block"><input autocomplete="off" required="required" class="layui-input" lay-verify="required" name="title" placeholder="请输入" type="text"></div></div></div><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">任务内容<text style="color:red">*</text></label><div class="layui-input-block"><textarea class="layui-textarea" required="required" name="content" placeholder="请输入内容"></textarea></div></div></div><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">开始时间<text style="color:red">*</text></label><div class="layui-input-block"><input autocomplete="off" class="layui-input" id="start" lay-verify="required|date" name="start" placeholder="请选择任务开始时间"></div></div><div class="layui-form-item"><label class="layui-form-label">结束时间<text style="color:red">*</text></label><div class="layui-input-block"><input autocomplete="off" class="layui-input" id="end" lay-verify="required|date" name="end" placeholder="请选择任务结束时间"></div></div></div><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">整天事件</label><div class="layui-input-block"><input lay-skin="switch" name="allDay" title="是|否" type="checkbox" value="1"></div></div></div></form></div><div id="edit-wrapper" style="display: none;padding: 10px"><form class="layui-form" id="edit-filter" lay-filter="edit-filter"><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">任务标题<text style="color:red">*</text></label><div class="layui-input-block"><input autocomplete="off" required="required" class="layui-input" lay-verify="required" name="title" placeholder="请输入" type="text"></div></div></div><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">任务内容<text style="color:red">*</text></label><div class="layui-input-block"><textarea class="layui-textarea" required="required" name="content" placeholder="请输入内容"></textarea></div></div></div><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">开始时间<text style="color:red">*</text></label><div class="layui-input-block"><input autocomplete="off" class="layui-input" id="start" lay-verify="required|date" name="start" placeholder="请选择任务开始时间"></div></div><div class="layui-form-item"><label class="layui-form-label">结束时间<text style="color:red">*</text></label><div class="layui-input-block"><input autocomplete="off" class="layui-input" id="end" lay-verify="required|date" name="end" placeholder="请选择任务结束时间"></div></div></div><div class="layui-row"><div class="layui-form-item"><label class="layui-form-label">整天事件</label><div class="layui-input-block"><input lay-skin="switch" name="allDay" title="是|否" type="checkbox" value="1"></div></div></div></form></div></div>
</body>
<script src="dist/index.global.min.js"></script>
<script src="dist/jquery-3.7.1.min.js"></script>
<script src="dist/jquery.qtip.min.js"></script>
<script src="dist/zh-cn.global.min.js"></script>
<script src="dist/layui/layui.js"></script>
<script type="text/javascript">layui.use(['layer', 'laydate', 'form', 'jquery'], function() {let layer = layui.layer; //创建各种弹出式窗口。let $ = layui.jquery; //可以通过 $ 来使用 jQuery 的功能let laydate = layui.laydate; //引入 layui 框架中的日期选择器模块，用于方便地选择日期和时间。let form = layui.form;//这行代码是调用 laydate 模块的 render 方法来渲染一个日期选择器，指定了要渲染的 HTML 元素为 id 为 start 的元素，//并且设置日期选择器的类型为 datetime，即包括日期和时间laydate.render({elem: '#start',type: 'datetime',});//这行代码也是渲染一个日期选择器，但是针对的是 id 为 end 的元素。laydate.render({elem: '#end',type: 'datetime',});//这里使用 layui 的 form 模块的 val 方法，通过传入表单的 id 或 class（这里是 'add-filter'）和一个对象来设置对应字段的值。//这是一个对象字面量（Object Literal），表示要设置的字段名和对应的值。在这里，start 和 end 是表单字段的名称，startTime 和 endTime 是传入函数的参数，表示要设置的值。function setData(startTime, endTime) {// 格式化日期时间为年月日时分秒格式var currentDateTimeString = formatDate(new Date(startTime));var nextDayDateTimeString = formatDate(new Date(endTime));// 填充到表单字段中form.val('add-filter', {"start": currentDateTimeString,"end": nextDayDateTimeString,});}function formatDate(date) {var year = date.getFullYear();var month = (date.getMonth() + 1 < 10 ? '0' : '') + (date.getMonth() + 1);var day = (date.getDate() < 10 ? '0' : '') + date.getDate();var hours = (date.getHours() < 10 ? '0' : '') + date.getHours();var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();var seconds = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;}//新增任务function addTask(arg) {//调用函数 setData() 并传入上述三个参数，用于将事件的开始时间、结束时间填充到表单中。setData(arg.startStr, arg.endStr, arg.allDay);let index = layer.open({ //layui 的 layer.open() 方法创建一个弹出层，并将返回的索引值赋给变量 index。该方法接收一个配置对象作为参数，用于指定弹出层的各种属性和行为。type: 1, //弹出层的类型为普通层，即内容区域为一个固定大小的盒子。title: "新增任务",shade: false, //用于设置弹出层不显示遮罩层。area: ["800px", "600px"], //配置对象中的属性，用于设置弹出层的宽度为 800 像素，高度为 600 像素。btn: ['保存', '取消'], //配置对象中的属性，用于设置弹出层的底部按钮，第一个按钮显示文本 "保存"，第二个按钮显示文本 "取消"。content: $('#add-wrapper'), // 用于设置弹出层的内容区域为 id 为 "add-wrapper" 的元素。该元素可能是一个表单或者其他需要展示的内容。//保存yes: function() {let data = form.val('add-filter');// 判断必填项是否已填写if (data.title && data.content && data.start && data.end) {// 发送数据到后端进行保存$.ajax({type: "POST",url: "save_calendar.php", // 后端 PHP 文件的路径data: {action: 'save_event', // 指定要执行的方法title: data.title,content: data.content,start: data.start,end: data.end,allDay: data.allDay ? 1 : ''},success: function(response) {var response = JSON.parse(response);if (response == 'success') {calendar.addEvent({action: 'save_event', // 指定要执行的方法title: data.title,content: data.content,start: data.start,end: data.end,allDay: data.allDay ? 1 : ''});calendar.unselect();layer.msg("保存成功", {time: 1000}, function() {// 删除成功后刷新整个页面location.reload();});} else {layer.msg("保存失败");}}});} else {layer.msg("请填写必填项", {icon: 5}); // 给出提示return false; // 阻止提交}},end: function() {document.getElementById("add-filter").reset(); //来重置表单的字段值，将其恢复到初始状态}});};//日历组件let calendarEl = document.getElementById('calendar');//通过 new 关键字创建一个 FullCalendar 的日历对象。//第一个参数 calendarEl 是一个表示日历要插入的 DOM 元素的选择器或者元素对象。第二个参数是一个配置对象，用于设置日历的各种属性和行为let calendar = new FullCalendar.Calendar(calendarEl, {locale: 'zh-cn', //设置日历的语言为中文，即使用中文的月份和星期名称。headerToolbar: { //配置日历头部的工具栏，用于显示导航按钮和标题。left: 'prev,next today', //在左侧显示上一个、下一个和今天的导航按钮center: 'title', //在中间显示当前日期范围的标题。// right: 'multiMonthYear,dayGridMonth,timeGridWeek,timeGridDay' //在右侧显示多月份选择器、月视图、周视图和日视图的切换按钮。right: 'dayGridMonth,timeGridWeek'},// initialDate: "2023-09-13",//设置初始日期为 "2023-09-13"，即日历加载时所显示的日期。navLinks: true, //启用导航链接功能，即当用户点击日期时可以跳转到对应的日视图。selectable: true, //启用选择功能，允许用户通过拖动鼠标选择日期范围。selectMirror: true, //启用选择镜像效果，即在用户拖动鼠标选择日期范围时，会显示一个半透明的镜像效果来预览选择的范围。select: function(arg) { //当用户完成选择日期范围时，执行的回调函数。在这段代码中，调用了 addTask(arg) 函数来处理新增任务的逻辑。参数 arg 包含了用户选择的日期范围信息。//新增任务addTask(arg);},eventClick: function(args) { //当用户点击日历中的事件时，执行的回调函数},eventDidMount: function(args) {// console.log(endFormatted)// var timeRange = args.event.startStr + ' - ' + args.event.endStr;if (args.event.allDay == 1) {var timeRange = args.event.startStr + ' - ' + args.event.endStr;} else {var start = new Date(args.event.start);var end = new Date(args.event.end);var options = {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit'};var startFormatted = start.toLocaleString('zh-CN', options); // 格式化开始时间为本地日期时间字符串var endFormatted = end.toLocaleString('zh-CN', options); // 格式化结束时间为本地日期时间字符串var timeRange = startFormatted + ' - ' + endFormatted;}$(args.el).qtip({ //将 jQuery 对象 $(args.el) 转换为 qTip2 插件对象，并设置相关配置选项。content: { //设置提示框的内容，包括日期范围、团队名称、科目和教师等信息，以及编辑和删除操作的链接。text: `<div class="event-detail-wrap"><div class="detail-info-list"><div class="js_event_detail_time">${timeRange}</div><div class="js_event_detail_team">${args.event.title}</div><div class="js_event_detail_subject"></div><div class="js_event_detail_teacher"></div></div><div class="action-group"><a href="#" id="edit">编辑</a><a href="#" id="delete">删除</a></div></div>` //要提示的内容，就是上面创建的那个浮层},position: { //设置提示框在事件元素下方居中显示。my: 'bottom center',at: 'top center'},show: { //设置提示框只能单独显示，而不会同时出现多个。solo: true //保证每次只显示一个提示框},hide: { //设置提示框隐藏的方式，包括是否可以操作提示框、隐藏延迟时间和触发隐藏的事件fixed: true, //能够操作提示框delay: 100, //多久之后隐藏提示框event: ' mouseleave',},style: { //设置提示框的样式，这里使用了自定义的样式类 qtip-event-detailclasses: 'qtip-event-detail' //自定义的弹层样式},events: {visible: function(event, api) {// 在提示框显示完成后给删除按钮绑定点击事件api.elements.content.find('#delete').on('click', function(e) {e.preventDefault();var eventId = args.event.id; // 获取事件的唯一标识符，用于指定要删除的事件// 发送 AJAX 请求删除事件$.ajax({url: 'save_calendar.php', // 后端处理删除事件的接口地址method: 'POST',data: {action: 'del_event',eventId: eventId}, // 传递要删除的事件IDsuccess: function(response) {var response = JSON.parse(response);console.log(response)// 处理删除成功的情况if (response == 'success') {layer.msg("删除成功", {time: 1000}, function() {// 删除成功后刷新整个页面location.reload();});} else {layer.msg("删除失败");}},});});//编辑// 在提示框显示完成后给编辑按钮绑定点击事件api.elements.content.find('#edit').on('click', function(e) {e.preventDefault();var eventId = args.event.id; // 获取事件的唯一标识符，用于指定要编辑的事件$.ajax({url: 'save_calendar.php', // 后端处理获取事件详细信息的接口地址method: 'POST',data: {action: 'details_event',eventId: eventId}, // 传递要获取详细信息的事件IDsuccess: function(response) {var eventDetails = JSON.parse(response);// 将事件详细信息填充到编辑表单中$('#edit-filter input[name="title"]').val(eventDetails.title);$('#edit-filter textarea[name="content"]').val(eventDetails.content);$('#edit-filter input[name="start"]').val(eventDetails.start);$('#edit-filter input[name="end"]').val(eventDetails.end);// 设置整天事件的默认值并更新复选框状态var form = layui.form;$('#edit-filter input[name="allDay"]').prop('checked', eventDetails.allDay === '1');form.render('checkbox'); // 重新渲染复选框，确保样式正确显示// 打开弹窗，显示填充好信息的编辑表单let index = layer.open({type: 1,title: "编辑任务",shade: false,area: ["800px", "600px"],btn: ['保存', '取消'],content: $('#edit-wrapper'),yes: function() {// 获取编辑表单中的数据并保存到后端var editedData = form.val('edit-filter');if (editedData.title && editedData.content && editedData.start && editedData.end) {console.log(editedData)// 发送数据到后端进行保存$.ajax({type: "POST",url: "save_calendar.php",data: {action: 'edit_event',eventId: eventId, // 传递要编辑的事件IDtitle: editedData.title,content: editedData.content,start: editedData.start,end: editedData.end,allDay: editedData.allDay ? 1 : '',},success: function(response) {var response = JSON.parse(response);if (response == 'success') {layer.msg("修改成功", {time: 1000}, function() {// 删除成功后刷新整个页面location.reload();});} else {layer.msg("修改失败");}}});} else {layer.msg("请填写必填项", {icon: 5}); // 给出提示return false; // 阻止提交}},});}});});}}});},editable: true, //启用可编辑功能，允许用户通过拖拽事件元素来修改事件的时间和日期等信息。dayMaxEvents: true, // 启用“更多”链接功能，当某一天的事件数量过多时，会在日历中显示一个“更多”链接，点击链接可以查看所有事件。//静态数据events: [], // 初始时先为空，后续通过 AJAX 请求获取事件数据});// 发送 AJAX 请求获取数据库中的事件数据$.ajax({type: "POST",url: "save_calendar.php", // 后端 PHP 文件的路径data: {action: 'get_event', // 指定要执行的方法},success: function(response) {if (response) {var eventsData = JSON.parse(response);// console.log(eventsData)// 将获取到的事件数据填充到日历组件中calendar.addEventSource(eventsData);// 重新渲染日历，显示最新的事件数据calendar.render();}}});calendar.render();})
</script></html>

全后端连接：save_calendar.php

<?php
// 数据库连接参数
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "tianhao";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
//执行保存事件
if ($_POST['action'] === 'save_event') {$title = $_POST['title'];$content = $_POST['content'];$start = strtotime($_POST['start']);$end = strtotime($_POST['end']);$allDay = $_POST['allDay'];$sql = "INSERT INTO calendar_info (title,content, start, end,allDay) VALUES ('$title', '$content', '$start', '$end', '$allDay')";$sql_result = mysqli_query($conn, $sql);if ($sql_result) {// 插入成功$response = 'success';} else {// 插入失败$response = 'failed';}// 返回处理结果给前端echo json_encode($response);
}
//获取事件
if ($_POST['action'] === 'get_event') {$sql_get = "select * from calendar_info";$sqlget_result = mysqli_query($conn, $sql_get);while ($row = mysqli_fetch_assoc($sqlget_result)) {$event = array('id' => $row['id'],'title' => $row['title'],'content' => $row['content'],'start' => ($row['start'] ? date('Y-m-d H:i:s', $row['start']) : ''),'end' => ($row['end'] ? date('Y-m-d H:i:s', $row['end']) : ''),'allDay' => $row['allDay']);$events[] = $event; // 将每个事件添加到事件数组中}// 如果有数据，输出数组$events；如果没有数据，输出为0if (!empty($events)) {echo json_encode($events);} else {echo 0;}
}
//删除事件
if ($_POST['action'] === 'del_event') {$eventId = $_POST['eventId'];$sql_del = "DELETE FROM calendar_info WHERE id = $eventId";if (mysqli_query($conn, $sql_del)) { // 假设你使用的是 MySQL 数据库，$conn 是数据库连接对象$response = 'success';} else {// 插入失败$response = 'failed';}// 返回处理结果给前端echo json_encode($response);
}
//详细信息事件
if ($_POST['action'] === 'details_event') {$eventId = $_POST['eventId'];$sql_details = "SELECT * FROM calendar_info WHERE id = $eventId LIMIT 1";$sqldetails_result = mysqli_query($conn, $sql_details);if ($row = mysqli_fetch_assoc($sqldetails_result)) {$event = array('id' => $row['id'],'title' => $row['title'],'content' => $row['content'],'start' => ($row['start'] ? date('Y-m-d H:i:s', $row['start']) : ''),'end' => ($row['end'] ? date('Y-m-d H:i:s', $row['end']) : ''),'allDay' => $row['allDay']);echo json_encode($event);} else {echo 0;}
}
//编辑事件
if ($_POST['action'] === 'edit_event') {$eventId = $_POST['eventId'];$title = $_POST['title'];$content = $_POST['content'];$start = strtotime($_POST['start']);$end = strtotime($_POST['end']);$allDay = $_POST['allDay'];// 更新数据库中对应事件ID的记录$sql_edit = "UPDATE calendar_info SET title = '$title ', content = '$content', start = '$start', end = '$end', allDay = '$allDay' WHERE id = $eventId";// 执行更新操作$result_edit = mysqli_query($conn, $sql_edit);if ($result_edit) {$response = 'success';} else {$response = 'failed';}echo json_encode($response);
}