Skip to content

Commit 98067ce

Browse files
ddudeninealmloff
andauthored
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>
1 parent 8e25631 commit 98067ce

File tree

8 files changed

+1726
-432
lines changed

8 files changed

+1726
-432
lines changed

Cargo.lock

Lines changed: 695 additions & 236 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ We're still in the early days - Many components are still being created and stab
4343
- [x] Checkbox
4444
- [x] Collapsible
4545
- [x] Context Menu
46-
- [ ] Date Picker
46+
- [x] Date Picker
4747
- [x] Dialog
4848
- [x] Dropdown Menu
4949
- [x] Hover Card

preview/src/components/calendar/component.rs

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
use dioxus::prelude::*;
22
use dioxus_primitives::calendar::{
3-
self, CalendarGridProps, CalendarHeaderProps, CalendarMonthTitleProps, CalendarNavigationProps,
4-
CalendarProps, CalendarSelectMonthProps, CalendarSelectYearProps,
3+
self, CalendarDayProps, CalendarGridProps, CalendarHeaderProps, CalendarMonthTitleProps,
4+
CalendarNavigationProps, CalendarProps, CalendarSelectMonthProps, CalendarSelectYearProps,
5+
RangeCalendarProps,
56
};
67

78
#[component]
@@ -21,6 +22,32 @@ pub fn Calendar(props: CalendarProps) -> Element {
2122
first_day_of_week: props.first_day_of_week,
2223
min_date: props.min_date,
2324
max_date: props.max_date,
25+
disabled_ranges: props.disabled_ranges,
26+
attributes: props.attributes,
27+
{props.children}
28+
}
29+
}
30+
}
31+
}
32+
33+
#[component]
34+
pub fn RangeCalendar(props: RangeCalendarProps) -> Element {
35+
rsx! {
36+
document::Link { rel: "stylesheet", href: asset!("./style.css") }
37+
div { class: "calendar",
38+
calendar::RangeCalendar {
39+
selected_range: props.selected_range,
40+
on_range_change: props.on_range_change,
41+
on_format_weekday: props.on_format_weekday,
42+
on_format_month: props.on_format_month,
43+
view_date: props.view_date,
44+
today: props.today,
45+
on_view_change: props.on_view_change,
46+
disabled: props.disabled,
47+
first_day_of_week: props.first_day_of_week,
48+
min_date: props.min_date,
49+
max_date: props.max_date,
50+
disabled_ranges: props.disabled_ranges,
2451
attributes: props.attributes,
2552
{props.children}
2653
}
@@ -104,3 +131,8 @@ pub fn CalendarGrid(props: CalendarGridProps) -> Element {
104131
pub fn CalendarMonthTitle(props: CalendarMonthTitleProps) -> Element {
105132
calendar::CalendarMonthTitle(props)
106133
}
134+
135+
#[component]
136+
pub fn CalendarDay(props: CalendarDayProps) -> Element {
137+
calendar::CalendarDay(props)
138+
}

0 commit comments

Comments
 (0)