The entire day in calendar is now clickable when a day need to be selected

backend/templates/calendar.html

@@ -33,7 +33,7 @@
         </div>
     </div>
 
-    <ul class="weekdays">
+    <ul class="days">
         {% let day_names = [
             Sentence::CalendarMondayAbbreviation,
             Sentence::CalendarTuesdayAbbreviation,
@@ -52,9 +52,6 @@
             </li>
         {% endfor %}
 
-    </ul>
-
-    <ul class="days">
         {% for i in 0..5 %}
             {% for j in 0..7 %}
                 {# All days of the current selected month will have the class 'current-month' #}
@@ -68,11 +65,7 @@
 
     <div id="hidden-templates-calendar">
         <div class="scheduled-recipe-with-link-and-remove"><a></a>
-            <span class="remove-scheduled-recipe button tooltip">✖
+            <span class="remove-scheduled-recipe button tooltip">✖<span class="tooltiptext">{{ context.tr.t(Sentence::CalendarUnschedule) }}</span></span>
-                <span class="tooltiptext">
-                    {{ context.tr.t(Sentence::CalendarUnschedule) }}
-                </span>
-            </span>
         </div>
 
         <div class="scheduled-recipe"></div>

frontend/src/calendar.rs

@@ -167,22 +167,28 @@ pub fn setup(
     EventListener::new(&days, "click", move |event| {
         let target: Element = event.target().unwrap().dyn_into().unwrap();
 
-        if target.class_name() == "number" && options.can_select_date {
+        // FIXME: Replace by an if let + condition when available in stable.
-            let first_day = first_grid_day(
+        match target.selector_upwards::<Element>(".day") {
-                state_clone.get_displayed_date(),
+            Some(element) if options.can_select_date => {
-                options.first_day_of_the_week,
+                let first_day = first_grid_day(
-            );
+                    state_clone.get_displayed_date(),
-            let day_grid_id = target.parent_element().unwrap().id();
+                    options.first_day_of_the_week,
-            let day_offset = day_grid_id[9..10].parse::<u64>().unwrap() * 7
+                );
-                + day_grid_id[10..11].parse::<u64>().unwrap();
+                let day_grid_id = element.id();
-            state_clone.set_selected_date(first_day + Days::new(day_offset));
+                let day_offset = day_grid_id[9..10].parse::<u64>().unwrap() * 7
-            display_month(
+                    + day_grid_id[10..11].parse::<u64>().unwrap();
-                &calendar_clone,
+                state_clone.set_selected_date(first_day + Days::new(day_offset));
-                state_clone.clone(),
+                display_month(
-                options,
+                    &calendar_clone,
-                recipe_scheduler,
+                    state_clone.clone(),
-            );
+                    options,
-        } else if target.class_name().contains("remove-scheduled-recipe") {
+                    recipe_scheduler,
+                );
+            }
+            _ => (),
+        }
+
+        if target.class_name().contains("remove-scheduled-recipe") {
             spawn_local(async move {
                 // Element id format example: "scheduled-recipe-1-2025-05-15".
                 let element_id = target.parent_element().unwrap().id();
@@ -275,27 +281,20 @@ fn display_month(
             let day_content: Element = day_element.selector(".number");
             day_content.set_inner_html(&current.day().to_string());
 
-            let mut class_name = String::new();
+            let mut classes = vec!["day".to_string()];
 
             if current.month() == date.month() {
-                if !class_name.is_empty() {
+                classes.push("current-month".to_string());
-                    class_name += " ";
-                }
-                class_name += "current-month";
             }
             if current == Local::now().date_naive() {
-                if !class_name.is_empty() {
+                classes.push("today".to_string());
-                    class_name += " ";
-                }
-                class_name += "today";
             }
+
             if options.can_select_date && current == state.get_selected_date() {
-                if !class_name.is_empty() {
+                classes.push("selected-day".to_string());
-                    class_name += " ";
-                }
-                class_name += "selected-day"
             }
-            day_element.set_class_name(&class_name);
+
+            day_element.set_class_name(&classes.join(" "));
 
             current = current + Days::new(1);
         }

frontend/src/utils.rs

@@ -14,6 +14,10 @@ pub trait SelectorExt {
     where
         T: JsCast;
 
+    fn selector_upwards<T>(&self, selector: &str) -> Option<T>
+    where
+        T: JsCast;
+
     fn deep_clone(&self) -> Self;
 }
 
@@ -41,6 +45,25 @@ impl SelectorExt for Element {
             .collect()
     }
 
+    fn selector_upwards<T>(&self, selector: &str) -> Option<T>
+    where
+        T: JsCast,
+    {
+        let mut current = self.clone();
+        // while let Some(parent) = current.parent_element() {
+        loop {
+            if let Ok(true) = current.matches(selector) {
+                return Some(current.dyn_into::<T>().unwrap());
+            }
+
+            if let Some(parent) = current.parent_element() {
+                current = parent;
+            } else {
+                return None;
+            }
+        }
+    }
+
     fn deep_clone(&self) -> Self {
         self.clone_node_with_deep(true)
             .unwrap()