[TachinesParticipant]

Well, when I remove simulator and assign to #scheduler, I can’t set width/height to 100% in:

$("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: '100%',
                height: '100%',

Otherwise it will be a blank page. Then how can I achieve full screen on different mobile devices?

[TachinesParticipant]

Is there any walk around that I can apply?

After loading appointment list from server, I can’t scroll at all. No matter which view do I choose.

Following is my code:

var day = new Date()
var timezone = day.getTimezoneOffset();
var api = api_path + "/api/process_scheduler.php";

$(document).ready(function () {
	var theme = prepareSimulator("scheduler");
	var user_id = sessionStorage.getItem('user_id');
	
	getList();
	console.log("User id is: "+user_id);
	function getList() {
		var jsonToSend = {};
		jsonToSend["actionType"] = "listAll";
		jsonToSend["timezoneOffeset"] = timezone;
		jsonToSend["userId"] = user_id;
		var array = [];
		array.push(jsonToSend);
		$.ajax({
			type: "POST",
			dataType: "json",
			url: api, //Relative or absolute path to response.php file
			data: JSON.stringify(array),
			success: function(data) {
				console.log(data[0].results);
				
				initialScheduler(data[0].results);
				for (let value of data[0].results) {
					if (value.id.indexOf("assessment") !== -1) {
						$('#scheduler').jqxScheduler('setAppointmentProperty', value.id, 'hidden', true);
					}	
				}
			},
			error: function(errMsg) {
				console.log(errMsg);	
			}	
		});
	}
	 
	// prepare the data
	function initialScheduler(data) {
		
		var source =
		{
			dataType: "json",
			dataFields: [
				{ name: 'id', type: 'string' },
				{ name: 'about', type: 'string' },
				// { name: 'address', type: 'string' },
				{ name: 'name', type: 'string' },
				{ name: 'siteId', type: 'string' },
				{ name: 'start', type: 'date', format: "yyyy-MM-dd HH:mm" },
				{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" },
				{ name: 'readOnly', type: 'boolean'},
				{ name: 'resizable', type: 'boolean' },
				{ name: 'draggable', type: 'boolean' }
			],
			id: 'id',
			localData: data
			//url: 'scheduler_resources/appointments.json'
		};
		var adapter = new $.jqx.dataAdapter(source);
		var schedulerSettings =
		{
			date: new $.jqx.date(),
			//date: new $.jqx.date(2016, 11, 23),
			width: "100%",
			height: "100%",	
			
			source: adapter,
			showLegend: true,
			theme: theme,
			ready: function () {
				
			},
			resources:
			{
				colorScheme: "scheme05",
				dataField: "siteId",
				source: adapter
			},
			editDialogCreate: function (dialog, fields, editAppointment) {
			// hide repeat option
				fields.repeatContainer.hide();
				// hide status option
				fields.statusContainer.hide();
				// hide timeZone option
				fields.subjectContainer.hide();
				fields.timeZoneContainer.hide();
				// hide color option
				fields.colorContainer.hide();
				fields.locationContainer.hide();
				resourceContainer = fields.resourceContainer;
				fields.resourceLabel.html("Facility");
				fields.resourceContainer.insertBefore(fields.fromContainer);
			},
			appointmentDataFields:
			{
				from: "start",
				to: "end",
				id: "id",
				description: "about",
				// location: "address",
				subject: "name",
				resourceId: "siteId",
				readOnly: "readOnly",
				resizable: "resizable",
				draggable: "draggable"
			   
			},
			view: 'agendaView',
			views:
			[
				{ type: "dayView", showWeekends: true, showWorkTime: false },
				{ type: "weekView", showWorkTime: false },
				{ type: "monthView", showWeekends: true },
				"agendaView"
				
			]
		}
		
		initSimulator("scheduler", schedulerSettings);
		
	}
	$('#scheduler').on('viewChange', function (event) {
		var args = event.args;
		var newViewType = args.newViewType;
		console.log(newViewType);
		var appointments = $('#scheduler').jqxScheduler('getAppointments');
		if (newViewType != "agendaView") {
			for (let value of appointments) {
			if (value.id.indexOf("assessment") !== -1) {
				$('#scheduler').jqxScheduler('setAppointmentProperty', value.id, 'hidden', false);
			}
		}
		} else {
			for (let value of appointments) {
			if (value.id.indexOf("assessment") !== -1) {
				$('#scheduler').jqxScheduler('setAppointmentProperty', value.id, 'hidden', true);
			}
		}
		}
	});
	
	$('#scheduler').on('appointmentChange', function (event) { 
		var args = event.args;
		var appointment = args.appointment;
		var jsonToSend = appointment.originalData;
		$('#scheduler').jqxScheduler('setAppointmentProperty', jsonToSend["id"], 'subject', jsonToSend["siteId"]);
		jsonToSend["timezoneOffeset"] = timezone;
		jsonToSend["actionType"] = "edit";
		jsonToSend["userId"] = user_id;
		var array = [];
		array.push(jsonToSend);
		sendJson(array);
	});
	$('#scheduler').on('appointmentAdd', function (event) { 
		var args = event.args;
		var appointment = args.appointment;
		var jsonToSend = appointment.originalData;
		$('#scheduler').jqxScheduler('setAppointmentProperty', jsonToSend["id"], 'subject', jsonToSend["siteId"]);
		jsonToSend["name"]=jsonToSend["siteId"];
		jsonToSend["timezoneOffeset"] = timezone;
		jsonToSend["userId"] = user_id;
		jsonToSend["actionType"] = "add";
		console.log(JSON.stringify(jsonToSend));
		var array = [];
		array.push(jsonToSend);
		sendJson(array);
	});
	$('#scheduler').on('appointmentDelete', function (event) {
		var args = event.args;
		var appointment = args.appointment; 
		var jsonToSend = {};
		jsonToSend["actionType"] = "delete";
		jsonToSend["userId"] = user_id;
		jsonToSend["id"] = appointment.originalData.id;
		var array = [];
		array.push(jsonToSend);
		sendJson(array);
	});
	
	
	

function sendJson(sendData) {
$.ajax({
type: “POST”,
dataType: “json”,
url: api, //Relative or absolute path to response.php file
data: JSON.stringify(sendData),
success: function(data) {
console.log(data);
},
error: function(errMsg) {
console.log(errMsg);
}
});

}
});

var schedulerApp = angular.module(‘schedulerApp’, []);
schedulerApp.controller(‘schedulerCtrl’, [‘$scope’, function($scope) {
var user_role = sessionStorage.getItem(‘role’);
$scope.user_role = user_role;
$scope.logout = function() {
sessionStorage.clear();
window.location.href = ‘login.html’;
}

}]);

I use simulator.js alone with above code to provide mobile version. But all views are frozen and not scrollable.

[TachinesParticipant]

Hi Stanislav,

Thank you for your reply. I think you can refer to the mobile demo officially provided for scheduler. Open it in Chrome and choose an arbitrary mobile device. It will display week view first and at this time, you mouse can scroll the view properly. Then you choose month view, which is a fixed view. After that you switch back to week view and use your mouse to scroll, it won’t work. Only if you switch to day view, the gesture comes back. Namely, each time when switch from month view to view, gesture will be disabled.

This is the original code of mobile demo, I didn’t change anything:
$(document).ready(function () {
var theme = prepareSimulator(“scheduler”);

var appointments = new Array();

var appointment1 = {
id: “id1”,
description: “George brings projector for presentations.”,
location: “”,
subject: “Quarterly Project Review Meeting”,
calendar: “Room 1”,
start: new Date(2015, 10, 23, 9, 0, 0),
end: new Date(2015, 10, 23, 16, 0, 0)
}

var appointment2 = {
id: “id2”,
description: “”,
location: “”,
subject: “IT Group Mtg.”,
calendar: “Room 2”,
start: new Date(2015, 10, 24, 10, 0, 0),
end: new Date(2015, 10, 24, 15, 0, 0)
}

var appointment3 = {
id: “id3”,
description: “”,
location: “”,
subject: “Course Social Media”,
calendar: “Room 3”,
start: new Date(2015, 10, 27, 11, 0, 0),
end: new Date(2015, 10, 27, 13, 0, 0)
}

var appointment4 = {
id: “id4”,
description: “”,
location: “”,
subject: “New Projects Planning”,
calendar: “Room 2”,
start: new Date(2015, 10, 23, 16, 0, 0),
end: new Date(2015, 10, 23, 18, 0, 0)
}

var appointment5 = {
id: “id5”,
description: “”,
location: “”,
subject: “Interview with James”,
calendar: “Room 1”,
start: new Date(2015, 10, 25, 15, 0, 0),
end: new Date(2015, 10, 25, 17, 0, 0)
}

var appointment6 = {
id: “id6”,
description: “”,
location: “”,
subject: “Interview with Nancy”,
calendar: “Room 4”,
start: new Date(2015, 10, 26, 14, 0, 0),
end: new Date(2015, 10, 26, 16, 0, 0)
}
appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);

// prepare the data
var source =
{
dataType: “array”,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ }
],
id: ‘id’,
localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
var schedulerSettings =
{
date: new $.jqx.date(2015, 11, 23),
width: ‘100%’,
height: ‘100%’,
source: adapter,
view: ‘weekView’,
showLegend: true,
theme: theme,
ready: function () {
$(“#scheduler”).jqxScheduler(‘ensureAppointmentVisible’, ‘id1’);
},
resources:
{
colorScheme: “scheme05”,
dataField: “calendar”,
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: “start”,
to: “end”,
id: “id”,
description: “description”,
location: “place”,
subject: “subject”,
resourceId: “calendar”
},
views:
[
{ type: “dayView”, showWeekends: false, timeRuler: { hidden: false } },
{ type: “weekView”, showWeekends: false, timeRuler: { hidden: false } },
{ type: “monthView”, showWeekends: false }
]
}

initSimulator(“scheduler”, schedulerSettings);
});

Cheers,
Tac

[Author]

Posts