fullcalendar 将列更改为行答案

【问题标题】：fullcalendar change columns to rowfullcalendar 将列更改为行
【发布时间】：2011-09-01 15:12:16
【问题描述】：

有一种方法可以更改 fullcalendar 的显示以在垂直轴上显示天数（星期日、星期一、...），在水平轴上显示时间，我必须以这种方式向我的客户显示。

问候。-

【问题讨论】：

我也很想实现这个。
您可能需要创建自己的视图，因为它现在不在源代码中。（这里的源代码：github.com/arshaw/fullcalendar）
你的 11 票是从哪里来的？你没有在你的话题中说什么

标签： jquery jquery-plugins fullcalendar

【解决方案1】：

没有指定的方法来做到这一点。但是你可以自己做。

全日历视图显示为具有以下结构的表格：

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

如您所见，每个弱者对应一行，每天一个单元格。

你有两个选择来完成你想要的：

修改插件源。视图在BasicView.js 中呈现。只需更改第 140 行及以下并“替换” td tr.
编写一些额外的代码来重新排序元素。编写一个小而简单的脚本，一旦将日历插入 DOM，就会调用该脚本。该脚本必须按照您喜欢的顺序重建您的表格。

【讨论】：

你的第一个选项对我不起作用..你能帮我做第二个选项吗..@k_wave

【解决方案2】：

Jarno Kurlin 为资源管理分叉了一个水平的 Fullcalendar 视图：

https://github.com/jarnokurlin/fullcalendar

基于这个旧链接： http://tux.fi/~jarnok/fullcalendar-resourceviews/

它不会在水平轴上显示时间细节，但您可以更轻松地对其进行调整以使其符合您的要求。

【讨论】：

【解决方案3】：

覆盖eventRender 方法，您可以让FullCalendar 事件以您选择的几乎任何方式出现。问题How to adjust width and position of events in jQuery Full Calendar in week-view and day view 解决了类似的问题。

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

【讨论】：