Date range in Calendar (#145)

* [*] 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)

* [*] Calendar: date range selection
  - Add selection style for last and next month
  - Fix keyboard selection
  - Update docs for RangeCalendarDay

* [*] Calendar: reset selection by esc

* [*] Calendar: add support for disabled ranges

* [*] Calendar: available_range at Base Context

* factor out some common methods between the two different date components

* tweak css and update dioxus

* fix docs

* final style tweaks

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>

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

@@ -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)
+}