fullcalendar zmień kolumny na wiersze

Question

jest sposób na zmianę wyświetlania fullcalendar, aby pokazać dni (niedziela, poniedziałek, ...) w osi pionowej i czas w osi poziomej, muszę pokazać w ten sposób mój klient.

Pozdrowienia.-

Answer 1

Nie ma wyznaczonego sposobu na zrobienie tego. Ale możesz to zrobić sam.

widok Fullcalendar przedstawiono w tabeli w następującym układzie:

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

Jak widać, znajduje się wiersz dla każdej słaby i komórki dla każdego dnia.

Masz 2 opcje, aby osiągnąć to, co chcesz:

1. zmodyfikować źródło wtyczki. Widok jest renderowany w BasicView.js. Wystarczy zmienić linie 140 i poniżej i "zastąpić" td < -> tr.

2. Napisz kilka dodatkowych kodów, aby zmienić kolejność elementów. Napisz mały i prosty skrypt, który zostanie wywołany, gdy tylko kalendarz zostanie wstawiony do DOM. Skrypt musi przebudować twój stół w wybranej przez ciebie kolejności.

Answer 2

Jarno Kurlin ma rozwidlony poziomą Fullcalendar widok dla zarządzania zasobami:

https://github.com/jarnokurlin/fullcalendar

Bazując na tym starym linkiem: http://tux.fi/~jarnok/fullcalendar-resourceviews/

nie pokazuje szczegół czas na osi poziomej , ale możesz łatwiej je poprawić, aby dopasować je do swoich wymagań.

Answer 3

Zastąp metodę eventRender, a wydarzenia w programie FullCalendar można wyświetlać niemal w dowolny sposób. Pytanie o adres: How to adjust width and position of events in jQuery Full Calendar in week-view and day view dotyczy podobnego problemu.

eventRender Metoda jest opisana w ich API tutaj: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

W przypadku, gdy jest to potrzebne, można również wykorzystać swoją metodę 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 
    } 
});