[Bug] No switching from day view to week view on resize

[lukasz-fi]

Context (REQUIRED):

• Browser: Chrome
• Browserversion: 120.0.6099.199
• Qalendar Version: v3.7.0

Describe the bug (REQUIRED)

On web browser resize the calendar doesn't switch back to week mode after it once has switched to day mode.

To Reproduce

Steps to reproduce the behavior:

1. Set the calendar to week mode (per defaultMode)
2. Resize the web browser to 700px (or less) width, so that it switches to day view mode.
3. Resize the web browser above 700px width.

Expected behavior

After the resize the calendar should switch back to week mode.

[abdul737]

I guess it's because of design considerations, since the week mode won't look good on smaller screens

[lukasz-fi]

That has nothing to do with small screens/resolutions, the issue exists on regular screens. Resize web browser to a small window (below 700px) and resize it back to e.g. 4000px it is still in day view mode. This issue is especially problematic if the calendar is inside a container that has a transition, because then the calendar starts in day view mode and gets stuck in it even after the transition finishes. Example: Put the calendar in a v-tab (Vuetify).

[abdul737]

@lukasz-fi Sorry I misunderstood you

[Bl00D4NGEL]

The issue seems to be that while the check for "is small screen" does work and is ran on window resize this.mode is only overwritten to day whenever the this.mode is neither day or month. Therefore once a calendar is considered to be in "day mode" because the screen size is small the resizing listener will not go from day or month mode to week mode.

The "easiest" fix would be to switch from day to week mode once the screen is big enough, however this could be irritating for a user if they intentionally selected the day mode on a bigger screen and resize from "big enough" to "small enough" to "big enough".

A better approach would be to keep track of whether the user changed their mode manually. If the user did not manually change the mode we should be "safe" to change the mode from day to week. If the user did change the mode manually we should not do anything. This could be achieved by removing the resize event listener when the mode is set via handleChangeMode and rewriting the mode setting logic from just

if (this.isSmall && !['day', 'month'].includes(this.mode)) {
  this.mode = 'day';
}

to something like

if (this.isSmall) {
  if (!['day', 'month'].includes(this.mode)) {
    this.mode = 'day';
  }
} else {
  if (!['week', 'month'].includes(this.mode)) {
    this.mode = 'week';
  }
}

@tomosterlund I'd be willing to attempt to submit a PR with a fix for this if you would point me in the right direction (or validate that either of my approaches would work).

[tomosterlund]

Hi. Since week is the default view this would make sense.

I'd be open to have a look at a PR with this change. My guess is you've actually coded the full solution here in your last comment already. Additionally, but optionally I'd say, you could write a unit test for this in tests/unit/components/Qalendar.test.ts