calendar, add planning view for mobiles#173
Merged
mitch10593 merged 2 commits intomainfrom Mar 12, 2026
Merged
Conversation
Contributor
Reviewer's GuideImplements a mobile-friendly planning view for the calendar by using FullCalendar's list view on small screens, adds responsive CSS and layout tweaks across calendar- and event-related views, and wires in the list plugin dependency plus changelog entry. Flow diagram for calendar view selection based on device sizeflowchart TD
Start["Load CalendarView component"] --> GetWidth["Read window.innerWidth"]
GetWidth --> CheckMobile{"Is width < 640px?"}
CheckMobile -->|Yes| SetIsMobileTrue["Set isMobile = true"]
CheckMobile -->|No| SetIsMobileFalse["Set isMobile = false"]
SetIsMobileTrue --> MobileOptions["Compute calendarOptions for mobile"]
SetIsMobileFalse --> DesktopOptions["Compute calendarOptions for desktop"]
MobileOptions --> MobileInitialView["initialView = listWeek"]
MobileOptions --> MobileToolbar["headerToolbar = { left: prev,next; center: title; right: listWeek,dayGridMonth }"]
DesktopOptions --> DesktopInitialView["initialView = dayGridMonth"]
DesktopOptions --> DesktopToolbar["headerToolbar = { left: prev,next today; center: title; right: dayGridMonth,timeGridWeek,timeGridDay,listWeek }"]
MobileInitialView --> RenderCalendar["Render FullCalendar with computed options"]
DesktopInitialView --> RenderCalendar
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- The
isMobileconstant inCalendarView.vueis computed once fromwindow.innerWidthat module evaluation time, which will not react to viewport resizes and can break in SSR/test environments; consider moving this into a reactiverefinsidesetup(with aresizelistener) and guarding access towindow. - You now hardcode the
640pxbreakpoint both in Tailwind utility usage (sm:) and in custom CSS/media queries; it may be worth centralizing this breakpoint value or leveraging Tailwind’s generated classes to avoid divergence if the design system changes.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `isMobile` constant in `CalendarView.vue` is computed once from `window.innerWidth` at module evaluation time, which will not react to viewport resizes and can break in SSR/test environments; consider moving this into a reactive `ref` inside `setup` (with a `resize` listener) and guarding access to `window`.
- You now hardcode the `640px` breakpoint both in Tailwind utility usage (`sm:`) and in custom CSS/media queries; it may be worth centralizing this breakpoint value or leveraging Tailwind’s generated classes to avoid divergence if the design system changes.
## Individual Comments
### Comment 1
<location path="frontend/src/views/CalendarView.vue" line_range="42-48" />
<code_context>
}))
)
+const isMobile = window.innerWidth < 640
+
const calendarOptions = computed(() => ({
- plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
- initialView: 'dayGridMonth' as const,
+ plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+ initialView: isMobile ? 'listWeek' : 'dayGridMonth',
locale: frLocale,
- headerToolbar: {
- left: 'prev,next today',
- center: 'title',
- right: 'dayGridMonth,timeGridWeek,timeGridDay',
- },
+ headerToolbar: isMobile
+ ? { left: 'prev,next', center: 'title', right: 'listWeek,dayGridMonth' }
+ : { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' },
</code_context>
<issue_to_address>
**issue (bug_risk):** Using `window.innerWidth` at module scope and a non-reactive `isMobile` flag can cause SSR issues and prevent the calendar from adapting on resize/orientation changes.
Because `isMobile` is computed once at module load:
- SSR will fail when `window` is accessed.
- On the client, the calendar view will never update when the viewport changes (resize/rotation), so users can stay in `listWeek` or `dayGridMonth` even after crossing the `sm` breakpoint.
Consider either:
1. Making `isMobile` reactive (e.g. a `ref` updated via a `resize` listener or a shared breakpoint composable) and using that in `calendarOptions`.
2. Using FullCalendar’s `windowResize` callback or `views`/`responsive` options to switch between `listWeek` and `dayGridMonth` based on the current width.
Both avoid SSR crashes and keep the layout in sync with the viewport.
</issue_to_address>
### Comment 2
<location path="CHANGELOG.md" line_range="12" />
<code_context>
- ADDED admin - track files sizes
- ADDED login/logout notifications
- FIXED system - customer deploy stack name
+- ADDED clandar - planning view (default for mobile)
</code_context>
<issue_to_address>
**issue (typo):** Possible typo: "clandar" should likely be "calendar".
This changelog entry misspells "calendar" as "clandar"; please correct it for consistency with the Calendar view files.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
frontend/src/views/CalendarView.vue
Outdated
Comment on lines
+42
to
+48
| const isMobile = window.innerWidth < 640 | ||
|
|
||
| const calendarOptions = computed(() => ({ | ||
| plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin], | ||
| initialView: 'dayGridMonth' as const, | ||
| plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin], | ||
| initialView: isMobile ? 'listWeek' : 'dayGridMonth', | ||
| locale: frLocale, | ||
| headerToolbar: { | ||
| left: 'prev,next today', | ||
| center: 'title', | ||
| right: 'dayGridMonth,timeGridWeek,timeGridDay', | ||
| }, | ||
| headerToolbar: isMobile |
Contributor
There was a problem hiding this comment.
issue (bug_risk): Using window.innerWidth at module scope and a non-reactive isMobile flag can cause SSR issues and prevent the calendar from adapting on resize/orientation changes.
Because isMobile is computed once at module load:
- SSR will fail when
windowis accessed. - On the client, the calendar view will never update when the viewport changes (resize/rotation), so users can stay in
listWeekordayGridMontheven after crossing thesmbreakpoint.
Consider either:
- Making
isMobilereactive (e.g. arefupdated via aresizelistener or a shared breakpoint composable) and using that incalendarOptions. - Using FullCalendar’s
windowResizecallback orviews/responsiveoptions to switch betweenlistWeekanddayGridMonthbased on the current width.
Both avoid SSR crashes and keep the layout in sync with the viewport.
CHANGELOG.md
Outdated
| - ADDED admin - track files sizes | ||
| - ADDED login/logout notifications | ||
| - FIXED system - customer deploy stack name | ||
| - ADDED clandar - planning view (default for mobile) |
Contributor
There was a problem hiding this comment.
issue (typo): Possible typo: "clandar" should likely be "calendar".
This changelog entry misspells "calendar" as "clandar"; please correct it for consistency with the Calendar view files.
mitch10593
force-pushed
the
feature/112-calendar-on-mobile-needs-to-be-refactored
branch
from
92d5daf to
f2c9a04
Compare
mitch10593
deleted the
feature/112-calendar-on-mobile-needs-to-be-refactored
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
Improve calendar and event interfaces with a mobile-friendly planning view and responsive layout adjustments.
New Features:
Enhancements:
Build:
Documentation: