Feature #25820
closedBug #25126: VPAT Initial Report
Update Event Organiser's fullCalendar JS from v2.2.7 to v7.1.1
0%
Description
The impetus for upgrading Event Organiser's fullCalendar JS library from v2.2.7 to v7.1.1 is to ensure that the event calendar no longer uses nested table markup. See VPAT instance ID 510228-02 for the accessibility audit's findings.
Just going to quote what I wrote in https://redmine.gc.cuny.edu/issues/25126#note-4:
The new version of fullCalendar doesn't actually use table markup. It uses a series of nested <div> containers with aria roles emulating a table set up -- grid / rowgroup / row / etc. See https://github.com/fullcalendar/fullcalendar/issues/6641#issuecomment-2579096269. I did try doing an initial pass at upgrading fullCalendar and modifying portions of Event Organiser's frontend.js file locally, but while I got bits and pieces working, we would need to ensure all functionality from bp-event-organiser and our custom mods are working correctly.
I'm going to walk back the latter sentence from that quote :)
For the Commons usage of Event Organiser, the main issue I encountered is the Campus filter not working correctly on the sitewide events calendar view. On production, this is located at https://commons.gc.cuny.edu/events/?view=calendar. It doesn't look like the Campus filter is working in calendar view based on this part of the JS code: https://github.com/cuny-academic-commons/cac/blame/f892c9950d621354f4c940357a4e4488b070233c/wp-content/themes/bp-nelo/assets/js/events-directory.js#L69-L71.
The other major change is the look and feel. On production, here is an example of a group events calendar: https://commons.gc.cuny.edu/groups/gis-working-group/events/calendar/. v7.1.1 uses a different styling system. I will attach a screenshot of fullCalendar 7.1.1 with the Monarch theme in a BuddyPress group. I haven't matched up the styling to resemble production's look and feel yet. I also had to refactor the "Go to" button. The new version uses the browser's native datepicker instead of jQuery UI's datepicker.
On the JS side, fullCalendar's API has drastically changed. I've only addressed the elements of fullCalendar that we use on the Commons. If we wanted to send a PR upstream to event-organiser eventually, then we would need to fix a bunch of things relating to fullCalendar's custom buttons (category, tag, venue, organiser), and perhaps to bp-event-organiser's custom filters (group, author). We currently do not use any of these buttons or filters on the Commons, so I haven't worked on adding back support for these items.
I think once we get the new version of fullCalendar to resemble the look and feel of our current production version and also fixing the Campus filter on the sitewide event calendar, that we should be good to go, but Boone, let me know if I am missing anything.
Files
Updated by Raymond Hoh 22 days ago
Boone, I've pushed the fullCalendar JS change to the try/event-organiser-fullcalendar branch.
The changes to EO's frontend.js can be found here: https://github.com/cuny-academic-commons/cac/blob/b81e99107e137cc5bee52b0351cab95d84f8b19d/wp-content/themes/bp-nelo/assets/js/event-organiser-frontend.js#L93-L724.
I've also attached a screenshot of what a group events calendar looks like with the upgraded fullCalendar JS version for those that are interested in checking out the change.
Updated by Boone Gorges 12 days ago
Ray, thanks so much for looking into this. I made some changes to make the appearance match the legacy calendar more closely (it's not exact but it's close). And I fixed the implementation bug that was preventing the 'campus' filter from working - it had to do with the fact that the old implementation used WP's JS addFilter, but in the new fullCalendar version, the WP hooks library was loading too late for our callback to take effect in time.
You want to have a look to see if the functionality looks OK on your end?
Updated by Raymond Hoh 9 days ago
The new changes to fix the Campus filter and to match the appearance to the production version of the event calendar are looking good, Boone.
Do you think we're good to roll this out to production for the VPAT audit?
Updated by Boone Gorges 8 days ago
- Status changed from New to Staged for Production Release
- Target version set to 2.7.14
Thanks for the check, Ray. Yes, I think we're good to roll this out. I've merged it to the 2.7.x branch and it'll be part of the next maintenance release.
Updated by Boone Gorges 1 day ago
- Status changed from Staged for Production Release to Resolved