MonthView entries do not show on iPad - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: javascript scheduler, jquery scheduler, scheduler

This topic contains 7 replies, has 3 voices, and was last updated by ghenne 5 years ago.

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

Author

MonthView entries do not show on iPad Posts

October 25, 2018 at 1:23 pm MonthView entries do not show on iPad #102515

ghenne

Participant

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?

October 26, 2018 at 5:28 am MonthView entries do not show on iPad #102523

Peter Stoev

Keymaster

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,
Peter

October 27, 2018 at 1:39 pm MonthView entries do not show on iPad #102539

ghenne

Participant

I 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>

November 2, 2018 at 3:23 pm MonthView entries do not show on iPad #102614

ghenne

Participant

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>

November 2, 2018 at 3:54 pm MonthView entries do not show on iPad #102616

Peter Stoev

Keymaster

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,
Peter

November 3, 2018 at 12:50 pm MonthView entries do not show on iPad #102622

ghenne

Participant

We need jQuery for the rest of the project, so removing it isn’t an option for us.

November 3, 2018 at 1:41 pm MonthView entries do not show on iPad #102627

admin

Keymaster

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,
Peter

November 4, 2018 at 6:33 pm MonthView entries do not show on iPad #102633

ghenne

Participant

Thank you – much appreciated. Your controls work well with NSB/AppStudio!

Author

Posts

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

You must be logged in to reply to this topic.