日历日期根据后台数据带背景的插件 Zabuto Calendar 使用

效果如图：

生成的日历根据后台数据给的不同日期 渲染不同的背景色，以达到提示当日有数据的效果

所使用的插件就是 Zabuto Calendar 日历插件

关于Zabuto Calendar源码，会在后面直接上传文章

calender源码及demo  （此为下载文件）

calender 源码文章 （此为文章，需要请自取）

<div class="calenderbox">
    <div id="my-calendar"></div>
</div>

var eventData = [     //数据格式必须是 json 
  { "date": "2022-04-15" },
  { "date": "2022-04-17" }
];
$("#my-calendar").zabuto_calendar({
            action: function () { 
              return videoDateFunction(this.id, false);
            },
            language: "cn",     //语言
            data: eventData,    //有背景的数据
            cell_border: true,  //边框
            today: true,        //显示今日 
            show_days: true,    //显示星期几
            weekstartson: 0,    //日历开始时间： 0从周末开始，1从周一开始
            show_previous: 12,  //显示 以前 的月份数
            show_next: 0,       //显示 未来 的月份数
            nav_icon: {         //上一月和下一月按钮的 icon
              prev: '<i class="fa fa-chevron-circle-left"><</i>',
              next: '<i class="fa fa-chevron-circle-right">></i>'
            }

          });

function videoDateFunction(id) {
    $('.calenderbox').hide()
    videoflag = true
    var videochooseday = id.split('_')[3]
    $('#videotime').html(videochooseday)
    console.log(videochooseday);

  }

 需要获取不同数据 刷新日历背景

因为日历插件会在你设置事件的位置生成，生成后 无论你给的 eventData 如何改变也不会引起重绘，只有通过重排来触发视图的重绘，即：

$('.calenderbox').html(`<div id="my-calendar"> </div>`) 
//在你需要重绘日历的时候，强制重排结构，结构改变会强制重绘

//附上 eventData 所需数据格式 yyyy-mm-dd
//后端返回数据多数时候是 yyyymmdd格式 笔者这里有一行代码直接切换
var ii = i.substring(0, 4) + "-" + i.substring(4, 6) + "-" + i.substring(6, 8)

其他官方API

1.修改语言

 $("#my-calendar").zabuto_calendar({
    language: "nl"  //语言很多，具体可以翻一下作者源码
    });

2.给定默认日期

$("#my-calendar").zabuto_calendar({
        year: 2015,
        month: 3,
        show_previous: false,
        show_next: 2
      });

3.动态获取 特定日期数据

动态获取 并非js方式， 仅用js的话使用静态赋值方式即可 注意一下 数据格式是json就行

  $("#my-calendar").zabuto_calendar({
        ajax: {
            url: "show_data.php",
            modal: true
        }
      });

 使用固定数据

var eventData = [
      {"date":"2015-01-01","badge":false,"title":"Example 1"},
      {"date":"2015-01-02","badge":true,"title":"Example 2"}
  ];

4.事件效果 

官方只给了两个事件，一个是点击日期的事件 还有个是点击上一月下一月导航栏的事件

function myDateFunction(id) { //点击日期 
        console.log(id)
      var date = $("#" + id).data("date");
      var hasEvent = $("#" + id).data("hasEvent");
    }

function myNavFunction(id) {  //点击上月和下月的导航栏
    console.log(id)
      var nav = $("#" + id).data("navigation");
      var to = $("#" + id).data("to");
    }

使用事件需要事先注册

 $("#my-calendar").zabuto_calendar({
            action: function () {
                return myDateFunction(this.id, false);
            },
            action_nav: function () {
                return myNavFunction(this.id);
            },
            ajax: {
                url: "show_data.php?action=1",
                modal: true
            },
            legend: [
                {type: "text", label: "Special event", badge: "00"},
                {type: "block", label: "Regular event"}
            ]

        });