WeekCalendar design update

[devmount]

Description of the Change

This changes applies the latest design changes for the WeekCalendar component. Included:

• Blocked times (either due to user configuration or calendar event conflict) are now visually displayed as gray hatched in Bookers and Dashboard view
• The Bookers view now has a hover effect for selectable time slots
• The WeekCalendar.vue component now has an additional prop disabled to indicate, if users can select something (disabled=false, default) or not (disabled=true).
• The schedule-store.ts now has a function to calculate available time slots directly in the fronted (as equivalent to controller/calendar::available_slots_from_schedule in the backend). This was done to omit another async backend request and keep performance up.
• Additional types were introduced to handle grid items

Benefits

Alignment and consistency with designs.

Screenshots

Dashboard page:

Bookers page:

Known issues / things to improve

• Dark mode: We don't exactly have designs for dark mode, so I went with a (hopefully) reasonable default.

Related tickets

Closes #1465

[rwood-moz]

Looks good! One comment I have, and it might be a design question, but is there a reason why we are not aligning the existing appointments with the time lines? When I look at my dashboard calendar it looks like my existing appointments actually start earlier than they are actually scheduled for.

For example this appointment starts at 2pm but visually looks to me like it starts at 1:55pm maybe:

Compare the main dashboard calendar on current production where it is aligned:

Maybe this misalignment might cause our users some confusion?

Note with this PR on the bookee page we are aligning the available timeslots with the timelines which makes sense to me:

[devmount]

@rwood-moz Yes, this is indeed a question for design (@laurelterlesky, @solangevalverde). I implemented the views from Zeplin:

But maybe I misinterpreted and actually they were intended to be sharply aligned? 🤔 IMHO as a user I would be a little bit confused too 😇

[laurelterlesky]

Good catch. If the appointment starts on the hour - it should be on the line. I believe Davi did some increments of 15-min block in the code at some point. If an appointment starts at say 1:50, then it should show a bit above the line for 2pm.

Zeplin design were off a bit - they have been updated for reference.