fullcalendar 4.2 使用 实例 记录具体实现JS(自定义显示自己需要的视图)

$(document).ready(function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid'],
      header: {
        left: 'today,prev,next',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek'
      },
      locale: 'zh-cn',
      defaultView:'dayGridWeek',//默认视图
      buttonText: {
          today: '今天',
          dayGridMonth: '月',
          dayGridWeek: '周',
      },
      defaultDate: new Date(),
      nowIndicator:true,//显示当前时间的标记
      //设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据
      eventLimit: true,
      dateClick: function(info) {
          
      },
      eventClick: function(event, jsEvent, view) {//点击日程事件，触发此操作 event是日程（事件）对象，jsEvent是个javascript事件，view是当前视图对象。
          alert("点击日程事件");
      },
      eventMouseEnter: function(mouseEnterInfo){//鼠标悬停在日程上的事件
         $(mouseEnterInfo.el).popover({
                content: 'Popoverddddddd',
                trigger: 'hover',
                theme: 'primary lg'
             })
      },
      events:function(fetchInfo, successCallback, failureCallback){
          var start = fetchInfo.start;
          var end = fetchInfo.end;
            var startDate= new Date(start);
            var endDate = new Date(end);
          var startTime = startDate.getFullYear()+'-'+checkTime(startDate.getMonth()+1)+'-'+checkTime(startDate.getDate());
          var endTime = endDate.getFullYear()+'-'+checkTime(endDate.getMonth()+1)+'-'+checkTime(endDate.getDate());
          var eventsValue = [];
          $.ajax({  
               url: "",  
               async:false,
               type:"post",
               dataType:'json',  
               data:{"startDate":startTime,"endDate":endTime},  
               success: function(datas) { 
                    if(datas.code==0){
                        $(datas.data).each(function (i , e){

                           var htmls=[];
                            htmls.push("");
                            htmls.push("

");
                            htmls.push("

");
                            htmls.push("  "+datas.data[i].timeRange+"");
                            htmls.push("

");
                            htmls.push("

");
                            htmls.push("  "+teacheName+"");
                            htmls.push("

");
                            htmls.push("

");
                            htmls.push("  ");
                            htmls.push("    查看");
                            htmls.push("    ");
                            htmls.push("    删除");
                            htmls.push("    ");
                            htmls.push("    编辑");
                            htmls.push("    ");
                            htmls.push("    查看总结");
                            htmls.push("    ");
                            htmls.push("   编辑总结");
                            htmls.push("  ");
                            htmls.push("

");
                            htmls.push("

");
                            
                            var html = htmls.join("\n");
                            
                            eventsValue.push({
                                   id:datas.data[i].scheduleDefineId,
                                   title:html,
                                   start:datas.data[i].startDate,
                                   end:datas.data[i].endDate,
                                   backgroundColor:datas.data[i].color,
                                   textColor:'#080808'
                            });
                        });
                    }
                }
            });
            successCallback(eventsValue);
       },
      eventRender: function (info) {
          info.el.innerHTML=info.event.title;//主要靠这个实现 显示html内容
       },
    });

    calendar.render();
  });
  
  
function checkTime(i){
    if(i<10){
        i = '0'+i
    }
    return i
}