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

Fix external calendar timezone conversion and styling

Browse Source 
- Add comprehensive Windows timezone support for global external calendars
  - Map Windows timezone names (e.g. "Mountain Standard Time") to IANA zones (e.g. "America/Denver")
  - Support 60+ timezone mappings across North America, Europe, Asia, Asia Pacific, Africa, South America
  - Add chrono-tz dependency for proper timezone handling
- Fix external calendar event colors by setting calendar_path for color lookup
- Add visual distinction for external calendar events with dashed borders and calendar emoji
- Update timezone parsing to extract TZID parameters from iCalendar DTSTART/DTEND properties
- Pass external calendar data through component hierarchy for color matching

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-03 19:11:57 -04:00
parent 8caa1f45ae
commit f88c238b0a
8 changed files with 544 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/app.rs
View File

@@ -328,7 +328,11 @@ pub fn App() -> Html {
let mut all_events = Vec::new();
for calendar in calendars {
if calendar.is_visible {
if let Ok(events) = CalendarService::fetch_external_calendar_events(calendar.id).await {
if let Ok(mut events) = CalendarService::fetch_external_calendar_events(calendar.id).await {
// Set calendar_path for color matching
for event in &mut events {
event.calendar_path = Some(format!("external_{}", calendar.id));
}
all_events.extend(events);
}
}
@@ -1011,7 +1015,11 @@ pub fn App() -> Html {
let mut all_events = Vec::new();
for cal in calendars {
if cal.is_visible {
if let Ok(events) = CalendarService::fetch_external_calendar_events(cal.id).await {
if let Ok(mut events) = CalendarService::fetch_external_calendar_events(cal.id).await {
// Set calendar_path for color matching
for event in &mut events {
event.calendar_path = Some(format!("external_{}", cal.id));
}
all_events.extend(events);
}
}
@@ -1039,6 +1047,7 @@ pub fn App() -> Html {
user_info={(*user_info).clone()}
on_login={on_login.clone()}
external_calendar_events={(*external_calendar_events).clone()}
external_calendars={(*external_calendars).clone()}
on_event_context_menu={Some(on_event_context_menu.clone())}
on_calendar_context_menu={Some(on_calendar_date_context_menu.clone())}
view={(*current_view).clone()}
@@ -1314,7 +1323,11 @@ pub fn App() -> Html {
let mut all_events = Vec::new();
for calendar in calendars {
if calendar.is_visible {
if let Ok(events) = CalendarService::fetch_external_calendar_events(calendar.id).await {
if let Ok(mut events) = CalendarService::fetch_external_calendar_events(calendar.id).await {
// Set calendar_path for color matching
for event in &mut events {
event.calendar_path = Some(format!("external_{}", calendar.id));
}
all_events.extend(events);
}
}

19
frontend/src/components/calendar.rs
View File

@@ -2,7 +2,7 @@ use crate::components::{
CalendarHeader, CreateEventModal, EventCreationData, EventModal, MonthView, ViewMode, WeekView,
};
use crate::models::ical::VEvent;
use crate::services::{calendar_service::UserInfo, CalendarService};
use crate::services::{calendar_service::{UserInfo, ExternalCalendar}, CalendarService};
use chrono::{Datelike, Duration, Local, NaiveDate};
use gloo_storage::{LocalStorage, Storage};
use std::collections::HashMap;
@@ -16,6 +16,8 @@ pub struct CalendarProps {
#[prop_or_default]
pub external_calendar_events: Vec<VEvent>,
#[prop_or_default]
pub external_calendars: Vec<ExternalCalendar>,
#[prop_or_default]
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, VEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, NaiveDate)>>,
@@ -148,7 +150,18 @@ pub fn Calendar(props: &CalendarProps) -> Html {
Ok(vevents) => {
// Combine regular events with external calendar events
let mut all_events = vevents;
all_events.extend(external_events);
// Mark external events as external by adding a special category
let marked_external_events: Vec<VEvent> = external_events
.into_iter()
.map(|mut event| {
// Add a special category to identify external events
event.categories.push("__EXTERNAL_CALENDAR__".to_string());
event
})
.collect();
all_events.extend(marked_external_events);
let grouped_events = CalendarService::group_events_by_date(all_events);
events.set(grouped_events);
@@ -461,6 +474,7 @@ pub fn Calendar(props: &CalendarProps) -> Html {
on_event_click={on_event_click.clone()}
refreshing_event_uid={(*refreshing_event_uid).clone()}
user_info={props.user_info.clone()}
external_calendars={props.external_calendars.clone()}
on_event_context_menu={props.on_event_context_menu.clone()}
on_calendar_context_menu={props.on_calendar_context_menu.clone()}
selected_date={Some(*selected_date)}
@@ -476,6 +490,7 @@ pub fn Calendar(props: &CalendarProps) -> Html {
on_event_click={on_event_click.clone()}
refreshing_event_uid={(*refreshing_event_uid).clone()}
user_info={props.user_info.clone()}
external_calendars={props.external_calendars.clone()}
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)}

21
frontend/src/components/month_view.rs
View File

@@ -1,5 +1,5 @@
use crate::models::ical::VEvent;
use crate::services::calendar_service::UserInfo;
use crate::services::calendar_service::{UserInfo, ExternalCalendar};
use chrono::{Datelike, NaiveDate, Weekday};
use std::collections::HashMap;
use wasm_bindgen::{prelude::*, JsCast};
@@ -17,6 +17,8 @@ pub struct MonthViewProps {
#[prop_or_default]
pub user_info: Option<UserInfo>,
#[prop_or_default]
pub external_calendars: Vec<ExternalCalendar>,
#[prop_or_default]
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, VEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, NaiveDate)>>,
@@ -85,8 +87,20 @@ pub fn month_view(props: &MonthViewProps) -> Html {
// Helper function to get calendar color for an event
let get_event_color = |event: &VEvent| -> String {
if let Some(user_info) = &props.user_info {
if let Some(calendar_path) = &event.calendar_path {
if let Some(calendar_path) = &event.calendar_path {
// Check external calendars first (path format: "external_{id}")
if calendar_path.starts_with("external_") {
if let Ok(id_str) = calendar_path.strip_prefix("external_").unwrap_or("").parse::<i32>() {
if let Some(external_calendar) = props.external_calendars
.iter()
.find(|cal| cal.id == id_str)
{
return external_calendar.color.clone();
}
}
}
// Check regular calendars
else if let Some(user_info) = &props.user_info {
if let Some(calendar) = user_info
.calendars
.iter()
@@ -194,6 +208,7 @@ pub fn month_view(props: &MonthViewProps) -> Html {
<div
class={classes!("event-box", if is_refreshing { Some("refreshing") } else { None })}
style={format!("background-color: {}", event_color)}
data-external={event.categories.contains(&"__EXTERNAL_CALENDAR__".to_string()).to_string()}
{onclick}
{oncontextmenu}
>

10
frontend/src/components/route_handler.rs
View File

@@ -1,6 +1,6 @@
use crate::components::{Login, ViewMode};
use crate::models::ical::VEvent;
use crate::services::calendar_service::UserInfo;
use crate::services::calendar_service::{UserInfo, ExternalCalendar};
use yew::prelude::*;
use yew_router::prelude::*;
@@ -22,6 +22,8 @@ pub struct RouteHandlerProps {
#[prop_or_default]
pub external_calendar_events: Vec<VEvent>,
#[prop_or_default]
pub external_calendars: Vec<ExternalCalendar>,
#[prop_or_default]
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, VEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, chrono::NaiveDate)>>,
@@ -51,6 +53,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
let user_info = props.user_info.clone();
let on_login = props.on_login.clone();
let external_calendar_events = props.external_calendar_events.clone();
let external_calendars = props.external_calendars.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();
@@ -64,6 +67,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
let user_info = user_info.clone();
let on_login = on_login.clone();
let external_calendar_events = external_calendar_events.clone();
let external_calendars = external_calendars.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();
@@ -92,6 +96,7 @@ pub fn route_handler(props: &RouteHandlerProps) -> Html {
<CalendarView
user_info={user_info}
external_calendar_events={external_calendar_events}
external_calendars={external_calendars}
on_event_context_menu={on_event_context_menu}
on_calendar_context_menu={on_calendar_context_menu}
view={view}
@@ -115,6 +120,8 @@ pub struct CalendarViewProps {
#[prop_or_default]
pub external_calendar_events: Vec<VEvent>,
#[prop_or_default]
pub external_calendars: Vec<ExternalCalendar>,
#[prop_or_default]
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, VEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, chrono::NaiveDate)>>,
@@ -147,6 +154,7 @@ pub fn calendar_view(props: &CalendarViewProps) -> Html {
<Calendar
user_info={props.user_info.clone()}
external_calendar_events={props.external_calendar_events.clone()}
external_calendars={props.external_calendars.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()}

25
frontend/src/components/week_view.rs
View File

@@ -1,6 +1,6 @@
use crate::components::{EventCreationData, RecurringEditAction, RecurringEditModal};
use crate::models::ical::VEvent;
use crate::services::calendar_service::UserInfo;
use crate::services::calendar_service::{UserInfo, ExternalCalendar};
use chrono::{Datelike, Duration, Local, NaiveDate, NaiveDateTime, NaiveTime, Timelike, Weekday};
use std::collections::HashMap;
use web_sys::MouseEvent;
@@ -17,6 +17,8 @@ pub struct WeekViewProps {
#[prop_or_default]
pub user_info: Option<UserInfo>,
#[prop_or_default]
pub external_calendars: Vec<ExternalCalendar>,
#[prop_or_default]
pub on_event_context_menu: Option<Callback<(web_sys::MouseEvent, VEvent)>>,
#[prop_or_default]
pub on_calendar_context_menu: Option<Callback<(web_sys::MouseEvent, NaiveDate)>>,
@@ -81,8 +83,20 @@ pub fn week_view(props: &WeekViewProps) -> Html {
// Helper function to get calendar color for an event
let get_event_color = |event: &VEvent| -> String {
if let Some(user_info) = &props.user_info {
if let Some(calendar_path) = &event.calendar_path {
if let Some(calendar_path) = &event.calendar_path {
// Check external calendars first (path format: "external_{id}")
if calendar_path.starts_with("external_") {
if let Ok(id_str) = calendar_path.strip_prefix("external_").unwrap_or("").parse::<i32>() {
if let Some(external_calendar) = props.external_calendars
.iter()
.find(|cal| cal.id == id_str)
{
return external_calendar.color.clone();
}
}
}
// Check regular calendars
else if let Some(user_info) = &props.user_info {
if let Some(calendar) = user_info
.calendars
.iter()
@@ -371,6 +385,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
<div
class="all-day-event"
style={format!("background-color: {}", event_color)}
data-external={event.categories.contains(&"__EXTERNAL_CALENDAR__".to_string()).to_string()}
{onclick}
{oncontextmenu}
>
@@ -905,6 +920,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
column_width
)
}
data-external={event.categories.contains(&"__EXTERNAL_CALENDAR__".to_string()).to_string()}
{onclick}
{oncontextmenu}
onmousedown={onmousedown_event}
@@ -992,6 +1008,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
<div
class="temp-event-box moving-event"
style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", preview_position, duration_pixels, event_color)}
data-external={event.categories.contains(&"__EXTERNAL_CALENDAR__".to_string()).to_string()}
>
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
{if duration_pixels > 30.0 {
@@ -1025,6 +1042,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
<div
class="temp-event-box resizing-event"
style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", new_start_pixels, new_height, event_color)}
data-external={event.categories.contains(&"__EXTERNAL_CALENDAR__".to_string()).to_string()}
>
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
{if new_height > 30.0 {
@@ -1052,6 +1070,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
<div
class="temp-event-box resizing-event"
style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", original_start_pixels, new_height, event_color)}
data-external={event.categories.contains(&"__EXTERNAL_CALENDAR__".to_string()).to_string()}
>
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
{if new_height > 30.0 {