Add 'Today' button to calendar header for quick navigation to current month
- Add go_to_today callback that navigates to first day of current month - Position Today button between month title and next month arrow - Center month/year title using absolute positioning - Group Today button and next arrow in header-right container with 0.5rem gap - Style Today button with pill shape, semi-transparent background, and hover effects - Add responsive styling for mobile screens with smaller text and padding - Maintain clean, balanced header layout on all screen sizes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -67,13 +67,25 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
current_month.set(next);
|
||||
})
|
||||
};
|
||||
|
||||
let go_to_today = {
|
||||
let current_month = current_month.clone();
|
||||
Callback::from(move |_| {
|
||||
let today = Local::now().date_naive();
|
||||
let first_of_today_month = today.with_day(1).unwrap();
|
||||
current_month.set(first_of_today_month);
|
||||
})
|
||||
};
|
||||
|
||||
html! {
|
||||
<div class="calendar">
|
||||
<div class="calendar-header">
|
||||
<button class="nav-button" onclick={prev_month}>{"‹"}</button>
|
||||
<h2 class="month-year">{format!("{} {}", get_month_name(current_month.month()), current_month.year())}</h2>
|
||||
<button class="nav-button" onclick={next_month}>{"›"}</button>
|
||||
<div class="header-right">
|
||||
<button class="today-button" onclick={go_to_today}>{"Today"}</button>
|
||||
<button class="nav-button" onclick={next_month}>{"›"}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="calendar-grid">
|
||||
|
||||
Reference in New Issue
Block a user