Fullcalendar меняет столбцы на строку

Ответ 1

Нет назначенного способа. Но вы можете сделать это сами.

Просмотр Fullcalendar отображается как таблица со следующей структурой:

<tr class="fc-week0 fc-first" style="">
  <td class="fc-sun fc-widget-content fc-day0 fc-first fc-other-month">…</td>
  <td class="fc-mon fc-widget-content fc-day1 fc-other-month">…</td>

Как вы видите, есть строка для каждого слабого и ячейка для каждого дня.

У вас есть 2 варианта, чтобы выполнить то, что вы хотите:

• Измените источник плагина. Представление отображается в BasicView.js. Просто измените строки 140 и ниже и "замените" td ↔ tr.

• Напишите дополнительный код для изменения порядка элементов. Напишите небольшой и простой script, который вызывается, как только календарь вставляется в DOM. script должен перестроить вашу таблицу в нужном вам порядке.

Ответ 2

Ярно Курлин развил горизонтальный вид Fullcalendar для управления ресурсами:

https://github.com/jarnokurlin/fullcalendar

Основываясь на этой старой ссылке: http://tux.fi/~jarnok/fullcalendar-resourceviews/

Он не показывает детали времени на горизонтальной оси, но вы можете более легко настроить его, чтобы он соответствовал вашим требованиям.

Ответ 3

Переопределите метод eventRender, и вы можете создавать события FullCalendar практически любым способом. Вопрос Как настроить ширину и положение событий в полноэкранном режиме jQuery в режиме просмотра недели и дневного просмотра рассматривал аналогичную проблему.

Метод eventRender описан в их API здесь: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

Если вам это нужно, вы также можете использовать их метод eventAfterRender: http://arshaw.com/fullcalendar/docs/event_rendering/eventAfterRender/

var $yourCalendar = $('#calendarId');
$yourCalendar.fullCalendar({
   events[//your events
   ],
   eventRender: function(event, element, view) {
    // Reposition your element here
   },
   eventAfterRender: function(event, element, view) {
    // Make minor post-rendering corrections to your element here
   }
});