Fullcalendar - 垂直资源，水平日[关闭]

Posted 2021-04-07

我想知道，如果有任何方法可以使用Fullcalendar以这种格式创建日历：

               Resource A   Resource B   Resource C

Apr. 26

Apr. 27

Apr. 28

Apr. 29

时间线视图与此类似，但不完全是我需要的。拥有一个可以管理此类事件的日历非常重要。

先感谢您！

答案

是。这是一种解决方法。尝试声明这样的自定义视图：

$(function() {

  // You should change dynamically the min/maxtime
  // settings of your custom view when switching
  // between months.
  // https://fullcalendar.io/docs/dynamic-options

  var getDaysInMonth = function() {
    var d = new Date();
    var year = d.getYear();
    var month = d.getMonth() + 1;
    return new Date(year, month, 0).getDate();
  };

  var getMonthDay = function() {
    var d = new Date();
    return d.getDate();
  };

  var getMinTime = function() {
    var days = getMonthDay() - 1;
    var time = "-" + days + ".00:00:00";
    return time;
  };

  var getMaxTime = function() {
    var days = getDaysInMonth() - getMonthDay() + 1;
    var time = days + ".00:00:00";
    return time;
  };

  $('#calendar').fullCalendar({
    defaultView: 'agendaMonth',
    groupByResource: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaMonth,listThreeDay,agendaWeek,month'
    },
    views: {
      listThreeDay: {
        type: 'list',
        duration: {
          days: 31
        }
      },
      agendaMonth: {
        type: 'agendaDay',
        minTime: getMinTime(),
        maxTime: getMaxTime(),
        slotDuration: '24:00:00',
        slotLabelFormat: [
          'MMMM YYYY', // top level of text
          'D' // lower level of text
        ],
        buttonText: 'custom agenda'
      },      
    },    
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' }
    ],
    events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
  });

});

工作演示：https://codepen.io/anon/pen/jKQvLx