啥话不说,我们先上效果图,源码放在最后
1、实现的功能
用年切换日历、用月切换日历, 可以显示用月显示,也可以用年显示,可以在日历中显示对应某天的时间
2、编写界面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="./css/raoCalendar.css" />
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/raoCalendar.js"></script>
<script>
$(document).ready(function () {
var data = [
{ startDate: "2018-6-10", name: "事件1" },
{ startDate: "2018-7-10", name: "事件1" },
{ startDate: "2018-8-10", name: "事件1" },
{ startDate: "2018-9-10", name: "事件1" },
{ startDate: "2018-10-10", name: "事件1" },
{ startDate: "2018-11-1", name: "事件2" },
{ startDate: "2018-11-1", name: "事件11" },
{ startDate: "2018-12-1", name: "事件12" },
{ startDate: "2018-12-1", name: "事件13" },
{ startDate: "2018-12-1", name: "事14" },
{ startDate: "2019-1-10", name: "事件14" },
{ startDate: "2019-2-10", name: "事件14" },
{ startDate: "2019-3-10", name: "事件14" },
{ startDate: "2019-4-10", name: "事件14" },
{ startDate: "2019-5-10", name: "事件14" },
{ startDate: "2019-6-10", name: "事件14" },
{ startDate: "2019-7-10", name: "事件14" },
{ startDate: "2019-8-10", name: "事件14" },
{ startDate: "2019-9-10", name: "事件14" },
{ startDate: "2019-10-10", name: "事件14" },
{ startDate: "2019-11-10", name: "事件14" },
{ startDate: "2019-12-10", name: "事件14" },
{ startDate: "2020-1-10", name: "事件14" },
{ startDate: "2020-2-10", name: "事件14" },
];
$(".calendar").calendar({
data: data,
mode: "month",
// maxEvent: 3,
//showModeBtn: false
// newDate: "2018-04-1",
cellClick: function (events) {
console.log(events);
//viewCell的事件列表
art.dialog.parent.location =
"${ctx}/yzself/tsakManage/my-working-manage!addWorking.action";
},
});
});
</script>
</head>
<body>
<div class="calendar"></div>
</body>
</html>
OK,就是这么简单,所有代码我都封装好了,你只需要直接用就好了,代码我就上传到这了