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

Add color picker functionality to external calendars

Browse Source 
- Enable clicking external calendar color icons to open color picker dropdown
- Implement backend API integration for updating external calendar colors
- Add conditional hover effects to prevent interference with color picker
- Use extremely high z-index (999999) to ensure dropdown appears above all elements
- Match existing CalDAV calendar color picker behavior and styling
- Support real-time color updates with immediate visual feedback
- Maintain color consistency across sidebar and calendar events

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-05 12:17:09 -04:00
parent 38b22287c7
commit 927cd7d2bb
3 changed files with 99 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/app.rs
View File

@@ -567,19 +567,60 @@ pub fn App() -> Html {
let on_color_change = {
let user_info = user_info.clone();
let external_calendars = external_calendars.clone();
let color_picker_open = color_picker_open.clone();
Callback::from(move |(calendar_path, color): (String, String)| {
if let Some(mut info) = (*user_info).clone() {
for calendar in &mut info.calendars {
if calendar.path == calendar_path {
calendar.color = color.clone();
break;
}
if calendar_path.starts_with("external_") {
// Handle external calendar color change
if let Ok(id_str) = calendar_path.strip_prefix("external_").unwrap_or("").parse::<i32>() {
let external_calendars = external_calendars.clone();
let color = color.clone();
wasm_bindgen_futures::spawn_local(async move {
// Find the external calendar to get its current details
if let Some(cal) = (*external_calendars).iter().find(|c| c.id == id_str) {
match CalendarService::update_external_calendar(
id_str,
&cal.name,
&cal.url,
&color,
cal.is_visible,
).await {
Ok(_) => {
// Update the local state
let mut updated_calendars = (*external_calendars).clone();
for calendar in &mut updated_calendars {
if calendar.id == id_str {
calendar.color = color.clone();
break;
}
}
external_calendars.set(updated_calendars);
// No need to refresh events - they will automatically pick up the new color
// from the calendar when rendered since they use the same calendar_path matching
}
Err(e) => {
web_sys::console::error_1(&format!("Failed to update external calendar color: {}", e).into());
}
}
}
});
}
user_info.set(Some(info.clone()));
} else {
// Handle CalDAV calendar color change (existing logic)
if let Some(mut info) = (*user_info).clone() {
for calendar in &mut info.calendars {
if calendar.path == calendar_path {
calendar.color = color.clone();
break;
}
}
user_info.set(Some(info.clone()));
if let Ok(json) = serde_json::to_string(&info) {
let _ = LocalStorage::set("calendar_colors", json);
if let Ok(json) = serde_json::to_string(&info) {
let _ = LocalStorage::set("calendar_colors", json);
}
}
}
color_picker_open.set(None);