project: Moodle
summary: Calendar usability improvements for 4.0 - MVP
description: Collection of tasks to meet the MVP related to the calendar UI improvements project for 4.0

1.summary: Review and fix accessibility issues on calendar month block
description: The focus outline on the calendar block is using the style thats for normal links. It may be worth making it circular. See ^focus-outline.png and ^focus-outline-2.png. On the mobile view, users cannot create new events by tapping on the days. This is a more serious issue for screen-reader users as they cannot click on a blank area that is around each number but is still inside the numbers cell. See ^video_2021-10-25_15-12-36.mp4. On the mini-blocks, the events popover is activated by focus as well as hover. It may be worth changing the calendar block to act like that.
2.summary: Convert the calendar footer buttons to links
description: We currently have two buttons on the calendar footer Export calendar and Manage subscriptions. This improvement is about changing those to two links. !footer-links.png|thumbnail! Link to prototype|
3.summary: Add footer links to the calendar block
description: Current UI: Theres no link between the small calendar block and the main calendar, only if the user has events on a given day, then its possible to navigate to the day view. Proposed improvement: Add two links in the footer -Go to calendar-"Full calendar" and -Calendar subscriptions- "Manage subscriptions" !calendar block footer links.png|thumbnail! Link to prototype|
4.summary: Make it easier to copy the export url
description: Current behaviour: When the user is exporting the calendar and click "Get calendar URL" button, the url is displayed on the footer of the page. Proposed change: Enclose the export URL in a field and implement the "Copy URL" button as per prototype !calendar export url.png|thumbnail! Link to prototype| Must have: Enclose the calendar URL in a text box Could have: Implement the copy URL button. _+Note:+_ If the "Copy URL" button will be implemented, we should not use document.execCommand()| because its a deprecated feature. The Clipboard API| might be useful.
5.summary: Revamp the manage subscriptions page
description: Proposed improvements: Improve the look and make the manage subscription page more user friendly as per prototype. Without subscriptions !manage subscriptions.png|thumbnail! With subscriptions !with subscriptions .png|thumbnail! Link to prototype| Tasks: Update the looks of the manage subscriptions page based on the prototype Update blank state appearance (e.g. no subscriptions yet) Update subscriptions table to based on the prototype. Add "Export calendar" button which links to the export calendar page/form. Add the "Import calendar" button which links to the import calendar page/form. Remove the "Import calendar" form from the manage subscriptions page.
6.summary: Move the import calendar form to its own page
description: Proposed improvement Move the "Import calendar" form in the Manage subscriptions page to its own page to make the Manage subscriptions page look simpler. The original improvement proposal was to move this form into a modal but it would take more time. Moving this form to its own page would be simpler and would also allow for consistent behaviour with the Export calendar page which has its own page. Link to prototype| !import calendar.png|thumbnail! _Note:_ Might be better to convert the "Calendar subscriptions" button to a link instead of a button since it basically links back to the calendar subscriptions page.
7.summary: Render the calendar in the calendar block in month view
description: Proposed improvement: Render the calendar in the calendar block in month view instead of the mini-calendar view. This will make the calendar responsive and provide more useful information when rendered in a larger block region (e.g. the main region in the Dashboard). We need to make sure that the calendars month view works seamlessly when rendered in the calendar block. Things to consider: Decouple the calendar JS and functionalities from the calendar page so the large calendar month view will work seamlessly even when rendered in a block. It must support the whole functionality that is supported now: - Creating / updating events - Course filter - Month navigation & reloading - Loading events When multiple calendar block instances are rendered there should be no duplicate element IDs. Prototype: !calendar block full month view.png|thumbnail! Link to prototype|
8.summary: Remove icons on events
description: Remove the icon beside the event names in the month view of the calendar to match the prototype (action events included). This also needs to be applied to the events key fake block on the calendar page. Prototype screenshot: !calendar - no icons.png|thumbnail!
9.summary: Add a new blank state template for calendar subscriptions
description: Proposed improvement: Display a blank state page when there are no subscriptions created yet as per prototype. Link to prototype|
10.summary: Add a current date indicator and make calendar block responsive when switching between small and large views
description: Displaying the calendar in full month view in , we need to make sure that when the block is resized to a smaller size, (e.g. on the block region), the calendar shows a simplified view that does not include each individual event. The scope of this issue is to also correct some size-specific issues (things that effect large or small version of the calendar). Below are lists of requirements for the smaller (block) and larger (block and/or main calendar) views, explaining the differences that should appear in each: . Requirements - to be added for both large and small calendar/block Show a circle over the date of the current day (and include a "today" title for screen reader accessibility). This should appear similar to the one implemented by Apples calendar app: !MDL-58579_Test 3 Step 13-15.png|thumbnail! The colour of the circle should be: Background colour: a new variable that is initialised with $primary; Test color: a new variable that is initialised with $white; . Requirements - small calendar block Remove individual event listings and use a dot below the date to indicate there is at least one event on a date - see Apple design above. Days of the week, dates and the dots should all be centre aligned. Hovering over dates should be reflected using a very light grey version of the circle used for "today". This is similar to the hover effect used by Ubuntu: !MDL-58579_Test 4 Step 10-11.png|thumbnail! Hovering over the dates should also display the list of individual events in a popover. We will not implement a background colour on dates with events. These changes will not be applied to the monthly view calendars shown on the right of the main calendar page. This is considered out of scope, and given 3 months are shown, adding extra height for event "dots" may extend the height of those too much on the page. . Requirements - large calendar (block and/or calendar page as appropriate) Days of the week along the top of the calendar should be left aligned, so they are aligned with the dates in the same column. Remove grey horizontal divider between the bottom of the calendar and export/manage links. If possible, still retain this on the small calendar (but if not feasible, just remove for both). There appears to be some padding to the side of the calendar in this view (eg all of the content along the left is indented from the block title), this should be updated to be flush (align). On the calendar page, a similar issue should be fixed so the export calendar link aligns with the left edge of the calendar. Reduce the box shadow when hovering over the date cells, by using a lighter grey so the effect is less heavy. There appears to have been a bug introduced, where hovering over one event in a day will show the hover effect (link underline) on all events within that date. Hovering on an event should be corrected so it only have this effect on the relevant individual event. Below are a couple of older prototype screenshots for reference. Note they are from before all of the above were decided, but do show a similar "today" date indicator to the one listed above: !MDL-58579_Test 4 Step 13.png|thumbnail! Link to prototype|
11.summary: Improve help information provided on the calendar export page
description: We have this "How do I subscribe to this calendar from a calendar application (Google/Outlook/Other)?" link to the documentation site in the export calendar page which has been dropped in the prototype mockups. It was discussed that it may need to be retained or an alternative approach be taken to make it easier for users to know what to do with the exported calendar events via the calendar URL/export file (.ics file). Hopefully, we can decide what to do about this issue. Current options: Leave it as it is Remove it Lets try a different approach
12.summary: Minor calendar updates to match prototypes
description: A couple of small updates are required to update the calendar project to match the prototype: The "Please provide either a URL to a remote calendar, or upload a file." text on the import calendar page needs to be removed. The "required fields" explanation at the bottom of the form also needs to be looked at as it does not match the prototype. On the export calendar page, add a link back to the "manage subscriptions" page, consistent with the prototype and import calendar page (eg in the breadcrumbs). Remove the "calendar subscriptions" link at the bottom of the import page - it was decided in the project chat that it is not required (the breadcrumbs are sufficient). Its also not implemented on the export calendar page for the same reason.
13.summary: Write project specification document
description: Create a centralised spec doc which pulls together all of the relevant project information for easy reference.
14.summary: Limit number of events shown per day in calendar month view
description: So that we dont have an infinite list of calendar events making long lists and taking up a lot of space, we need to compress events in the month view so they take up less vertical space, and also limit how many we are showing to users. . Requirements On the calendar page and "bigger" calendar block view, this involves: Reducing the vertical spacing between events (this appears to be achievable by setting the relevant CSS to line height 1, instead of its currently inherited 1.5). Limiting the list of events in any date to 5 items. If more than 5 items exist in a day, display the first 4 and add text below indicating how many more exist. For example, if there are 6 events, show 4 and have text reading "2 more". The "x more" text should be bold and displayed as a link, linking to the day view for the relevant date. A mockup of how the above could look: !calendar-list-compressed.jpg|thumbnail! Discussed with michaelh , this ticket is going to only apply the limit to the main calendar in main region, no changes to calendars in the blocks. -In the "smaller" calendar block view, this involves:- -Limiting the popover list of a days events to 5 items.- -If more than 5 items exist in a day, display the first 4 in the popover, and add bold text below those with "x more" as above. If possible, those should link to the day calendar, though I believe there is an open bug relating to links not working here, if thats the case just include the text in bold (black). If possible in future, we can look at adding a link if necessary.- -In all calendar blocks/main calendar:- -Ensure all days are dis-played with the same height (rather than different rows being different if they have more events), and set an appropriate maximum height (taking into account other points above).-
15.summary: Update page title and links relating to Manage Subscriptions page
description: We have an existing page called "Manage Subscriptions" (_/calendar/managesubscriptions.php_), which previously only handled importing (subscribing to) calendars. With the latest calendar project, that is no longer true, as the page now has content relating to both the importing/subscribing to calendars, as well as exporting them. It has therefore been decided that the following changes should be made, to avoid link duplication and confusion around the pages purpose: Update the _managesubscriptions_ +calendar+ language string so its text is replaced with "Import / export calendars". Remove the "Export calendar" link from below the main calendar (and the dot after it), so that only the link with the new text from 1 is shown. Update the "Your Subscriptions" heading / language string to be "Imported calendars", and set it as the aria-described by attribute for the table. Update any behat tests that are affected by the above changes. To be safe, the filename (managesubscriptions.php) should remain the same (also for backwards compatibility).
16.summary: Remove 3-month calendar view
description: EDIT: Original Moodle 4 ideas for the calendar were to only feature a single calendar and not have the 3 month view at all. Over time the project scope changed a bit, but we can stick to the original principles of de-cluttering and reducing cognitive load. Hence, Ive updated this issue to be about the removal of the 3-month view from the calendar page. -The "Monthly view" fake calendar block seen when viewing the full calendar has not been updated wih the same styling as all other calendars.- -This _must_ be updated too.- -For the sake of clarity, Im talking about this:- !72810 - 3 month view.png|thumbnail!
17.summary: Links in course calendar block should navigate to "full calendar" version and not course specific
description: Currently, the "Full calendar" and "Import or export calendars" links include the course ID so that the relevant page is loaded in the course context. To simplify calendar usage and make it consistent, those links should be updated to not include the course ID, so they load the "full" version of the relevant page, not in the course context.
18.summary: Remove event type key/filter links on the course calendar block
description: The course calendar block does not require the various event type keys/filters below the calendar, so these should be removed (so it will look similar to the "mini" dashboard calendar block). Its worth mentioning that the colour coding from that is meaningless in the block (it does not use the colours), and I do not think the hide functionality works at all, so there doesnt seem to be any reason to retain this feature (its also not necessary anywhere except the large, full calendar). !-to-remove.png|thumbnail!

Below is an instruction that describes a task, paired with an input that provides an epic with this format: 
"project": "Name of the project" 
"summary": "Summary of the epic user story" 
"description": "Description of the epic user story". Write a response that appropriately completes the request.### Instruction:
Break this epic user story into smaller tasks to help the developers understand the epic better, you can divide this epic into as much as you want depending on the complexity of the epic.
### Input:
project: Moodle
summary: Calendar usability improvements for 4.0 - MVP
description: Collection of tasks to meet the MVP related to the calendar UI improvements project for 4.0

### Response:
1.summary: Review and fix accessibility issues on calendar month block
description: The focus outline on the calendar block is using the style thats for normal links. It may be worth making it circular. See ^focus-outline.png and ^focus-outline-2.png. On the mobile view, users cannot create new events by tapping on the days. This is a more serious issue for screen-reader users as they cannot click on a blank area that is around each number but is still inside the numbers cell. See ^video_2021-10-25_15-12-36.mp4. On the mini-blocks, the events popover is activated by focus as well as hover. It may be worth changing the calendar block to act like that.
2.summary: Convert the calendar footer buttons to links
description: We currently have two buttons on the calendar footer Export calendar and Manage subscriptions. This improvement is about changing those to two links. !footer-links.png|thumbnail! Link to prototype|
3.summary: Add footer links to the calendar block
description: Current UI: Theres no link between the small calendar block and the main calendar, only if the user has events on a given day, then its possible to navigate to the day view. Proposed improvement: Add two links in the footer -Go to calendar-"Full calendar" and -Calendar subscriptions- "Manage subscriptions" !calendar block footer links.png|thumbnail! Link to prototype|
4.summary: Make it easier to copy the export url
description: Current behaviour: When the user is exporting the calendar and click "Get calendar URL" button, the url is displayed on the footer of the page. Proposed change: Enclose the export URL in a field and implement the "Copy URL" button as per prototype !calendar export url.png|thumbnail! Link to prototype| Must have: Enclose the calendar URL in a text box Could have: Implement the copy URL button. _+Note:+_ If the "Copy URL" button will be implemented, we should not use document.execCommand()| because its a deprecated feature. The Clipboard API| might be useful.
5.summary: Revamp the manage subscriptions page
description: Proposed improvements: Improve the look and make the manage subscription page more user friendly as per prototype. Without subscriptions !manage subscriptions.png|thumbnail! With subscriptions !with subscriptions .png|thumbnail! Link to prototype| Tasks: Update the looks of the manage subscriptions page based on the prototype Update blank state appearance (e.g. no subscriptions yet) Update subscriptions table to based on the prototype. Add "Export calendar" button which links to the export calendar page/form. Add the "Import calendar" button which links to the import calendar page/form. Remove the "Import calendar" form from the manage subscriptions page.
6.summary: Move the import calendar form to its own page
description: Proposed improvement Move the "Import calendar" form in the Manage subscriptions page to its own page to make the Manage subscriptions page look simpler. The original improvement proposal was to move this form into a modal but it would take more time. Moving this form to its own page would be simpler and would also allow for consistent behaviour with the Export calendar page which has its own page. Link to prototype| !import calendar.png|thumbnail! _Note:_ Might be better to convert the "Calendar subscriptions" button to a link instead of a button since it basically links back to the calendar subscriptions page.
7.summary: Render the calendar in the calendar block in month view
description: Proposed improvement: Render the calendar in the calendar block in month view instead of the mini-calendar view. This will make the calendar responsive and provide more useful information when rendered in a larger block region (e.g. the main region in the Dashboard). We need to make sure that the calendars month view works seamlessly when rendered in the calendar block. Things to consider: Decouple the calendar JS and functionalities from the calendar page so the large calendar month view will work seamlessly even when rendered in a block. It must support the whole functionality that is supported now: - Creating / updating events - Course filter - Month navigation & reloading - Loading events When multiple calendar block instances are rendered there should be no duplicate element IDs. Prototype: !calendar block full month view.png|thumbnail! Link to prototype|
8.summary: Remove icons on events
description: Remove the icon beside the event names in the month view of the calendar to match the prototype (action events included). This also needs to be applied to the events key fake block on the calendar page. Prototype screenshot: !calendar - no icons.png|thumbnail!
9.summary: Add a new blank state template for calendar subscriptions
description: Proposed improvement: Display a blank state page when there are no subscriptions created yet as per prototype. Link to prototype|
10.summary: Add a current date indicator and make calendar block responsive when switching between small and large views
description: Displaying the calendar in full month view in , we need to make sure that when the block is resized to a smaller size, (e.g. on the block region), the calendar shows a simplified view that does not include each individual event. The scope of this issue is to also correct some size-specific issues (things that effect large or small version of the calendar). Below are lists of requirements for the smaller (block) and larger (block and/or main calendar) views, explaining the differences that should appear in each: . Requirements - to be added for both large and small calendar/block Show a circle over the date of the current day (and include a "today" title for screen reader accessibility). This should appear similar to the one implemented by Apples calendar app: !MDL-58579_Test 3 Step 13-15.png|thumbnail! The colour of the circle should be: Background colour: a new variable that is initialised with $primary; Test color: a new variable that is initialised with $white; . Requirements - small calendar block Remove individual event listings and use a dot below the date to indicate there is at least one event on a date - see Apple design above. Days of the week, dates and the dots should all be centre aligned. Hovering over dates should be reflected using a very light grey version of the circle used for "today". This is similar to the hover effect used by Ubuntu: !MDL-58579_Test 4 Step 10-11.png|thumbnail! Hovering over the dates should also display the list of individual events in a popover. We will not implement a background colour on dates with events. These changes will not be applied to the monthly view calendars shown on the right of the main calendar page. This is considered out of scope, and given 3 months are shown, adding extra height for event "dots" may extend the height of those too much on the page. . Requirements - large calendar (block and/or calendar page as appropriate) Days of the week along the top of the calendar should be left aligned, so they are aligned with the dates in the same column. Remove grey horizontal divider between the bottom of the calendar and export/manage links. If possible, still retain this on the small calendar (but if not feasible, just remove for both). There appears to be some padding to the side of the calendar in this view (eg all of the content along the left is indented from the block title), this should be updated to be flush (align). On the calendar page, a similar issue should be fixed so the export calendar link aligns with the left edge of the calendar. Reduce the box shadow when hovering over the date cells, by using a lighter grey so the effect is less heavy. There appears to have been a bug introduced, where hovering over one event in a day will show the hover effect (link underline) on all events within that date. Hovering on an event should be corrected so it only have this effect on the relevant individual event. Below are a couple of older prototype screenshots for reference. Note they are from before all of the above were decided, but do show a similar "today" date indicator to the one listed above: !MDL-58579_Test 4 Step 13.png|thumbnail! Link to prototype|
11.summary: Improve help information provided on the calendar export page
description: We have this "How do I subscribe to this calendar from a calendar application (Google/Outlook/Other)?" link to the documentation site in the export calendar page which has been dropped in the prototype mockups. It was discussed that it may need to be retained or an alternative approach be taken to make it easier for users to know what to do with the exported calendar events via the calendar URL/export file (.ics file). Hopefully, we can decide what to do about this issue. Current options: Leave it as it is Remove it Lets try a different approach
12.summary: Minor calendar updates to match prototypes
description: A couple of small updates are required to update the calendar project to match the prototype: The "Please provide either a URL to a remote calendar, or upload a file." text on the import calendar page needs to be removed. The "required fields" explanation at the bottom of the form also needs to be looked at as it does not match the prototype. On the export calendar page, add a link back to the "manage subscriptions" page, consistent with the prototype and import calendar page (eg in the breadcrumbs). Remove the "calendar subscriptions" link at the bottom of the import page - it was decided in the project chat that it is not required (the breadcrumbs are sufficient). Its also not implemented on the export calendar page for the same reason.
13.summary: Write project specification document
description: Create a centralised spec doc which pulls together all of the relevant project information for easy reference.
14.summary: Limit number of events shown per day in calendar month view
description: So that we dont have an infinite list of calendar events making long lists and taking up a lot of space, we need to compress events in the month view so they take up less vertical space, and also limit how many we are showing to users. . Requirements On the calendar page and "bigger" calendar block view, this involves: Reducing the vertical spacing between events (this appears to be achievable by setting the relevant CSS to line height 1, instead of its currently inherited 1.5). Limiting the list of events in any date to 5 items. If more than 5 items exist in a day, display the first 4 and add text below indicating how many more exist. For example, if there are 6 events, show 4 and have text reading "2 more". The "x more" text should be bold and displayed as a link, linking to the day view for the relevant date. A mockup of how the above could look: !calendar-list-compressed.jpg|thumbnail! Discussed with michaelh , this ticket is going to only apply the limit to the main calendar in main region, no changes to calendars in the blocks. -In the "smaller" calendar block view, this involves:- -Limiting the popover list of a days events to 5 items.- -If more than 5 items exist in a day, display the first 4 in the popover, and add bold text below those with "x more" as above. If possible, those should link to the day calendar, though I believe there is an open bug relating to links not working here, if thats the case just include the text in bold (black). If possible in future, we can look at adding a link if necessary.- -In all calendar blocks/main calendar:- -Ensure all days are dis-played with the same height (rather than different rows being different if they have more events), and set an appropriate maximum height (taking into account other points above).-
15.summary: Update page title and links relating to Manage Subscriptions page
description: We have an existing page called "Manage Subscriptions" (_/calendar/managesubscriptions.php_), which previously only handled importing (subscribing to) calendars. With the latest calendar project, that is no longer true, as the page now has content relating to both the importing/subscribing to calendars, as well as exporting them. It has therefore been decided that the following changes should be made, to avoid link duplication and confusion around the pages purpose: Update the _managesubscriptions_ +calendar+ language string so its text is replaced with "Import / export calendars". Remove the "Export calendar" link from below the main calendar (and the dot after it), so that only the link with the new text from 1 is shown. Update the "Your Subscriptions" heading / language string to be "Imported calendars", and set it as the aria-described by attribute for the table. Update any behat tests that are affected by the above changes. To be safe, the filename (managesubscriptions.php) should remain the same (also for backwards compatibility).
16.summary: Remove 3-month calendar view
description: EDIT: Original Moodle 4 ideas for the calendar were to only feature a single calendar and not have the 3 month view at all. Over time the project scope changed a bit, but we can stick to the original principles of de-cluttering and reducing cognitive load. Hence, Ive updated this issue to be about the removal of the 3-month view from the calendar page. -The "Monthly view" fake calendar block seen when viewing the full calendar has not been updated wih the same styling as all other calendars.- -This _must_ be updated too.- -For the sake of clarity, Im talking about this:- !72810 - 3 month view.png|thumbnail!
17.summary: Links in course calendar block should navigate to "full calendar" version and not course specific
description: Currently, the "Full calendar" and "Import or export calendars" links include the course ID so that the relevant page is loaded in the course context. To simplify calendar usage and make it consistent, those links should be updated to not include the course ID, so they load the "full" version of the relevant page, not in the course context.
18.summary: Remove event type key/filter links on the course calendar block
description: The course calendar block does not require the various event type keys/filters below the calendar, so these should be removed (so it will look similar to the "mini" dashboard calendar block). Its worth mentioning that the colour coding from that is meaningless in the block (it does not use the colours), and I do not think the hide functionality works at all, so there doesnt seem to be any reason to retain this feature (its also not necessary anywhere except the large, full calendar). !-to-remove.png|thumbnail!
