jQWidgets Forums

jQuery UI Widgets Forums Scheduler Can't scroll after switching from a fixed view

This topic contains 7 replies, has 3 voices, and was last updated by  Peter Stoev 8 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • Tachines
    Participant

    I have 4 views: Day, Week, Month, Agenda. On my tablet, Month view is not scrollable because content can be fit in the screen without scrolling. However, if I then switch to another view which I have to scroll to see all content, the screen is frozen, doesn’t accept any gesture.


    Stanislav
    Participant

    Hello Tachines,

    We couldn’t simulate the problem you are having. We could be able to help if you send us an example of the problem.

    Best Regards,
    Stanislav

    jQWidgets Team
    http://www.jqwidgets.com/


    Tachines
    Participant

    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


    Peter Stoev
    Keymaster

    We reproduced the reported behavior. Thank you for the feedback. Our team has a work item about this.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Tachines
    Participant

    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.


    Peter Stoev
    Keymaster

    simulator.js is not required for mobile. You may download again jQWidgets.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    Tachines
    Participant

    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?


    Peter Stoev
    Keymaster

    Hi Tachines,

    In HTML, height of BODY tag is “auto”. So when you put inside the BODY a DIV tag with HEIGHT=”100%”, what will be the computed height of the BODY tag? It will be 0. I suggest you to look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-fluid-size.htm?metro. And again, you do not need simulator.js.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.