connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor calendar component into modular architecture with view switching

Browse Source 
- Split monolithic Calendar component into focused sub-components:
  - CalendarHeader: Navigation buttons and title display
  - MonthView: Monthly calendar grid layout and event rendering
  - WeekView: Weekly calendar view with full-height day containers
- Add ViewMode enum for Month/Week view switching in sidebar dropdown
- Fix event styling by correcting CSS class from "event" to "event-box"
- Implement proper week view layout with full-height day containers
- Maintain all existing functionality: event handling, context menus, localStorage persistence

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-29 10:14:53 -04:00
parent 197157cecb
commit 9ab6377d16
9 changed files with 586 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/route_handler.rs
View File

@@ -1,6 +1,6 @@
use yew::prelude::*;
use yew_router::prelude::*;
use crate::components::Login;
use crate::components::{Login, ViewMode};
use crate::services::calendar_service::{UserInfo, CalendarEvent};
#[derive(Clone, Routable, PartialEq)]
@@ -22,6 +22,8 @@ pub struct RouteHandlerProps {
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, CalendarEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, chrono::NaiveDate)>>,
#[prop_or_default]
pub view: ViewMode,
}
#[function_component(RouteHandler)]
@@ -31,6 +33,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
let on_login = props.on_login.clone();
let on_event_context_menu = props.on_event_context_menu.clone();
let on_calendar_context_menu = props.on_calendar_context_menu.clone();
let view = props.view.clone();
html! {
<Switch<Route> render={move |route| {
@@ -39,6 +42,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
let on_login = on_login.clone();
let on_event_context_menu = on_event_context_menu.clone();
let on_calendar_context_menu = on_calendar_context_menu.clone();
let view = view.clone();
match route {
Route::Home => {
@@ -62,6 +66,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
user_info={user_info}
on_event_context_menu={on_event_context_menu}
on_calendar_context_menu={on_calendar_context_menu}
view={view}
/>
}
} else {
@@ -80,6 +85,8 @@ pub struct CalendarViewProps {
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, CalendarEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, chrono::NaiveDate)>>,
#[prop_or_default]
pub view: ViewMode,
}
use gloo_storage::{LocalStorage, Storage};
@@ -238,6 +245,7 @@ pub fn calendar_view(props: &CalendarViewProps) -> Html {
user_info={props.user_info.clone()}
on_event_context_menu={props.on_event_context_menu.clone()}
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
view={props.view.clone()}
/>
</div>
}
@@ -250,6 +258,7 @@ pub fn calendar_view(props: &CalendarViewProps) -> Html {
user_info={props.user_info.clone()}
on_event_context_menu={props.on_event_context_menu.clone()}
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
view={props.view.clone()}
/>
}
}