全日历-垂直资源，水平天数 [英] Fullcalendar - Vertical resources, horizontal days

问题描述

我想知道，是否可以通过以下格式用Fullcalendar创建日历:

I would like to know, if there is any way to create a calendar with Fullcalendar in such format:

               Resource A   Resource B   Resource C

Apr. 26

Apr. 27

Apr. 28

Apr. 29

时间轴视图与此相似，但不完全是我所需要的.拥有可以管理此类事件的日历非常重要.

The timeline view is similar to that, but not exactly what I need. It's very important to have a calendar that could manage events like this.

提前谢谢！

推荐答案

是.这是一种解决方法.尝试这样声明一个自定义视图:

Yes. This is a workaround. Try to declare a custom view like this:

$(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

这篇关于全日历-垂直资源，水平天数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！