Question

我已按照FullCalendar Change Week View to Vertical List instead of Horizontal Table Columns中的大纲来在fullcalendar中创建自定义垂直周视图。

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

这就是这样的观点：

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

然而，vertWeek视图用于小屏幕（智能手机等），因此我希望将日期标题和内容水平放置以占用更少的空间，如此屏幕截图所示： http://i.imgur.com/F4AkoSw.png

MAN 8.我喜欢手动设置样式，但TIR 9是视图呈现的方式。

我想实现这个目标：

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

我试图理解fullcalendar代码以将标题移动到与eventcontent相同的位置 - 但看起来该视图在该容器的thead和tbody的不同位置呈现。

有人能指出我如何修改代码来实现这个目标吗？

Answer 1

已实施的分享答案的帖子：

似乎我的理解是一点点不准确。标题放在包含事件的表上方的重叠表中。试图在dayRender函数中遍历DOM并放置标题，但是尚未创建事件的相应tbody。

简化插图：

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

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

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

1 个答案: