Fullcalendar - Vertical resources, horizontal days [closed]

问题

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.

Thank you in advance!

回答1:

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'
  });

});

Working demo: https://codepen.io/anon/pen/jKQvLx

来源：https://stackoverflow.com/questions/50213764/fullcalendar-vertical-resources-horizontal-days

标签

javascript

php

fullcalendar