啥话不说，我们先上效果图，源码放在最后

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，就是这么简单，所有代码我都封装好了，你只需要直接用就好了，代码我就上传到这了

日历控件下载

手把手教你用js写一个可以选择年月的动态日历组件

如果您觉得有用，请作者喝杯咖啡吧，或者关注评论转发

猜你喜欢