fullcalendar change columns to row

there is a way to change the display of fullcalendar to show the days (Sunday, Monday,...) in the vertical axis and the time in the horizontal axis, I have to show that way to my clie开发者_开发百科nt.

Regards.-

There is no designated way to do that. But you can do it yourself.

Fullcalendar view is shown as table with the following structure:

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

As you can see there is a row for each weak, and a cell for each day.

You have 2 options to accomplish what you want:

1. Modify the plugin source. The view is rendered in BasicView.js. Just change the lines 140 and below and "substitute" td <-> tr.

2. Write some extra code to reorder the elements. Write a small and simple script which gets called as soon as the calendar is inserted into DOM. The script has to rebuild your table in the order you like.

Jarno Kurlin has forked a horizontal Fullcalendar view for resource management:

https://github.com/jarnokurlin/fullcalendar

Based on this old link: http://tux.fi/~jarnok/fullcalendar-resourceviews/

It does not show time detail on the horizontal axis, but you may be able to more easily tweak this to get it to match your requirements.

Override the eventRender method, and you can make FullCalendar events appear in almost any way you choose. The question How to adjust width and position of events in jQuery Full Calendar in week-view and day view addressed a similar issue.

The eventRender method is described in their API here: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

In case you need it, you can also use their eventAfterRender method: 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
   }
});