Fullcalendar(简单的日程管理)

官网：FullCalendar - JavaScript Event Calendar

小Tip:有几个是付费项目

初始化：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
          selectable: true,
      headerToolbar: {
          left: 'title',
          center: '',
          right: 'prev today next'
      },
      locale: 'zh-cn',
      buttonText:{
        today:'今天',
        prev:'上个月',
        next:'下个月'
      },
      displayEventTime:false,//设置时间点不显示
      firstDay:1, //第一天显示周一
      events:data,
      select:function(selectInfo){
        //选择时间后触发的事件（api中resource不可用）；
        console.log(selectInfo);
      },
      eventClick:function(info){
            //点击事件触发
            console.log(info);
      }
    });
    calendar.render();
});

其中events可以动态获取

events: function(date,callback){  
     $.ajax({
        type:"post",
        url:"",
        contentType:"application/x-www-form-urlencoded;charset=utf-8",
        dataType:"json",
        data:{  参数 ...  },
        async: false,
        success:function(res)
        {
          $.each(res.data,function(index,item){
            var val={};
            if(item.title){
                val ={
                    title:!item.title?'':item.title,
                    start:item.start,
                    WorkType:item.WorkType,
                    id:item.id
                    //这边属性可以根据自己需要增加，后续使用的时候方便取用
                   
                };
            }
            events.push(val);
          });
          callback(events);
        }
    });
  },

如果想获取事件通过事件id获取，故每个事件都必须有ID值：calendar.getEventById(id)。

相关包

链接: https://pan.baidu.com/s/1O2O_ysWeNLaFNh6omzA39Q?pwd=1hfj 提取码: 1hfj 复制这段内容后打开百度网盘手机App，操作更方便哦

链接: https://pan.baidu.com/s/1JsLZ3Vypr5-teTifFKqZtg?pwd=8bq4 提取码: 8bq4 复制这段内容后打开百度网盘手机App，操作更方便哦

持续更新中....