layUI与FullCalendar结合使用示例

最新推荐文章于 2025-05-14 11:00:00 发布

原创

最新推荐文章于 2025-05-14 11:00:00 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#fullcalendar使用 #calendar日历 #layUI与fullcalendar #layUI与日历插件

本文记录了使用layUI和FullCalendar实现日程管理功能的过程，包括页面效果展示，主界面代码介绍，以及数据库相关。通过不同背景色区分日程状态，点击日程可查看详情并支持编辑和删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

叙：第一次是使用layUI以及fullcalendar开发日程管理功能，根基比较浅薄因此遇到了各种各样的问题，索性最后完成了，现在记录一下，方便以后再次使用时能有所帮助；

1、页面效果

1.1、主界面

在这里插入图片描述

现实的日程信息背景颜色不一样是根据已过时、正在进行中、未开始三种状态划分的，下面会有具体代码讲到；

点击空白处弹出新增日程信息表单，点击已存在的日程弹出查看页面，页面中可以进行修改保存和删除等；

1.2、添加：

在这里插入图片描述

1.3、查看：

在这里插入图片描述

2、主界面代码

直接看代码，里面有详细的步骤：

<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
            <div id='calendar'></div><!-- 此处就是放置日历界面的div，注意id的使用 -->
		</div>
	</div>
</div>

<script>
    layui.use(['fullCalendar'], function() { // layUI加载fullCalendar插件
        var fullCalendar = layui.fullCalendar; // layUI声明使用fullCalendar插件并创建其对象
            fboot = layui.fboot,
            $ = layui.jquery; // layUI声明使用jquery
        fullCalendar.init("calendar", { //根据id初始化日历的div
            plugins: ['dayGrid','interaction','timeGrid'],
            header: {  //定义日历表的表头有哪些信息、按钮