On mobile phones non of the views is usable, as the display is small. Moreover, these phones are mostly used in portrait mode. A view would be needed, which displays days below each other (DayListView). We are using currently this code, which solves the problem, however we have to edit fullcalendar.js for that:
setDefaults({
fixedWeekCount: true
});
fcViews.dayListView = DayListView; // register the view
function DayListView(calendar) {
BasicView.call(this, calendar); // call the super-constructor
}
DayListView.prototype = createObject(BasicView.prototype); // define the super-class
$.extend(DayListView.prototype, {
name: 'dayListView',
incrementDate: function(date, delta) {
return date.clone().stripTime().add(delta, 'weeks').startOf('week');
},
render: function(date) {
this.weekNumbersVisible = false;
var rowCnt;
this.intervalStart = date.clone().stripTime().startOf('week');
this.intervalEnd = this.intervalStart.clone().add(1, 'week');
this.start = this.intervalStart.clone();
this.end = this.intervalEnd.clone();
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, 7, 1, true); // call the super-method
},
// Overrides the default BasicView behavior to have special multi-week auto-height logic
setGridHeight: function(height, isAuto) {
isAuto = isAuto || this.opt('weekMode') === 'variable'; // LEGACY: weekMode is deprecated
// if auto, make the height of each row the height that it would be if there were 6 weeks
if (isAuto) {
height *= this.rowCnt / 6;
}
distributeHeight(this.dayGrid.rowEls, height, !isAuto); // if auto, don't compensate for height-hogging rows
},
isFixedWeeks: function() {
var weekMode = this.opt('weekMode'); // LEGACY: weekMode is deprecated
if (weekMode) {
return weekMode === 'fixed'; // if any other type of weekMode, assume NOT fixed
}
return this.opt('fixedWeekCount');
},
headIntroHtml: function() {
return '';
},
numberCellHtml: function(row, col, date) {
var classes;
if (!this.dayNumbersVisible) { // if there are week numbers but not day numbers
return '<td/>'; // will create an empty space above events :(
}
classes = this.dayGrid.getDayClasses(date);
classes.unshift('fc-day-number');
return '' +
'<td class="' + classes.join(' ') + '" data-date="' + date.format() + '">' +
date.format("dddd, MMMM Do YYYY");
//date.date();
'</td>';
},
renderHtml: function() {
return '' +
'<table>' +
'<tbody>' +
'<tr>' +
'<td class="' + this.widgetContentClass + '">' +
'<div class="fc-day-grid-container">' +
'<div class="fc-day-grid"/>' +
'</div>' +
'</td>' +
'</tr>' +
'</tbody>' +
'</table>';
},
});
Mergedinto: 724