[*] Calendar: add support for disabled ranges

Author: ddudenin

Cargo.lock

@@ -43,7 +43,7 @@ We're still in the early days - Many components are still being created and stab
 - [x] Checkbox
 - [x] Collapsible
 - [x] Context Menu
-- [ ] Date Picker
+- [x] Date Picker
 - [x] Dialog
 - [x] Dropdown Menu
 - [x] Hover Card

README.md

@@ -22,6 +22,7 @@ pub fn Calendar(props: CalendarProps) -> Element {
                 first_day_of_week: props.first_day_of_week,
                 min_date: props.min_date,
                 max_date: props.max_date,
+                disabled_ranges: props.disabled_ranges,
                 attributes: props.attributes,
                 {props.children}
             }
@@ -46,6 +47,7 @@ pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
                 first_day_of_week: props.first_day_of_week,
                 min_date: props.min_date,
                 max_date: props.max_date,
+                disabled_ranges: props.disabled_ranges,
                 attributes: props.attributes,
                 {props.children}
             }

preview/src/components/calendar/component.rs

@@ -114,6 +114,12 @@
   color: var(--primary-color);
 }
 
+.calendar-grid-cell[data-month="current"][date-unavailable="true"] {
+  color: var(--secondary-color-6);
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+
 .calendar-grid-cell[date-selection-start="true"] {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;

preview/src/components/calendar/style.css

@@ -0,0 +1,54 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+use time::{ext::NumericalDuration, macros::date, Date, UtcDateTime};
+
+use dioxus_primitives::calendar::DateRange;
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_range = use_signal(|| None::<DateRange>);
+
+    let now = UtcDateTime::now().date();
+    let mut view_date = use_signal(|| now);
+
+    let disabled_ranges = use_signal(|| {
+        vec![
+            DateRange::new(now, now.saturating_add(3.days())),
+            DateRange::new(now.saturating_add(15.days()), now.saturating_add(18.days())),
+            DateRange::new(now.saturating_add(22.days()), now.saturating_add(23.days())),
+        ]
+    });
+
+    rsx! {
+        div { class: "calendar-example", style: "padding: 20px;",
+            RangeCalendar {
+                selected_range: selected_range(),
+                on_range_change: move |range| {
+                    tracing::info!("Selected range: {:?}", range);
+                    selected_range.set(range);
+                },
+                view_date: view_date(),
+                on_view_change: move |new_view: Date| {
+                    tracing::info!("View changed to: {}-{}", new_view.year(), new_view.month());
+                    view_date.set(new_view);
+                },
+                min_date: date!(1995 - 07 - 21),
+                max_date: date!(2035 - 09 - 11),
+                disabled_ranges: disabled_ranges(),
+                CalendarHeader {
+                    CalendarNavigation {
+                        CalendarPreviousMonthButton {}
+                        CalendarSelectMonth {}
+                        CalendarSelectYear {}
+                        CalendarNextMonthButton {}
+                    }
+                }
+                CalendarGrid {
+                    render_day: Callback::new(|date: Date| {
+                        rsx! { RangeCalendarDay { date } }
+                    })
+                }
+            }
+        }
+    }
+}

preview/src/components/calendar/variants/unavailable_dates/mod.rs

@@ -62,7 +62,7 @@ examples!(
     aspect_ratio,
     avatar,
     button,
-    calendar[simple, internationalized, range],
+    calendar[simple, internationalized, range, unavailable_dates],
     checkbox,
     collapsible,
     context_menu,