JAKALA: Add Calendar display option to Views Block for Events

[nplowman]

JAKALA: Event Calendar Display Mode

Description of work

• Adds a new "Calendar" display mode to the Views block for Events.

Functional testing steps:

• Create several Event nodes for testing the View.
• Make sure that at least some of the events include Categories and Tags.
• For testing the modal functionality: Make sure that at least two of the events occur on the same date.
• For testing pager functionality: Make sure there is at least one event is on a date in month other than the current month.
• Create a Page node, and place a "View" block in the page layout.
• In the View settings, make sure to select "Events" as the content type, and then select the new "Calendar" display option.

Notes

• If there is more than a single event on a particular date, the first event will be shown on the calendar, and there will be a link that says "+1 more event". Clicking this will open a modal that shows all events on that date.
• Categories and Tags can optionally be enabled for this view. Both will be shown in the modal view, but only tags will be shown in the calendar cell.

Related Pull Requests

• YOR-11: Event Calendar Display Mode component-library-twig#424
• JAKALA: Add Calendar display option to Views Block for Events atomic#267
• This branch includes commits from JAKALA: Views block enhancements #742 and should be merged AFTER this pull request.

Known Issues to Address

• We still need to add conditional logic on the View Block edit form to hide fields that are not applicable to the calendar view, such as "Number of Items to Display".
• There is an open discussion about the best way to display "multi-day events" on the calendar view.

[github-actions]

Created multidev environment pr-753 for yalesites-platform.

[atiddei]

This looks good. I do wonder if the tags and categories are needed in this calendar view.

[nplowman]

@dblanken @kara-franco This ticket can be reviewed and merged, as long you're ok with the current behavior for Multi-day events that I described in Slack.

[nplowman]

@kara-franco @dblanken-yale Are we still able to get this pull request included in the release?

[nplowman]

FYI: Merge conflicts and code sniffer issues have been resolved.
We also pushed up a commit that improves the display of Multi-day events, to hopefully make it a little more clear when you are looking at a single event that spans multiple days vs multiple instances of an event with the same nname.

[kara-franco]

Heya! I completed the accessibility review and have the following issues that need to be addressed:

• Button text and aria-label need to match

• Add day of the week sr-only<span>

• Aria label should say close dialog instead of close modal

• Mobile: display as list (if not, we need to implement a tab pattern). In current state it is a lot of tapping and guess work to find events.

[nplowman]

@kara-franco The first three accessibility issues should be resolved now.
Updates to the mobile design should be coming next week.

[miketullo95]

hello @nplowman! I'm just catching up after returning from leave, so apologies if this has been mentioned before or is intentional. I noticed something on the pop-up that appears after clicking "X more events" on multi-event days: the header repeats the day number. For example, as shown in the screenshot: "19 September 19, 2024".

[nplowman]

@kara-franco The mobile styling has been updated and ready for review.
@miketullo95 The duplicate day issue is also fixed now.

[miketullo95]

this looks great to me! 👍

[yalesites]

🎉 This PR is included in version 1.9.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀