fullcalendar изменить столбцы в строку

Question

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

С уважением .-

Answer 1

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

https://github.com/jarnokurlin/fullcalendar

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

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

Answer 2

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

Представление полного календаря отображается в виде таблицы со следующей структурой:

<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 варианта, чтобы выполнить то, что вы хотите:

1. Изменить источник плагина. Представление отображается в BasicView.js . Просто измените строки 140 и ниже и «подставьте» td <-> tr.

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

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