Headers are inaccurate during month changes

[tyler-dane]

Prerequisites

• [ ] Using an up-to-date main branch

Expected Behavior

When on a week that spans multiple months, the label heading label should display both months in the following format: 'ShortenedMonth 1 - ShortenedMonth 2 YYYY'

• For example: "Jun - Jul 2024"

When the week spans multiple years (Dec-Jan), the label should change to: 'Dec YYYY - Jan YYYY'

Current Behavior

• Notice: It says "December 2023", when the current day is actually January 2024, which is misleading for people like me who forget what year it is

• Notice: The header is '9.29 - 5', when it should be '9.29-10.5'

Steps to Reproduce

1. Hard-code the today value to in useToday.ts to 2024-01-04: const today = dayjs("2024-01-04");

2. Notice: Month label is December 2023. It should be 'Dec 23 - Jan 24'

3. Repeat process for other month changes (eg set today to 2024-02-01)

Possible Solution (Not obligatory)

• Compare the month's of start and end of view date objects
• When they're different, use the new format

Context

• Required: Please write unit tests to confirm the new label logic works as expected

[tyler-dane]

@AzharAhmed-bot is working on this one

[tyler-dane]

Moving this back to 'Todo' due to inactivity -- consider this up-for-grabs for anyone else interested!