<?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 �
FullCalendar日历组件任务增删改完整代码+后端
129 浏览量
2024-02-26
10:15:28
上传
评论
收藏 649KB ZIP 举报
demo.zip （15个子文件） 
dist 
jquery.qtip.min.css 9KB jquery-3.7.1.min.js 85KB jquery.qtip.min.js 43KB index.global.min.js 275KB zh-cn.global.min.js 413B layui layui.js 334KB font iconfont.ttf 53KB iconfont.woff2 29KB
iconfont.svg 323KB iconfont.eot 53KB iconfont.woff 34KB css layui.css 120KB index.global.js 673KB save_calendar.php 4KB index.php 26KB资源评论
