use_calendar

Create bare-bone calendar data to use in your component. See UseCalendarOptions for options and UseCalendarReturn for return values.

The calendar is generic over the date type D which has to implement CalendarDateType. Implementations are provided behind feature flags. Enable at least one of them in addition to the use_calendar feature:

For date-time types the calendar works on the calendar day in the value’s time zone. All comparisons (today, selected, before, after, between) are done by calendar day, ignoring the time of day. The generated dates keep the time of day of the displayed date unless it doesn’t exist on a day because of a DST transition, in which case it is shifted.

Demo

Usage

use leptos::prelude::*;
use chrono::NaiveDate;
use leptos_use_calendar::{use_calendar, UseCalendarReturn};

#[component]
fn Demo() -> impl IntoView {
let UseCalendarReturn {
    dates,
    weekdays,
    previous_month,
    today,
    month_by_date,
    next_month
} = use_calendar::<NaiveDate>();

view! {
}
}

Use use_calendar_with_options to change the initial date and first day of the week.

use leptos::prelude::*;
use chrono::NaiveDate;
use leptos_use_calendar::{use_calendar_with_options, UseCalendarReturn, UseCalendarOptions};

#[component]
fn Demo() -> impl IntoView {
let initial_date = RwSignal::new(
    Some(NaiveDate::from_ymd_opt(2022, 1, 1).unwrap())
);

let options = UseCalendarOptions::default()
    .first_day_of_the_week(6)
    .initial_date(initial_date);

let UseCalendarReturn {
    dates,
    weekdays,
    previous_month,
    today,
    month_by_date,
    next_month
} = use_calendar_with_options(options);

view! {
}
}

Using jiff or time

With the feature jiff or time enabled you can use their date types instead.

#[cfg(feature = "jiff")]
mod jiff_demo {
use leptos::prelude::*;
use leptos_use_calendar::{use_calendar, UseCalendarReturn};

#[component]
fn Demo() -> impl IntoView {
let UseCalendarReturn { dates, .. } = use_calendar::<jiff::civil::Date>();

view! {
}
}
}

#[cfg(feature = "time")]
mod time_demo {
use leptos::prelude::*;
use leptos_use_calendar::{use_calendar, UseCalendarReturn};

#[component]
fn Demo() -> impl IntoView {
let UseCalendarReturn { dates, .. } = use_calendar::<time::Date>();

view! {
}
}
}

Custom date types

To use your own date type, implement CalendarDateType for it. This works without enabling any of the backend features. Here is an example with a new-type wrapper around a chrono date:

#[cfg(feature = "chrono")]
mod custom_demo {
use leptos::prelude::*;
use chrono::{Datelike, Local, Months, NaiveDate};
use leptos_use_calendar::{use_calendar, CalendarDateType, UseCalendarReturn};

#[derive(Clone, Copy, PartialEq)]
pub struct MyDate(NaiveDate);

impl CalendarDateType for MyDate {
    fn today() -> Self {
        MyDate(Local::now().date_naive())
    }

    fn ymd(&self) -> (i32, u8, u8) {
        (self.0.year(), self.0.month() as u8, self.0.day() as u8)
    }

    fn prev_day(&self) -> Option<Self> {
        self.0.pred_opt().map(MyDate)
    }

    fn next_day(&self) -> Option<Self> {
        self.0.succ_opt().map(MyDate)
    }

    fn weekday_from_monday(&self) -> u8 {
        self.0.weekday().num_days_from_monday() as u8
    }

    fn add_months(&self, months: i32) -> Option<Self> {
        let date = if months >= 0 {
            self.0.checked_add_months(Months::new(months as u32))
        } else {
            self.0.checked_sub_months(Months::new(months.unsigned_abs()))
        };
        date.map(MyDate)
    }
}

#[component]
fn Demo() -> impl IntoView {
    let UseCalendarReturn { dates, .. } = use_calendar::<MyDate>();
    // ...
    view! { }
}
}

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

Not tested yet.

Installation

cargo add leptos-use-calendar

Options

UseCalendarOptions

Options for use_calendar_with_options.

Every option is set with a builder method of the same name, e.g. UseCalendarOptions::default().initial_date(...). See also the API docs.

initial_date

Type: MaybeRwSignal<Option<D>>

Date being used to initialize the calendar month to be displayed. Defaults to CalendarDateType::today.

first_day_of_the_week

Type: Signal<usize>

First day of the week as a number from 0 to 6. Defaults to 0 (Monday).

Source

Source • Demo • Docs