[*] Calendar: date range selection

  - Add date range struct
  - Selecting a range using the mouse
  - Selecting a range using the keyboard
  - Add selection attributes
  - Add range component as variant of the calendar (preview)

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/style.css

@@ -109,6 +109,20 @@
   color: var(--primary-color);
 }
 
+.calendar-grid-cell[data-month="current"][date-selection-start="true"] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.calendar-grid-cell[data-month="current"][date-selection-center="true"] {
+  border-radius: 0;
+}
+
+.calendar-grid-cell[data-month="current"][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,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,