Implement calendar context menu with event creation modal

- Add CalendarContextMenu component for right-click on calendar days
- Add CreateEventModal component with comprehensive event creation form
- Integrate context menu detection to avoid conflicts between event/calendar menus
- Add form validation and date/time selection with all-day toggle
- Connect modal through component hierarchy from app to calendar

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-28 22:20:22 -04:00
parent 7e62e3b7e3
commit 5c966b2571
6 changed files with 480 additions and 3 deletions

View File

@@ -20,6 +20,8 @@ pub struct RouteHandlerProps {
pub on_login: Callback<String>,
#[prop_or_default]
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)>>,
}
#[function_component(RouteHandler)]
@@ -28,6 +30,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
let user_info = props.user_info.clone();
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();
html! {
<Switch<Route> render={move |route| {
@@ -35,6 +38,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
let user_info = user_info.clone();
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();
match route {
Route::Home => {
@@ -57,6 +61,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
<CalendarView
user_info={user_info}
on_event_context_menu={on_event_context_menu}
on_calendar_context_menu={on_calendar_context_menu}
/>
}
} else {
@@ -73,6 +78,8 @@ pub struct CalendarViewProps {
pub user_info: Option<UserInfo>,
#[prop_or_default]
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)>>,
}
use gloo_storage::{LocalStorage, Storage};
@@ -230,6 +237,7 @@ pub fn calendar_view(props: &CalendarViewProps) -> Html {
refreshing_event_uid={(*refreshing_event).clone()}
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()}
/>
</div>
}
@@ -241,6 +249,7 @@ pub fn calendar_view(props: &CalendarViewProps) -> Html {
refreshing_event_uid={(*refreshing_event).clone()}
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()}
/>
}
}