diff --git a/src/components/calendar.rs b/src/components/calendar.rs
index 9084626..68baa12 100644
--- a/src/components/calendar.rs
+++ b/src/components/calendar.rs
@@ -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! {
diff --git a/styles.css b/styles.css
index 43ffa74..99ada49 100644
--- a/styles.css
+++ b/styles.css
@@ -405,6 +405,15 @@ body {
font-size: 1.8rem;
font-weight: 600;
margin: 0;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
}
.nav-button {
@@ -427,6 +436,25 @@ body {
background: rgba(255,255,255,0.3);
}
+.today-button {
+ background: rgba(255,255,255,0.2);
+ border: none;
+ color: white;
+ font-size: 0.9rem;
+ font-weight: 500;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.2s;
+}
+
+.today-button:hover {
+ background: rgba(255,255,255,0.3);
+}
+
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
@@ -765,6 +793,11 @@ body {
height: 35px;
font-size: 1.2rem;
}
+
+ .today-button {
+ font-size: 0.8rem;
+ padding: 0.4rem 0.8rem;
+ }
.weekday-header {
padding: 0.5rem;