调整 Adam Shaw 在 Fullcalendar 中的自定义视图

Question

我按照全日历中的大纲将周视图更改为垂直列表而不是水平表列，以在全日历中创建自定义垂直周视图。

实现取自此小提琴中显示的原始帖子：http://jsfiddle.net/nomatteus/dVGN2/3/

这将列出如下视图：

<table>
  <thead>
    .tr.td.headercontent....
  </thead>
  <tbody>
    .tr.td.eventcontent....
  </tbody>
</table>

但是，vertWeek 视图用于小屏幕(智能手机等(，因此我希望将日期标题和内容水平布局，以占用更少的高度空间，如以下屏幕截图所示：https://i.stack.imgur.com/qArCz.png

MAN 8. 是按照我喜欢的方式手动设置样式的，但 TIR 9 是视图渲染的方式。

我想实现这一点：

<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td> headercontent
      <td> eventcontent
    </tr>
  </tbody>
</table>

我试图理解完整的日历代码，以将标题移动到与事件内容相同的位置 - 但似乎视图呈现在该容器的 thead 和 tbody 的不同位置。

谁能指出我如何修改代码以实现此目的的正确方向？

Answer 1

实现共享答案的帖子：

似乎我的理解有点不准确。标题放置在包含事件的表上方的重叠表中。尝试遍历 DOM 并在 dayRender 函数期间放置标头，但尚未创建事件的相应正文。

简化图解：

table
  thead
    **header**
  tbody
table
  thead
  tbody (not created at dayRender, but available at eventRender)
    **event*

解决方案非常简单 - 隐藏 .fc-day-number：

dayRender: function( date, cell ) { 
    // Get the current view     
    var view = $('#meal_calendar').fullCalendar('getView');
    // Check if the view is the new vertWeek - 
    // in case you want to use different views you don't want to mess with all of them
    if (view.name == 'vertWeek') {
        // Hide the widget header - looks wierd otherwise
        $('.fc-widget-header').hide();
        // Remove the default day number with an empty space. Keeps the right height according to your font.
        //$('.fc-day-number').html('<div class="fc-vertweek-day">&nbsp;</div>');
        $('.fc-day-number').hide();
        // Create a new date string to put in place  
        var this_date = date.format('ddd, MMM Do');
        // Place the new date into the cell header. 
        cell.append('<div class="fc-vertweek-header"><div class="fc-vertweek-day">'+this_date+'</div></div>');
    }
},

此外，我在 CSS 中将 td.fc-event-container 的样式设置为如下：

td.fc-event-container {
  padding-left: 68px;
}

很可能是一个黑客 - 几个小时的研究，两行纠正。但对我有用...