jQuery UI Widgets Forums Scheduler Ensure Appointment VIsible for MonthView and EnsureVisible for Date issue

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 3 years, 1 month ago.

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

  • Satch
    Participant

    Hi,

    I have two issues with the Scheduler:

    1. The ‘ensureAppointmentVisible’ doesn’t work for me in the <monthView>. It functions properly in <dayView>, and <weekView>.
    2. The ‘ensureVisible’ function doesn’t work for me to move to a specific date.
    $("#myCalendar").jqxScheduler('ensureVisible', new $.jqx.date(2017, 4, 1))
    This works fine however so I’ve been using this instead.
    $("#myCalendar").jqxScheduler({ date: new $.jqx.date(2017, 4, 1) });

    Any help would be appreciated regarding these two issues.

    Thanks,
    Satch

    (Test code demonstrating the above issues)

       <script type="text/javascript" >
           $(document).ready(function () {
    
               $("#goDateBut1").jqxButton({ width: '250', height: '25' })
                    .on('click', function () {
                        //  <ensureVisible> doesn't work
                        $("#myCalendar").jqxScheduler('ensureVisible', new $.jqx.date(2017, 4, 1));
    
                        $('#myCalendar').jqxScheduler('selectCell',  new $.jqx.date(2017, 4, 1) , true, "");
                    });
    
               $("#goDateBut2").jqxButton({ width: '150', height: '25' })
                 .on('click', function () {
                     //This works
                     $("#myCalendar").jqxScheduler({ date: new $.jqx.date(2017, 4, 1) });
    
                     $('#myCalendar').jqxScheduler('selectCell', new $.jqx.date(2017, 4, 1), true, "");
                });
    
               $("#goAptBut").jqxButton({ width: '150', height: '25' })
                    .on('click', function () {
                        //works for Day and Week view, doesn't work for month view
                        $("#myCalendar").jqxScheduler('ensureAppointmentVisible', 'apptId1');
                });
    
               var appointments = new Array();
               var appointment1 = {
                   id: "apptId1",
                   description: "My Appointment",
                   location: "Field A",
                   subject: "Fireworks",
                   calendar: "Event A",
                   start: new Date(2017, 7, 4, 9, 0, 0),
                   end: new Date(2017, 7, 4, 11, 0, 0)
               }
    
               appointments.push(appointment1);
    
               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);
    
               $("#myCalendar").jqxScheduler({
                   date: new $.jqx.date(2017, 1, 1),
    
                   source: adapter,
                   view: 'monthView',
                   showLegend: true,
    
                   resources:
                   {
                       dataField: "calendar",
                       source: new $.jqx.dataAdapter(source)
                   },
    
                   appointmentDataFields:
                   {
                       from: "start",
                       to: "end",
                       id: "id",
                       description: "description",
                       location: "place",
                       subject: "subject",
                       resourceId: "calendar"
                   },
                   views: ['dayView', 'weekView', 'monthView' ]
               });
           });
       </script>
    
        </head>
            <body>
            <div id="myCalendar"></div>
                <input type="button" value="Go Date 4/1/2017  (ensureVisible)" id='goDateBut1' />
                <input type="button" value="Go Date 4/1/2017" id='goDateBut2' /><br /><br />
                <input type="button" value="Go Appointment" id='goAptBut' />
            </body>
        </html>

    Peter Stoev
    Keymaster

    I think here is misunderstanding what ensureVisible and ensureAppointmentVisible should do. These methods only change the Scrollbar position to a date in the Current View and if there is a scrollbar. It will not navigate to a different view.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.