jQWidgets Forums
jQuery UI Widgets › Forums › Scheduler › Can't scroll after switching from a fixed view
Tagged: scroll view scheduler
This topic contains 7 replies, has 3 voices, and was last updated by Peter Stoev 8 years, 1 month ago.
-
Author
-
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.
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,
StanislavjQWidgets Team
http://www.jqwidgets.com/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,
TacWe reproduced the reported behavior. Thank you for the feedback. Our team has a work item about this.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comIs 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.
simulator.js is not required for mobile. You may download again jQWidgets.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comWell, 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?
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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.