jQuery UI Widgets Forums Scheduler MonthView entries do not show on iPad

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • 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?

    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

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

    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.

    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

    MonthView entries do not show on iPad #102633

    ghenne
    Participant

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

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

You must be logged in to reply to this topic.