Add interactive day selection to calendar
- Added click handlers to calendar days for user interaction - Implemented selected day state tracking in calendar component - Added CSS styling for selected days with green highlight - Selected days show distinct visual feedback with borders and shadows - Supports combination states (selected+today, selected+events) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
20
index.html
20
index.html
@@ -311,6 +311,26 @@
|
|||||||
background: #e1f5fe;
|
background: #e1f5fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.calendar-day.selected {
|
||||||
|
background: #e8f5e8;
|
||||||
|
border: 2px solid #4caf50;
|
||||||
|
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day.selected.has-events {
|
||||||
|
background: #f1f8e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day.selected.today {
|
||||||
|
background: #e0f2f1;
|
||||||
|
border: 2px solid #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day.selected .day-number {
|
||||||
|
color: #2e7d32;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.day-number {
|
.day-number {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ pub struct CalendarProps {
|
|||||||
pub fn Calendar(props: &CalendarProps) -> Html {
|
pub fn Calendar(props: &CalendarProps) -> Html {
|
||||||
let today = Local::now().date_naive();
|
let today = Local::now().date_naive();
|
||||||
let current_month = use_state(|| today);
|
let current_month = use_state(|| today);
|
||||||
|
let selected_day = use_state(|| today);
|
||||||
|
|
||||||
let first_day_of_month = current_month.with_day(1).unwrap();
|
let first_day_of_month = current_month.with_day(1).unwrap();
|
||||||
let days_in_month = get_days_in_month(*current_month);
|
let days_in_month = get_days_in_month(*current_month);
|
||||||
@@ -71,18 +72,27 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
|||||||
(1..=days_in_month).map(|day| {
|
(1..=days_in_month).map(|day| {
|
||||||
let date = current_month.with_day(day).unwrap();
|
let date = current_month.with_day(day).unwrap();
|
||||||
let is_today = date == today;
|
let is_today = date == today;
|
||||||
|
let is_selected = date == *selected_day;
|
||||||
let events = props.events.get(&date).cloned().unwrap_or_default();
|
let events = props.events.get(&date).cloned().unwrap_or_default();
|
||||||
|
|
||||||
let mut classes = vec!["calendar-day", "current-month"];
|
let mut classes = vec!["calendar-day", "current-month"];
|
||||||
if is_today {
|
if is_today {
|
||||||
classes.push("today");
|
classes.push("today");
|
||||||
}
|
}
|
||||||
|
if is_selected {
|
||||||
|
classes.push("selected");
|
||||||
|
}
|
||||||
if !events.is_empty() {
|
if !events.is_empty() {
|
||||||
classes.push("has-events");
|
classes.push("has-events");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let selected_day_clone = selected_day.clone();
|
||||||
|
let on_click = Callback::from(move |_| {
|
||||||
|
selected_day_clone.set(date);
|
||||||
|
});
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class={classes!(classes)}>
|
<div class={classes!(classes)} onclick={on_click}>
|
||||||
<div class="day-number">{day}</div>
|
<div class="day-number">{day}</div>
|
||||||
{
|
{
|
||||||
if !events.is_empty() {
|
if !events.is_empty() {
|
||||||
|
|||||||
Reference in New Issue
Block a user