Calendar may have 6 rows (6 weeks)

backend/templates/calendar.html

@@ -52,9 +52,10 @@
             </li>
         {% endfor %}
 
-        {% for i in 0..5 %}
+        {# The last row may be hidden if 5 rows is enough to display all days. #}
+        {% for i in 0..6 %}
             {% for j in 0..7 %}
-                {# All days of the current selected month will have the class 'current-month' #}
+                {# All days of the current selected month will have the class 'current-month'. #}
                 <li id="day-grid-{{i}}{{j}}">
                     <div class="number"></div>
                     <div class="scheduled-recipes"></div>

frontend/src/calendar.rs

@@ -245,8 +245,6 @@ pub fn setup(
     state
 }
 
-const NB_CALENDAR_ROW: u64 = 5;
-
 fn display_month(
     calendar: &Element,
     state: CalendarState,
@@ -274,27 +272,48 @@ fn display_month(
     let first_day = first_grid_day(date, options.first_day_of_the_week);
     let mut current = first_day;
 
-    for i in 0..NB_CALENDAR_ROW {
+    let nb_of_weeks = {
+        let nb_days_previous_month = if date.month0() == first_day.month0() {
+            0
+        } else {
+            (date.with_day(1).unwrap() - first_day).num_days()
+        };
+        if date.num_days_in_month() + nb_days_previous_month as u8 > 5 * 7 {
+            6
+        } else {
+            5
+        }
+    };
+
+    gloo::console::log!(nb_of_weeks);
+
+    for i in 0..6 {
         for j in 0..7 {
             let day_element: Element = by_id(&format!("day-grid-{}{}", i, j));
-
             let day_content: Element = day_element.selector(".number");
-            day_content.set_inner_html(&current.day().to_string());
 
-            let mut classes = vec!["day".to_string()];
+            if i < nb_of_weeks {
+                day_content.set_inner_html(&current.day().to_string());
 
-            if current.month() == date.month() {
+                let mut classes = vec!["day".to_string()];
-                classes.push("current-month".to_string());
+
+                if current.month() == date.month() {
+                    classes.push("current-month".to_string());
+                }
+                if current == Local::now().date_naive() {
+                    classes.push("today".to_string());
+                }
+
+                if options.can_select_date && current == state.get_selected_date() {
+                    classes.push("selected-day".to_string());
+                }
+
+                day_element.set_class_name(&classes.join(" "));
+            } else {
+                gloo::console::log!("ok");
+                day_element.set_class_name("");
+                day_content.set_inner_html("");
             }
-            if current == Local::now().date_naive() {
-                classes.push("today".to_string());
-            }
-
-            if options.can_select_date && current == state.get_selected_date() {
-                classes.push("selected-day".to_string());
-            }
-
-            day_element.set_class_name(&classes.join(" "));
 
             current = current + Days::new(1);
         }
@@ -303,7 +322,7 @@ fn display_month(
     // Load and display scheduled recipes.
     spawn_local(async move {
         let scheduled_recipes = recipe_scheduler
-            .get_scheduled_recipes(first_day, first_day + Days::new(NB_CALENDAR_ROW * 7))
+            .get_scheduled_recipes(first_day, first_day + Days::new(nb_of_weeks * 7))
             .await
             .unwrap();