2

无论如何要改变周视图中的天数显示方式？我宁愿按天查看通风口的垂直列表，而不是每天的水平表格视图。推理是在移动设备和任何具有小宽度屏幕的设备上看起来很糟糕......

如果这样做的唯一方法是通过修改底层代码，那么代码在哪里为 Week 视图创建表格内容？如果我知道那在哪里，我可能会修改它以显示为列表而不是表格......

4

2 回答 2

2

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

这是一个更新的小提琴示例：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 代码并使用它来制作您自己的视图，以便您可以根据需要进行其他修改（并且仍然可以访问基本周视图）。

于 2013-10-08T15:51:53.693 回答
1

我想对我的日历做同样的事情。在移动屏幕上，水平布局不是很实用。使用当前版本的 FullCalendar (2.1.1)，我能够创建一个看起来还不错的垂直布局：

日历

做这个：

通过在“BasicWeekView”的代码下方添加以下内容来更改fullcalendar.js文件：

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

现在在您的javascript调用中fullCalendar指定这两件事：

defaultView: vertWeek,

和 ：

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

        // 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>');
    }
},
于 2014-10-29T20:44:56.837 回答