fullcalendar cambia colonne a riga

Question

c'è un modo per cambiare la visualizzazione di fullcalendar per mostrare i giorni (domenica, lunedì, ...) sull'asse verticale e il tempo sull'asse orizzontale, devo mostrare quella strada per il mio cliente.

Cordiali saluti.-

Answer 1

Non esiste un modo designato per farlo. Ma puoi farlo da solo.

vista Fullcalendar è indicata come tabella con la seguente struttura:

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

Come si può vedere che c'è una riga per ogni debole, ed una cella per ogni giorno.

hai 2 opzioni per realizzare ciò che si vuole:

1. modificare il sorgente del plugin. La vista è resa in BasicView.js. Basta cambiare le righe 140 e seguenti e "sostituire" td < -> tr.

2. Scrivere un codice aggiuntivo per riordinare gli elementi. Scrivi uno script piccolo e semplice che viene chiamato non appena il calendario viene inserito nel DOM. Lo script deve ricostruire il tuo tavolo nell'ordine che preferisci.

Answer 2

Jarno Kurlin ha biforcuta vista Fullcalendar orizzontale per la gestione delle risorse:

https://github.com/jarnokurlin/fullcalendar

Sulla base di questo vecchio link: http://tux.fi/~jarnok/fullcalendar-resourceviews/

Non mostra dettagli tempo sull'asse orizzontale , ma potresti essere in grado di modificare più facilmente questo per farlo corrispondere alle tue esigenze.

Answer 3

Ignora il metodo eventRender e puoi rendere gli eventi FullCalendar visualizzati in quasi tutti i modi che desideri. La domanda How to adjust width and position of events in jQuery Full Calendar in week-view and day view ha risolto un problema simile.

Il metodo eventRender è descritto nel loro API qui: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

In caso di necessità, è possibile anche utilizzare il loro metodo 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 
    } 
});