fullcalendar-scheduler时间轴视图的简单使用

在最近的开发中,需要制作任务的时间视图,所以就用到了fullcalendar-scheduler时间轴视图,在此记录一下fullcalendar-scheduler时间轴视图的简单使用

以下使用的js和css都是从fullcalendar的官网引入的,想要离线使用可以自行下载官网,话不多说直接上代码,复制下来直接可用,里面有注释


<html lang='en'>
<head>
    <meta charset='utf-8' />
    <link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'>script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'>script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'>script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'>script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.min.js'>script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
          var calendarEl = document.getElementById('calendar');
          var calendar = new FullCalendar.Calendar(calendarEl, {
              //设置产品密钥不设置左下角会出现链接
              schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
              //'interaction':拖动事件
              plugins: [ 'interaction','resourceTimeline' ],
              //设置utc时间格式
              timeZone: 'UTC',
           //设置默认显示年resourceTimelineDay,月resourceTimelineWeek,日resourceTimelineMonth
              defaultView: 'resourceTimelineMonth',
              //设置中文
              locale:'zh-cn',
              //设置日历高度
              height:500,
              //设置初始年月
              //defaultDate: '2019-06-12',
              editable: true,
              //切换年月按钮
              header: {
                  //左边按钮
                  left: 'prev,next',
                  center: 'title',
                  //控制年月日
                 right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
              },
              eventClick(calEvent, jsEvent, view){
                   alert("点击日程触发");
                 console.log(calEvent);
              },
              resourceLabelText: '计划',
    
              resources: [
                  {
                      id: "a",
                      title: "计划 A"
                  },
                  {
                      id: "b",
                      title: "计划 B",
                      eventColor: "green"
                  },
                  {
                      id: "c",
                      title: "计划 C",
                      eventColor: "orange"
                  },
                  {
                      id: "d",
                      title: "计划 D",
                      children: [
                          {
                              id: "d1",
                              title: "计划 D1"
                          },
                          {
                              id: "d2",
                              title: "计划 D2"
                          }
                      ]
                  },
              ],
              events: [{
                  //设置resources对应的id
                  resourceId: "a",
                  title:'15号-20号',
                  //设置开始时间
                  start:"2019-12-15",
                  //结束时间
                  end:"2019-12-20",
                  //颜色
                  color:"#409EFF",
              },{
                  resourceId: "b",
                  title:'15号-20号',
                  start:"2019-12-15",
                  end:"2019-12-20",
                  color:"#A9A9A9",
              }],
          });
          calendar.render();
      });
    script>
head>
<body>
<div id='calendar'>div>
body>
html>

这是页面效果,有点丑,小弟也是刚刚接触,如有错误请及时指正

fullcalendar-scheduler时间轴视图的简单使用_第1张图片

你可能感兴趣的:(fullcalendar-scheduler时间轴视图的简单使用)