My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 2373: Mobile view
1 person starred this issue and may be notified of changes. Back to list
Status:  Duplicate
Merged:  issue 724
Owner:  ----
Closed:  Nov 2014


Sign in to add a comment
 
Reported by gergely....@gmail.com, Nov 21, 2014
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>';
	},
});


DayListView.png
295 KB   View   Download
Nov 25, 2014
Project Member #1 adamrs...@gmail.com
I will lump this together with another issue dealing with touch support in general, but I will remember the specific solution you are proposing.
Status: Duplicate
Mergedinto: 724
Sign in to add a comment

Powered by Google Project Hosting