小工具知识网

当前位置: 首页 > 行业知识 > FullCalendar日历组件:进行任务增删改,参考gitee例子修改

行业知识

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

2026-10-28 12:35:43 来源:互联网转载

效果

参考路径

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

代码

主页面:index.php

    日程管理                #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;        }                                                                                                                                                        任务标题*                                                                                                                                                                            任务内容*                                                                                                                                                                            开始时间*                                                                                                                                            结束时间*                                                                                                                                                                            整天事件                                                                                                                                                                                                                    任务标题*                                                                                                                                                                            任务内容*                                                                                                                                                                            开始时间*                                                                                                                                            结束时间*                                                                                                                                                                            整天事件                                                                                                                                            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  

全后端连接:save_calendar.php

上一篇:揭秘AD账号,高效管理与运用指南

下一篇:怎么用框架玩越南服务器?