dioxus_element_plug/components/
calendar.rs

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

dioxus_element_plug/components/
calendar.rs
