1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
use dioxus::prelude::*;
/// Calendar props
#[derive(Props, Clone, PartialEq)]
pub struct CalendarProps {
/// Selected date (YYYY-MM-DD format)
#[props(default)]
pub model_value: Option<String>,
/// First day of week (0 = Sunday, 1 = Monday)
#[props(default = 1)]
pub first_day_of_week: u32,
/// Range restriction
#[props(default)]
pub range: Option<(String, String)>,
#[props(default)]
pub on_select: Option<EventHandler<String>>,
#[props(default)]
pub class: Option<String>,
#[props(default)]
pub style: Option<String>,
}
/// Calendar component for date selection
#[component]
pub fn Calendar(props: CalendarProps) -> Element {
let mut class_names = vec!["el-calendar".to_string()];
if let Some(ref c) = props.class { class_names.push(c.clone()); }
let weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let _days: Vec<u32> = (1..=31).collect();
rsx! {
div {
class: "{class_names.join(\" \")}",
style: props.style.clone().unwrap_or_default(),
div {
class: "el-calendar__header",
div {
class: "el-calendar__title",
"Calendar"
}
}
div {
class: "el-calendar__body",
table {
class: "el-calendar-table",
thead {
tr {
for day in weekdays.iter() {
th { class: "el-calendar-table__head", "{day}" }
}
}
}
tbody {
for week in 0..6 {
tr {
for _day in 0..7 {
td {
class: "el-calendar-day",
"{week * 7 + 1}"
}
}
}
}
}
}
}
}
}
}