Implement drag-to-move functionality for events in week view with CalDAV server integration

- Add drag-to-move event handlers to existing events in week view
- Extend drag state management to support both create and move operations
- Implement visual feedback with event preview during drag and hidden original
- Calculate new start/end times while preserving event duration
- Add CalDAV server update integration via calendar service
- Wire event update callbacks through component hierarchy (WeekView → Calendar → RouteHandler → App)
- Preserve all original event properties (title, description, location, reminders, etc.)
- Handle timezone conversion from local to UTC for server storage
- Add error handling with user feedback and success confirmation
- Include moving event CSS styling with enhanced visual feedback

🤖 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 12:36:29 -04:00
parent e23278d71e
commit d36609d8c2
5 changed files with 325 additions and 63 deletions

View File

@@ -24,6 +24,8 @@ pub struct CalendarProps {
#[prop_or_default]
pub on_create_event_request: Option<Callback<EventCreationData>>,
#[prop_or_default]
pub on_event_update_request: Option<Callback<(CalendarEvent, chrono::NaiveDateTime, chrono::NaiveDateTime)>>,
#[prop_or_default]
pub context_menus_open: bool,
}
@@ -188,6 +190,16 @@ pub fn Calendar(props: &CalendarProps) -> Html {
show_create_modal.set(true);
})
};
// Handle drag-to-move event
let on_event_update = {
let on_event_update_request = props.on_event_update_request.clone();
Callback::from(move |(event, new_start, new_end): (CalendarEvent, chrono::NaiveDateTime, chrono::NaiveDateTime)| {
if let Some(callback) = &on_event_update_request {
callback.emit((event, new_start, new_end));
}
})
};
html! {
<div class={classes!("calendar", match props.view { ViewMode::Week => Some("week-view"), _ => None })}>
@@ -238,6 +250,7 @@ pub fn Calendar(props: &CalendarProps) -> Html {
on_event_context_menu={props.on_event_context_menu.clone()}
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
on_create_event={Some(on_create_event)}
on_event_update={Some(on_event_update)}
context_menus_open={props.context_menus_open}
time_increment={*time_increment}
/>