jQuery UI Widgets › Forums › Scheduler › MonthView entries do not show on iPad
Tagged: javascript scheduler, jquery scheduler, scheduler
This topic contains 7 replies, has 3 voices, and was last updated by ghenne 6 years, 5 months ago.
-
Author
-
Try the following link: https://www.nsbasic.com/i/Scheduler
If you run it on the Desktop in Chrome or Safari, you will see a monthView with 4 appointments.
If you run it on an iPad, no appointments appear in monthView. They do show up in dayView, weekView and agendaView.
Your bug or mine?
Thanks for the feedback.They should show as the View is adaptive. We do not know what’s wrong here as if you open: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/defaultfunctionality.htm?material it looks ok. Could you share the initialization details? One thing I noticed that the width and height and not set in percentages in your code i.e it’s not adaptive to the screen if you omit these.
Regards,
PeterI tried using percentages – but it did not make a difference. I simplified the code: here is the complete page.
<!DOCTYPE HTML> <html manifest="OfflineApp.appcache"> <head> <meta charset="utf-8"> <title>Scheduler</title> <script src="nsb/library/jquery3.js"></script> <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"> <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css" rel="stylesheet"> <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdate.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.api.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdatetimeinput.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxcalendar.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxtooltip.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxwindow.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxradiobutton.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxinput.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script> </head> <body> <div id="Form1" style="position:absolute; height: 100vh; top:0px; left:0px; width:100%; "> <div id='Scheduler1'></div> </div> <script> window.addEventListener('load', function() { $('#Scheduler1').jqxScheduler({theme:'classic', width:'80%', height:'90%',view:'monthView', views: ["dayView","weekView","monthView","agendaView"], showLegend:true,legendPosition:'bottom',legendHeight:34,showToolbar:true,dayNameFormat:'shortest',editDialogDateTimeFormatString:'dd.MM.yyyy hh:mm'}); StartScheduler(); }, false); function StartScheduler() { $("#Scheduler1").jqxScheduler({ editDialogCreate: function (dialog, fields, editAppointment) { fields.repeatContainer.hide(); fields.statusContainer.hide(); fields.timeZoneContainer.hide(); fields.colorContainer.hide(); fields.subjectLabel.html("Title"); fields.locationLabel.hide(); fields.location.hide(); fields.fromLabel.html("Von"); fields.toLabel.html("Bis"); fields.resourceLabel.html("calender"); }, appointmentDataFields: { from: "Start", to: "End", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calender" }, views: [ 'dayView', 'weekView', 'monthView', 'agendaView' ] }); appointments = []; appointments[0] = {id: "id1" , description: "Desc: ID 1a" , place: "ID 1" , subject: "Meet ID 1i" , calender: "Room 1" , Start: new Date("02/24/2016 09:00:00"), End: new Date("02/24/2016 09:00:00") }; appointments[1] = {id: "id2" , description: "Desc: ID 2" , place: "ID 2" , subject: "Meet ID 2" , calender: "Room 2" , Start: new Date("02/23/2016 09:00:00"), End: new Date("02/23/2016 09:00:00") }; appointments[2] = {id: "id3" , description: "Desc: ID 3" , place: "ID 3" , subject: "Meet ID 3" , calender: "Room 3" , Start: new Date("02/22/2016 09:00:00"), End: new Date("02/23/2016 17:00:00")}; source = {dataType: "array" , dataFields: [ { name: "id" , type: "string" }, { name: "description" , type: "string" }, { name: "location" , type: "string" }, { name: "subject" , type: "string" }, { name: "calender" , type: "string" }, { name: "Start" , type: "date" }, { name: "End" , type: "date" } ], id: "id" ,localData: appointments}; adapter = new $.jqx.dataAdapter(source); $("#Scheduler1").jqxScheduler({source: adapter}); datum1 = new $.jqx.date(2016,2,25,9,0,0); $("#Scheduler1").jqxScheduler({Date: datum1}); $("#Scheduler1").jqxScheduler("ensureAppointmentVisible" , "id3"); } </script> </body> </html>
I think I have isolated the problem. It works fine with jquery-1.12.4.min.js, but not with the current jQuery. Here’s a simplified standalone page which has the problem. Change the version back to the old jQuery and it will work.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Scheduler</title> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"> <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css" rel="stylesheet"> <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdate.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.api.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdatetimeinput.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxcalendar.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxtooltip.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxwindow.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxradiobutton.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/jqxinput.js"></script> <script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script> </head> <body> <div id='Scheduler1'></div> <script> appointments = []; var appointment1 = { id: "id1", description: "George brings projector for presentations.", location: "", subject: "Quarterly Project Review Meeting", calendar: "Room 1", start: new Date(2017, 10, 23, 9, 0, 0), end: new Date(2017, 10, 23, 16, 0, 0) } var appointment2 = { id: "id2", description: "", location: "", subject: "IT Group Mtg.", calendar: "Room 2", start: new Date(2017, 10, 24, 10, 0, 0), end: new Date(2017, 10, 24, 15, 0, 0) } var appointment3 = { id: "id3", description: "", location: "", subject: "Course Social Media", calendar: "Room 3", start: new Date(2017, 10, 27, 11, 0, 0), end: new Date(2017, 10, 27, 13, 0, 0) } appointments = [appointment1, appointment2, appointment3]; source = { dataType: "array" , dataFields: [ { name: "id" , type: "string" }, { name: "description" , type: "string" }, { name: "location" , type: "string" }, { name: "subject" , type: "string" }, { name: "calender" , type: "string" }, { name: "Start" , type: "date" }, { name: "End" , type: "date" } ], id: "id" , localData: appointments }; adapter = new $.jqx.dataAdapter(source); window.addEventListener('load', function() { $('#Scheduler1').jqxScheduler({ date: new $.jqx.date(2017, 11, 23), width:600, height:600, view: 'weekView', views: ["dayView","weekView","monthView"], showLegend:true, appointmentDataFields: { from: "Start", to: "End", id: "id", description: "description", location: "place", subject: "subject", resourceId: "calender", }, source: adapter, }); $("#Scheduler1").jqxScheduler("ensureAppointmentVisible" , "id3"); }, false); </script> </body> </html>
Hi ghenne,
Thanks for the feedback. We will check this behavior. Another way to resolve that is by removing the reference to jQuery. It is no longer necessary.
Regards,
PeterWe need jQuery for the rest of the project, so removing it isn’t an option for us.
Hi ghenne,
Within 2 weeks we will have a release. This issue will be resolved.
Thanks for the valuable feedback again and congrats for your work with NSBasic.
Regards,
PeterThank you – much appreciated. Your controls work well with NSB/AppStudio!
-
AuthorPosts
You must be logged in to reply to this topic.