Files
calendar/src/components/calendar_header.rs
Connor Johnstone a8bb2c8164 Implement comprehensive calendar UX improvements
- Add time range display to week view events showing "start - end" format
- Optimize time display with smart AM/PM formatting to reduce redundancy
- Fix context menu overlap by adding stop_propagation to event handlers
- Implement persistent view mode (Month/Week) across page refreshes using localStorage
- Replace month-based tracking with intelligent selected date tracking
- Add day selection in month view with visual feedback and click handlers
- Fix view switching to navigate to week containing selected day, not first week of month
- Separate selected_date from display_date for proper context switching
- Simplify week view header to show "Month Year" instead of "Week of Month Day"
- Add backward compatibility for existing localStorage keys

Greatly improves calendar navigation and user experience with persistent state

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-29 10:44:44 -04:00

47 lines
1.4 KiB
Rust
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

use yew::prelude::*;
use chrono::{NaiveDate, Datelike};
use crate::components::ViewMode;
use web_sys::MouseEvent;
#[derive(Properties, PartialEq)]
pub struct CalendarHeaderProps {
pub current_date: NaiveDate,
pub view_mode: ViewMode,
pub on_prev: Callback<MouseEvent>,
pub on_next: Callback<MouseEvent>,
pub on_today: Callback<MouseEvent>,
}
#[function_component(CalendarHeader)]
pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
let title = format!("{} {}", get_month_name(props.current_date.month()), props.current_date.year());
html! {
<div class="calendar-header">
<button class="nav-button" onclick={props.on_prev.clone()}>{""}</button>
<h2 class="month-year">{title}</h2>
<div class="header-right">
<button class="today-button" onclick={props.on_today.clone()}>{"Today"}</button>
<button class="nav-button" onclick={props.on_next.clone()}>{""}</button>
</div>
</div>
}
}
fn get_month_name(month: u32) -> &'static str {
match month {
1 => "January",
2 => "February",
3 => "March",
4 => "April",
5 => "May",
6 => "June",
7 => "July",
8 => "August",
9 => "September",
10 => "October",
11 => "November",
12 => "December",
_ => "Invalid"
}
}