FullCalendar更改周视图到垂直列表而不是水平表列

Question

无论如何要改变周视图中的Days显示方式？我宁愿在白天看到通风口的垂直列表，而不是日期的水平表视图。推理在移动设备和任何宽屏幕设备上看起来都很糟糕......

如果执行此操作的唯一方法是通过修改底层代码，代码中的哪些位置会为Week视图创建表内容？如果我弄清楚它在哪里，我可能会修改它以显示为列表而不是表格...

Answer 1

更新：我扩展了下面的内容，并提出了一个更好的解决方案，每天都有标签。

这是一个更新的示例小提琴：http://jsfiddle.net/nomatteus/dVGN2/3/

---

以下是我在行动中回答的链接：http://jsfiddle.net/nomatteus/VSXSB/2/

如果不修改源代码，就无法做到这一点。但是，您可以进行简单的编辑以垂直显示日期。在BasicWeekView.js文件中，更改

renderBasic(1, colCnt, false);

到

renderBasic(colCnt, 1, false);

作为参考，renderBasic函数参数为rowCount，colCount，showNumbers。

我建议复制BasicWeekView代码并使用它来创建自己的视图，这样你就可以根据需要进行其他修改（并且仍然可以访问基本的周视图）。

Answer 2

我想用我的日历做同样的事情。在移动屏幕上，水平布局不是很有用。使用当前版本的FullCalendar（2.1.1），我能够创建一个看起来不太合适的垂直布局：

这样做：

更改 fullcalendar.js 文件，方法是在“BasicWeekView”的代码下方添加：

/* A week view with simple day cells running vertically
--------------------------------------------------------------------------*/

fcViews.vertWeek = VertWeekView; // register this view

function VertWeekView(calendar) {
    BasicView.call(this, calendar); // call the super-constructor
}

VertWeekView.prototype = createObject(BasicView.prototype); 
$.extend(VertWeekView.prototype, {
    name: 'vertWeek',

    incrementDate: function(date, delta) {
        return date.clone().stripTime().add(delta, 'weeks').startOf('week');
    },

    render: function(date) {
        this.intervalStart = date.clone().stripTime().startOf('week');
        this.intervalEnd = this.intervalStart.clone().add(1, 'weeks');

        this.start = this.skipHiddenDays(this.intervalStart);
        this.end = this.skipHiddenDays(this.intervalEnd, -1, true);

        this.title = this.calendar.formatRange(
            this.start,
            this.end.clone().subtract(1), // make inclusive by subtracting 1 ms
            this.opt('titleFormat'),
            ' \u2014 ' // emphasized dash
        );

        BasicView.prototype.render.call(this, this.getCellsPerWeek(), 1,  true); 
    }
});
;;

将此 CSS 添加到您的网页：

.fc-vertweek-header {
    overflow: hidden;
    width: 100%;
}
.fc-vertweek-day {
    float: right; 
    margin: 10px;
}

现在，在您对<{1}}的 javascript 中，请注明以下两项内容：

fullCalendar

和：

defaultView: vertWeek,