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 {

326
frontend/styles.css
View File

@@ -3745,3 +3745,329 @@ body {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==================== EXTERNAL CALENDARS STYLES ==================== */
/* External Calendar Section in Sidebar */
.external-calendar-list {
margin-bottom: 2rem;
}
.external-calendar-list h3 {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-left: 0.5rem;
}
.external-calendar-items {
list-style: none;
margin: 0;
padding: 0;
}
.external-calendar-item {
margin-bottom: 0.5rem;
}
.external-calendar-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.external-calendar-info:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateX(2px);
}
.external-calendar-info input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.external-calendar-color {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.external-calendar-name {
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
font-weight: 500;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.external-calendar-indicator {
font-size: 0.8rem;
opacity: 0.7;
flex-shrink: 0;
}
/* Create External Calendar Button */
.create-external-calendar-button {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.9);
padding: 0.75rem 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 1rem;
font-size: 0.85rem;
font-weight: 500;
backdrop-filter: blur(10px);
width: 100%;
position: relative;
}
.create-external-calendar-button::before {
content: "📅";
position: absolute;
left: 1rem;
font-size: 0.8rem;
opacity: 0.8;
}
.create-external-calendar-button {
padding-left: 2.5rem;
}
.create-external-calendar-button:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
}
.create-external-calendar-button:active {
transform: translateY(0);
}
/* External Calendar Modal */
.external-calendar-modal {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: modalSlideIn 0.3s ease;
}
.external-calendar-modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid #e9ecef;
}
.external-calendar-modal .modal-header h3 {
margin: 0;
color: #495057;
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.external-calendar-modal .modal-header h3::before {
content: "📅";
font-size: 1.2rem;
opacity: 0.8;
}
.external-calendar-modal .modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: #6c757d;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.external-calendar-modal .modal-close:hover {
background: #f8f9fa;
color: #495057;
}
.external-calendar-modal .modal-body {
padding: 1.5rem 2rem 2rem;
}
.external-calendar-modal .form-group {
margin-bottom: 1.5rem;
}
.external-calendar-modal .form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #495057;
font-size: 0.9rem;
}
.external-calendar-modal .form-group input[type="text"],
.external-calendar-modal .form-group input[type="url"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #ced4da;
border-radius: 8px;
font-size: 0.9rem;
transition: all 0.2s ease;
background: white;
}
.external-calendar-modal .form-group input[type="text"]:focus,
.external-calendar-modal .form-group input[type="url"]:focus {
outline: none;
border-color: var(--primary-color, #667eea);
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.external-calendar-modal .form-group input[type="color"] {
width: 100%;
height: 40px;
padding: 0;
border: 1px solid #ced4da;
border-radius: 8px;
cursor: pointer;
background: none;
}
.external-calendar-modal .form-help {
display: block;
margin-top: 0.5rem;
font-size: 0.8rem;
color: #6c757d;
font-style: italic;
}
.external-calendar-modal .modal-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
padding: 1.5rem 2rem;
border-top: 1px solid #e9ecef;
background: #f8f9fa;
border-radius: 0 0 12px 12px;
}
.external-calendar-modal .btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
min-width: 100px;
}
.external-calendar-modal .btn-secondary {
background: #6c757d;
color: white;
}
.external-calendar-modal .btn-secondary:hover:not(:disabled) {
background: #5a6268;
transform: translateY(-1px);
}
.external-calendar-modal .btn-primary {
background: var(--primary-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
color: white;
}
.external-calendar-modal .btn-primary:hover:not(:disabled) {
filter: brightness(1.1);
transform: translateY(-1px);
}
.external-calendar-modal .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.external-calendar-modal .error-message {
background: #f8d7da;
color: #721c24;
padding: 0.75rem 1rem;
border-radius: 8px;
margin-bottom: 1rem;
font-size: 0.9rem;
border: 1px solid #f5c6cb;
}
/* External Calendar Events (Visual Distinction) */
.event[data-external="true"] {
position: relative;
border-style: dashed !important;
opacity: 0.85;
}
.event[data-external="true"]::before {
content: "📅";
position: absolute;
top: 2px;
right: 2px;
font-size: 0.7rem;
opacity: 0.7;
z-index: 1;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.external-calendar-modal {
max-height: 95vh;
margin: 1rem;
width: calc(100% - 2rem);
}
.external-calendar-modal .modal-header,
.external-calendar-modal .modal-body,
.external-calendar-modal .modal-actions {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.external-calendar-info {
padding: 0.5rem;
}
.external-calendar-name {
font-size: 0.8rem;
}
.create-external-calendar-button {
font-size: 0.8rem;
padding: 0.5rem 1rem 0.5rem 2rem;
}
}