diff --git a/backend/templates/calendar.html b/backend/templates/calendar.html index e905c1b..b75fecb 100644 --- a/backend/templates/calendar.html +++ b/backend/templates/calendar.html @@ -52,9 +52,10 @@ {% 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'. #}
  • diff --git a/frontend/src/calendar.rs b/frontend/src/calendar.rs index 59de545..dfb97d4 100644 --- a/frontend/src/calendar.rs +++ b/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(¤t.day().to_string()); - let mut classes = vec!["day".to_string()]; + if i < nb_of_weeks { + day_content.set_inner_html(¤t.day().to_string()); - if current.month() == date.month() { - classes.push("current-month".to_string()); + let mut classes = vec!["day".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();