205 lines
7.4 KiB
HTML
205 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Calendar</title>
|
|
<link rel="stylesheet" href="layui/css/layui.css" media="all">
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-layout layui-layout-admin myDiy">
|
|
<blockquote class="layui-elem-quote">日历管理
|
|
</blockquote>
|
|
|
|
<br/><br/><br/>
|
|
|
|
<div class="layui-bg-gray layui-row layui-col-space15" id="card">
|
|
|
|
<form class="layui-form" lay-filter="calendarForm">
|
|
<div class="layui-form-item">
|
|
<table id="demo" lay-filter="test"></table>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">日历</label>
|
|
<div class="layui-input-block">
|
|
<div id="calendarShow" name="calendar" style="width: 45%"/>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<div class="layui-form-item">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">addTask</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input" id="calendar">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">标题</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">content</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="content" required lay-verify="required" placeholder="请输入content"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">type</label>
|
|
<div class="layui-input-block">
|
|
<input type="radio" name="model" value="0" title="ONE" checked>
|
|
<input type="radio" name="model" value="1" title="LOOP">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">model</label>
|
|
<div class="layui-input-block">
|
|
<input type="radio" name="type" value="5" title="DAY" checked>
|
|
<input type="radio" name="type" value="4" title="WEEK">
|
|
<input type="radio" name="type" value="2" title="MONTH">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">间隔日期</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="day" required lay-verify="required" placeholder="天数"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<blockquote class="layui-elem-quote"><span id="dateText">日期选择</span>
|
|
</blockquote>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<a class="layui-btn" id="setCalendar">新增规则</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="layui/layui.js"></script>
|
|
<script src="layui/jquery-3.2.1.js"></script>
|
|
<script>
|
|
|
|
layui.use(['laydate', 'form','table'], function () {
|
|
let dayDateObj
|
|
let marks = {}
|
|
let holiday = []
|
|
let laydate = layui.laydate;
|
|
let form = layui.form;
|
|
let table=layui.table;
|
|
|
|
$.get("/calendar/all.do", function (json) {
|
|
//执行一个laydate实例
|
|
marks = json.data.date;
|
|
holiday = json.data.holiday;
|
|
showData()
|
|
})
|
|
table.render({
|
|
elem: '#demo'
|
|
,url: '/calendar/list.do' //数据接口
|
|
,page: true //开启分页
|
|
,cols: [[ //表头
|
|
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
|
|
,{field: 'title', title: '标题', width:100}
|
|
,{field: 'content', title: 'content', width:200, sort: true}
|
|
,{field: 'startTime', title: 'startTime', width:180}
|
|
,{field: 'endTime', title: 'endTime', width: 180}
|
|
,{field: 'time', title: 'time', width: 80, sort: true}
|
|
,{field: 'type', title: 'type', width: 80, sort: true}
|
|
,{field: 'model', title: 'model', width: 80}
|
|
,{field: 'words', title: '字数', width: 135, sort: true}
|
|
]]
|
|
});
|
|
function showData() {
|
|
laydate.render({
|
|
elem: '#calendar' //指定元素
|
|
, type: 'datetime'
|
|
, show:true
|
|
, range: true
|
|
, holidays: holiday
|
|
, done: function (value, date, endDate) {
|
|
console.log(date)
|
|
console.log(endDate)
|
|
dayDateObj = date;
|
|
dayDateObj.time = value
|
|
$('#dateText')[0].innerHTML = "从" + date.date + "号开始计算"
|
|
}, change: function (value, date, endDate) {
|
|
|
|
}
|
|
});
|
|
laydate.render({
|
|
elem: '#calendarShow' //指定元素
|
|
, position: 'static'
|
|
, holidays: holiday
|
|
,theme: 'molv'
|
|
, done: function (value, date, endDate) {
|
|
|
|
}, change: function (value, date, endDate) {
|
|
console.log(marks[value]+" > "+value)
|
|
if (marks[value] !== undefined) {
|
|
// datatmp.hint(marks[value])
|
|
layer.tips(marks[value], '#calendarShow')
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
$('#setCalendar').click(function () {
|
|
form.submit('calendarForm', function (obj) {
|
|
console.log(obj)
|
|
let field = obj.field;
|
|
layer.open({
|
|
title: '确认'
|
|
, content: '确认从' + dayDateObj.date + '号开始，开始提醒？'
|
|
, yes: function (index, layero) {
|
|
$.post("/calendar/set.do", {
|
|
startDate: dayDateObj.time
|
|
, title: field.title
|
|
, content: field.content
|
|
, type: field.type
|
|
, model: field.model
|
|
, day: field.day
|
|
},function (json) {
|
|
layer.msg(json.msg)
|
|
})
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
})
|
|
});
|
|
</script>
|
|
<style>
|
|
.myDiy {
|
|
/*width: 80%;*/
|
|
margin-top: 10%;
|
|
margin-left: 15%;
|
|
margin-right: 15%;
|
|
}
|
|
|
|
.button {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
</style>
|
|
|
|
</html> |