- 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>
47 lines
1.4 KiB
Rust
47 lines
1.4 KiB
Rust
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"
|
||
}
|
||
} |