[*] Calendar: support for selecting a date range

Author: ddudenin

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]
@@ -28,6 +29,30 @@ pub fn Calendar(props: CalendarProps) -> Element {
     }
 }
 
+#[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,
+                attributes: props.attributes,
+                {props.children}
+            }
+        }
+    }
+}
+
 #[component]
 pub fn CalendarHeader(props: CalendarHeaderProps) -> Element {
     rsx! {
@@ -104,3 +129,8 @@ pub fn CalendarGrid(props: CalendarGridProps) -> Element {
 pub fn CalendarMonthTitle(props: CalendarMonthTitleProps) -> Element {
     calendar::CalendarMonthTitle(props)
 }
+
+#[component]
+pub fn RangeCalendarDay(props: CalendarDayProps) -> Element {
+    calendar::RangeCalendarDay(props)
+}

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

@@ -0,0 +1,42 @@
+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 {
+                    render_day: Callback::new(|date: Date| {
+                        rsx! { RangeCalendarDay { date } }
+                    })
+                }
+            }
+        }
+    }
+}

preview/src/components/mod.rs

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