Don't say anything, let's upload the renderings first, and put the source code at the end
1. Implemented functions
Switch the calendar with the year, switch the calendar with the month, you can display the month or the year, and you can display the time corresponding to a certain day in the calendar
2. Write interface code
<!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, it’s that simple, I’ve packaged all the codes, you just need to use them directly, I’ll upload the codes here