Date range in Calendar

README.md

@@ -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

preview/src/components/calendar/component.rs

@@ -1,7 +1,8 @@
 use dioxus::prelude::*;
 use dioxus_primitives::calendar::{
-    self, CalendarGridProps, CalendarHeaderProps, CalendarMonthTitleProps, CalendarNavigationProps,
-    CalendarProps, CalendarSelectMonthProps, CalendarSelectYearProps,
+    self, CalendarDayProps, CalendarGridProps, CalendarHeaderProps, CalendarMonthTitleProps,
+    CalendarNavigationProps, CalendarProps, CalendarSelectMonthProps, CalendarSelectYearProps,
+    RangeCalendarProps,
 };
 
 #[component]
@@ -21,6 +22,32 @@ 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}
+            }
+        }
+    }
+}
+
+#[component]
+pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
+        div { class: "calendar",
+            calendar::RangeCalendar {
+                selected_range: props.selected_range,
+                on_range_change: props.on_range_change,
+                on_format_weekday: props.on_format_weekday,
+                on_format_month: props.on_format_month,
+                view_date: props.view_date,
+                today: props.today,
+                on_view_change: props.on_view_change,
+                disabled: props.disabled,
+                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}
             }
@@ -104,3 +131,8 @@ pub fn CalendarGrid(props: CalendarGridProps) -> Element {
 pub fn CalendarMonthTitle(props: CalendarMonthTitleProps) -> Element {
     calendar::CalendarMonthTitle(props)
 }
+
+#[component]
+pub fn CalendarDay(props: CalendarDayProps) -> Element {
+    calendar::CalendarDay(props)
+}

preview/src/components/calendar/style.css

@@ -104,11 +104,36 @@
   cursor: not-allowed;
 }
 
+.calendar-grid-cell[data-month="last"][data-selected="true"],
+.calendar-grid-cell[data-month="next"][data-selected="true"] {
+  background-color: var(--secondary-color-6);
+}
+
 .calendar-grid-cell[data-month="current"][data-selected="true"] {
   background-color: var(--secondary-color-2);
   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;
+}
+
+.calendar-grid-cell[date-selection-between="true"] {
+  border-radius: 0;
+}
+
+.calendar-grid-cell[date-selection-end="true"] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .calendar-grid-cell[data-month="current"][data-selected="true"]:hover {
   background-color: var(--light, var(--secondary-color-2))
     var(--dark, var(--primary-color-5));

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

@@ -0,0 +1,38 @@
+use super::super::component::*;
+use dioxus::prelude::*;
+use time::{macros::date, Date, UtcDateTime};
+
+use dioxus_primitives::calendar::DateRange;
+
+#[component]
+pub fn Demo() -> Element {
+    let mut selected_range = use_signal(|| None::<DateRange>);
+    let mut view_date = use_signal(|| UtcDateTime::now().date());
+    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),
+                CalendarHeader {
+                    CalendarNavigation {
+                        CalendarPreviousMonthButton {}
+                        CalendarSelectMonth {}
+                        CalendarSelectYear {}
+                        CalendarNextMonthButton {}
+                    }
+                }
+                CalendarGrid {}
+            }
+        }
+    }
+}

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

@@ -0,0 +1,50 @@
+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 {}
+            }
+        }
+    }
+}

preview/src/components/mod.rs

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