FullCalendarTimeLine 资源时间线视图

fullCalendar  版本5.9.0

FUllCalenda官网有对应视图的代码以及编辑工具

关于fullCalendar相关文件正常引入就可以

控制台出现即可

 我们要做的就是找到对应的数据然后调用SuccessBack方法即可，关于插槽标签的色块可以通过后台设置，对应的点击事件使用fullCalendar中 的   eventMouseEnter方法即可

 

 

    <link href="scheme/fullcalendarnew/lib/main.css" rel="stylesheet">
    <link href="scheme/fullcalendarnew/lib/main.min.css" rel="stylesheet">
    <script src="scheme/fullcalendarnew/lib/main.js"></script>
    <script src="scheme/fullcalendarnew/lib/main.min.js"></script>
    <script src="scheme/fullcalendarnew/lib/locales-all.js"></script>
    <script src="scheme/fullcalendarnew/lib/locales-all.min.js"></script>
    <script src='scheme/fullcalendarnew/lib/locales/zh-cn.js'></script>

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
    // timeZone: 'UTC',
    locale: 'zh-cn', // 设置中文
    resourceAreaWidth:'13%',
    selectable: true, // dataClick生效
    displayEventEnd: true, // 显示结束时间
    refetchResourcesOnNavigate: true,
    resourceOrder:'dispalyorder',
    customButtons: {
    myCustomButton: {
        text: '今日预定', click: function () {
          toDayyd();
        }
      }
    },
    headerToolbar: {
      left: '',
      center: 'prev,title,next',
      right: 'myCustomButton,resourceTimelineTDay,resourcetimelineWeek,resourceTimelineMonth'

    },
    initialView: 'resourceTimelineTDay',
    scrollTime: '07:00',
    aspectRatio: 1.5,
    views: {
      resourceTimelineTDay: {
        type: 'resourceTimeline',
        duration: { days: 1 },
        buttonText: '日',
        slotMinTime:'07:00:00',
        slotMaxTime:'23:00:00',
        slotLabelFormat:[
                {hour:'numeric',hour12:false},
        ]
      },
      resourcetimelineWeek:{
        type:'resourceTimeline',
        duration: { week: 1 },
        slotDuration: { days: 1 },
        buttonText: '周',
        slotLabelFormat: [
          {day:'2-digit', weekday:'short'},
        ],
      },
      resourceTimelineMonth:{
        slotLabelFormat: [
          { day: '2-digit'}
        ],
      },
    },
    editable: true,
    resourceAreaColumns: [
      {
        field: 'meetname',
        headerContent: '会议室名称'
      }
    ],
    resources: function(fetchInfo, successCallback, failureCallback) {
      console.log("开始时间"+fetchInfo.start.valueOf())
      $.ajax({
        type: "POST",
        async: false,
        url: "/meeting/meetRoomCensus/getColumns",
        data: {sTime: fetchInfo.start.valueOf(), eTime: fetchInfo.end.valueOf()},
        dataType: "json",
        success: function (data) {
          if (data.code == 200) {
            successCallback(data.data);
          }
        }
      });
    },
    events: function(info, successCallback, failureCallback) {
      $.get("/meeting/meetRoomCensus/getByParams", {sTime: info.start.valueOf(), eTime: info.end.valueOf()}, function (res) {
        if(res.code == 200){
          successCallback(res.data);
        }
      });
    },
    eventMouseEnter:function( event, jsEvent, view ) {
      var title = "";
      var begintime = "";
      var endtime = "";
      var mname= "123";
      var applyname= "";
      $.ajax({
        type:"POST",
        async:false,
        url:"/meeting/meetRoomCensus/getMouseEnter",
        data:{"scheduleid":event.event._def.publicId},
        dataType:"json",
        success:function(res){
          if(res.code == 200) {
            var data=res.data;
            begintime = data.begintime;
            endtime = data.endtime;
            mname= data.mname;
            applyname= data.applyname;
            title= "开始时间："+data.begintime+" 结束时间："+data.endtime+"\n" +
                    "会议名称："+data.mname+"\n" +
                    "申请人："+data.applyname+"";
          }
        }
      });
      var thatel = event.el;
      console.log(thatel);
      var title = "<div style='width: 280px;font-size:12px;overflow:hidden;padding:10px 0 20px;z-index:1;'>" +
              "<div style='color:#000;font-size:14px;font-weight:700;border-bottom: 0.01rem solid #D8D8D8; " +
              "'>" +
              mname +
              '</div>' +
              "<div style='color: #333;font-size:12px;margin-top:10px;'>会议时间：" +
              begintime+"~"+endtime+
              '</div>' +
              "<div style='color: #333;font-size:12px;margin-top:5px;'>会议申请人：" +
              applyname+
              '</div>' +
              '</div>';
      tips = layer.tips(title,thatel,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500})

    },
    eventMouseLeave:function( event, jsEvent, view ) {
      layer.close(tips);
    },
  });
        calendar.render();
        //头部图表移动位置  
        $('.fc-toolbar-chunk div').addClass('flag');
        $('.fc-prev-button').addClass('fc-prev-flag')
        $('.fc-toolbar-title').addClass('fc-toolbar-title-flag')

//这一段主要是为了隐藏FUllCanlendar的官网链接

        var otherComment = document.getElementsByClassName("fc-license-message");//获取到的是一个类数组
        for(var i=0;i<otherComment.length;i++){
          otherComment[i].style.display = "none";
        }

      });

  for ( MeetRoom meetRoom:rooms) {
            //通过会议申请查询会议室的使用情况
            List<MeetForm> meetForms = meetRoomCensusMapper.getMeetingByRoomAndTime(meetRoom.getId(), start, end);
            //遍历会议预约信息，将其格式化成返回数据类型
            for(MeetForm meetForm:meetForms){
                MeetRoomDataModel meetRoomDataModel = new MeetRoomDataModel();
                meetRoomDataModel.setId(meetForm.getMeetid());
                meetRoomDataModel.setTitle(meetForm.getMname());
                meetRoomDataModel.setStart(meetForm.getBegintime());
                meetRoomDataModel.setEnd(meetForm.getEndtime());
//                if(i == 0){
                    meetRoomDataModel.setColor("#F08080");
//                }else{
//                    if(i%2 == 0){
//                        meetRoomDataModel.setColor("#F08080");
//                    }else{
//                        meetRoomDataModel.setColor("#6495ED");
//                    }
//                }
                meetRoomDataModel.setTextColor("white");
                meetRoomDataModel.setResourceId(meetRoom.getId());
                meetRoomDataModels.add(meetRoomDataModel);
                i++;
            }
        }
        PageResult pageResult = new PageResult();
        pageResult.setCode("200");
        pageResult.setData(meetRoomDataModels);
        return pageResult;

就这吧，撤了。