无论如何要改变周视图中的天数显示方式?我宁愿按天查看通风口的垂直列表,而不是每天的水平表格视图。推理是在移动设备和任何具有小宽度屏幕的设备上看起来很糟糕......
如果这样做的唯一方法是通过修改底层代码,那么代码在哪里为 Week 视图创建表格内容?如果我知道那在哪里,我可能会修改它以显示为列表而不是表格......
无论如何要改变周视图中的天数显示方式?我宁愿按天查看通风口的垂直列表,而不是每天的水平表格视图。推理是在移动设备和任何具有小宽度屏幕的设备上看起来很糟糕......
如果这样做的唯一方法是通过修改底层代码,那么代码在哪里为 Week 视图创建表格内容?如果我知道那在哪里,我可能会修改它以显示为列表而不是表格......
更新:我扩展了以下内容并提出了一个更好的解决方案,每天都有标签。
这是一个更新的小提琴示例: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 代码并使用它来制作您自己的视图,以便您可以根据需要进行其他修改(并且仍然可以访问基本周视图)。
我想对我的日历做同样的事情。在移动屏幕上,水平布局不是很实用。使用当前版本的 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"> </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>');
}
},