Multuiple bugs in calendar


Topic: Multuiple bugs in calendar

Lydia Rice asked 5 years ago

Expected behavior Events appearing in the Month view should appear consistently in the week and day views.

Actual behavior

Events appear correctly in the month view and the list view, but are screwed up in the Week view, and missing in the Day view (an error gets thrown in the Day view)

Resources (screenshots, code snippets etc.)

** Please note: I've supplied screen shots and the relevant code zipped up here: http://cotegauche.com/bugs/calendar-bugs.zip


I'm using things in the most trivial way out-of-the-box. The script I'm using to render the calendar is shown below (and supplied in the above-mentioned archive). If you run this (and get the same experience I'm getting, of course), then on the Month view for the week of May-10 -... May 16 you should see an entry of 2:30pm on Monday, Wednesday and Friday called "Latin", and 9:45am on Tuesday and Thursday for "Ancient Greek", and 4:40pm on Friday for Physics. This is fine on the Month view. On the Week view I'm only seeing Latin on Monday (not Wednesday or Friday), and only seeing Ancient Greek on Tuesday (not Thursday), and the Friday event for Physics has landed on top of the Tuesday event for Ancient Greek at completely the wrong time of day.

On the Day view, it throws an error (see also screen shot in zip archive):

TypeError: s is undefined fullcalendar.min.js:formatted:2868 renderFgSegEls fullcalendar.min.js:2868 jQuery 2 renderFgSegEls fullcalendar.min.js:2864 renderFgRanges fullcalendar.min.js:2806 render fullcalendar.min.js:2797 executeEventRender fullcalendar.min.js:5589 executeEventRender fullcalendar.min.js:7198 requestEventsRender fullcalendar.min.js:2422 runTask fullcalendar.min.js:5471 runRemaining fullcalendar.min.js:5403 tryStart fullcalendar.min.js:5393 resume fullcalendar.min.js:5387 stopBatchRender fullcalendar.min.js:2311 renderView fullcalendar.min.js:6071 changeView fullcalendar.min.js:5931 g fullcalendar.min.js:7851 w fullcalendar.min.js:7859 jQuery 2

and only shows the time range from midnight to 4pm. If i click away from the Day view and come back, the error persists, and now the page doesn't show any times at all. The List view works just fine.


Code (also in zip archive)

$(document).ready(function () { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay,listWeek' }, defaultDate: '2020-05-12', navLinks: true, // can click day/week names to navigate views eventLimit: true, // allow "more" link when too many events events: [{"start":"2020-05-01 14:30:00","end":"2020-05-01 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-01 16:30:00","end":"2020-05-01 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-05-04 14:30:00","end":"2020-05-04 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-05 09:45:00","end":"2020-05-05 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-06 14:30:00","end":"2020-05-06 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-07 09:45:00","end":"2020-05-07 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-08 14:30:00","end":"2020-05-08 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-08 16:30:00","end":"2020-05-08 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-05-11 14:30:00","end":"2020-05-11 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-12 09:45:00","end":"2020-05-12 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-13 14:30:00","end":"2020-05-13 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-14 09:45:00","end":"2020-05-14 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-15 14:30:00","end":"2020-05-15 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-15 16:30:00","end":"2020-05-15 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-05-18 14:30:00","end":"2020-05-18 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-19 09:45:00","end":"2020-05-19 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-20 14:30:00","end":"2020-05-20 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-21 09:45:00","end":"2020-05-21 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-22 14:30:00","end":"2020-05-22 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-22 16:30:00","end":"2020-05-22 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-05-25 14:30:00","end":"2020-05-25 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-26 09:45:00","end":"2020-05-26 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-27 14:30:00","end":"2020-05-27 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-28 09:45:00","end":"2020-05-28 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-05-29 14:30:00","end":"2020-05-29 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-05-29 16:30:00","end":"2020-05-29 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-06-01 14:30:00","end":"2020-06-01 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-02 09:45:00","end":"2020-06-02 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-03 14:30:00","end":"2020-06-03 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-04 09:45:00","end":"2020-06-04 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-05 14:30:00","end":"2020-06-05 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-05 16:30:00","end":"2020-06-05 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-06-08 14:30:00","end":"2020-06-08 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-09 09:45:00","end":"2020-06-09 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-10 14:30:00","end":"2020-06-10 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-11 09:45:00","end":"2020-06-11 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-12 14:30:00","end":"2020-06-12 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-12 16:30:00","end":"2020-06-12 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-06-15 14:30:00","end":"2020-06-15 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-16 09:45:00","end":"2020-06-16 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-17 14:30:00","end":"2020-06-17 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-18 09:45:00","end":"2020-06-18 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-19 14:30:00","end":"2020-06-19 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-19 16:30:00","end":"2020-06-19 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-06-22 14:30:00","end":"2020-06-22 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-23 09:45:00","end":"2020-06-23 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-24 14:30:00","end":"2020-06-24 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-25 09:45:00","end":"2020-06-25 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-06-26 14:30:00","end":"2020-06-26 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-26 16:30:00","end":"2020-06-26 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-06-29 14:30:00","end":"2020-06-29 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-06-30 09:45:00","end":"2020-06-30 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-07-01 14:30:00","end":"2020-07-01 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-07-02 09:45:00","end":"2020-07-02 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-07-03 14:30:00","end":"2020-07-03 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-07-03 16:30:00","end":"2020-07-03 17:15:00","title":"Physics","url":"\/class?id=11900000000028"},{"start":"2020-07-06 14:30:00","end":"2020-07-06 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-07-07 09:45:00","end":"2020-07-07 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-07-08 14:30:00","end":"2020-07-08 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-07-09 09:45:00","end":"2020-07-09 10:30:00","title":"Ancient Greek","url":"\/class?id=11900000000027"},{"start":"2020-07-10 14:30:00","end":"2020-07-10 15:15:00","title":"Latin","url":"\/class?id=11900000000025"},{"start":"2020-07-10 16:30:00","end":"2020-07-10 17:15:00","title":"Physics","url":"\/class?id=11900000000028"}] }) });

Grzegorz Bujański staff commented 5 years ago

Hi. I am trying to reproduce this error in the new full calendar plugin configuration and it works fine. I'm adding a script to the basic.html example and I can't reproduce it. I miss something?


Lydia Rice answered 5 years ago

Hi, Many thanks for the quick response. I've managed to make a small repro case that manifests the problem for you, which you can find here: http://cotegauche.com/bugs/test.html The problem is evidently caused by some incompatibility in your code with more recent versions of jquery. If you run the file as is then you should be able to manifest the problem. If you comment out line 19, which loads jquery-3.5.0.min.js, and enable line 20, which loads jquery-3.4.1.min.js (the version you bundle), then things start working. I have dependencies on features in jquery 3.5, so I'm loathe to use your older version. Perhaps you have a fixed version of the plugin in your release pipeline. I'd expect that you're tracking the tip of jquery development.

Many thanks,

Lydia.


Grzegorz Bujański staff commented 5 years ago

Now I see. Unfortunately, the full calendar plugin is compatible with jQuery version 3.4.1 and Bootstrap version 4.3.1. Note that jQuery 3.5.0 is a fresh release and it is only in the latest version of Bootstrap that it has been updated (which we must keep in mind) At the moment we do not guarantee proper operation if you decide to use jQuery in another version. We will be updating Bootstrap to the latest version (so we will also update jQuery). But I can't tell at the moment when this will happen for this plugin.


Lydia Rice answered 5 years ago

OK, many thanks for the feedback. For now, I've conditionalised my code so that I use the older jquery release in those areas of my application that will use your calendar, and the newer one elsewhere. It's a little ugly, but kinda mostly works.

Lydia.


Grzegorz Bujański staff commented 5 years ago

I'm glad you found a solution to this situation. Best, Grzegorz


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.11
  • Device: N/A
  • Browser: Firefox and Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes
Tags