cshaa/svelte-day-picker

Cutomizable calendar component for Svelte, a drop-in replacement for react-day-picker

svelte-day-picker

A solid calendar component for Svelte and drop-in replacement for React Day Picker. Uses the Temporal API to handle dates, although it is also backwards-compatible with Date.

Installation

yarn add svelte-day-picker
# OR
npm install svelte-day-picker

Example Usage

<script>
  import DayPicker, { Mode } from 'svelte-day-picker';
  let selected;
  $: first = selected?.at(0);
  $: last = selected?.at(-1);
</script>
<span>From {first?.toLocaleString()} to {last?.toLocaleString()}</span>
<DayPicker numberOfMonths={2} mode={Mode.Range} bind:selected={selected} />

Try it!

API

<DayPicker />

DayPicker Props

• locale

  • Type: string | Intl.Locale
  • Default: The user's current locale
  • Description: Selects default calendar options and corresponding translation strings, if available

• calendar

  • Type: string | Temporal.CalendarProtocol
  • Default: Current locale's calendar — typically 'gregory'
  • Description: Either a Unicode Calendar Identifier of a calendar type, or a custom calendar according to the Temporal Calendar Protocol. Most of the world uses 'gregory' or 'iso8601' (which are almost the same), but other calendar identifiers include 'buddhist', 'chinese', 'hebrew', 'islamic'.

• timeZone

  • Type: string
  • Default: Current locale's time zone
  • Description: Time zone to resolve today's date.

• weekStart

  • Type: (enum) DayOfWeek
  • Default: Current locale's week start
  • Description: Which day (Monday, Tuesday, ...) is considered the first day of the week.

• weekend

  • Type: (enum) DayOfWeek[]
  • Default: Current locale's weekend
  • Description: Days that are considered a weekend. They needen't be two, nor contiguous.

• numberOfMonths

  • Type: number (positive integer)
  • Default: 1
  • Description: The number of consecutive months to show.

• defaultMonth

  • Type: Date | Temporal.PlainYearMonthLike
  • Default: The current month.
  • Description: When first loaded, the calendar will show this month.

• bind:month

  • Type: Date | Temporal.PlainYearMonthLike
  • Description: A bind: propery controling the current month.

• disableNavigation

  • Type: boolean
  • Default: false
  • Description: Forbid the user from navigating to a different month.

• density

  • Type: (enum) Density
  • Default: Density.Sparse
  • Description: Typographic density of the UI.

• mode

  • Type: (enum) Mode
  • Default: Mode.Single
  • Description: Selection mode – whether to select a single day, multiple days or a range.

• bind:selected

  • Type: Temporal.PlainDate[]
  • Default: []
  • Description: A bind: property containing all the selected dates.

• bind:selectedRange

  • Type: { from: Temporal.PlainDate, to: Temporal.PlainDate } | undefined
  • Default: undefined
  • Description: A bind: property containing the selected range, if the mode is Mode.Range.

• disabled

  • Type: Matcher[] | Matcher
  • Default: []
  • Description: Which days should be marked as disabled.

• hidden

  • Type: Matcher[] | Matcher
  • Default: []
  • Description: Which days should be hidden.

• today

  • Type: Date | Temporal.PlainDate
  • Default: new Date() (the current date)
  • Description: The day that should be highlighted as the current date.

DayPicker Slots

• month-title

  • The element that renders above each month. By default it's the month's name (for example “January 2022”) and navigation buttons forward & backward.
  • Default implementation: <MonthTitle />

• day-heading

  • The days of week that appear as column headers of the calendar.
  • Default implementation <DayHeading />

• day

  • The individual days in the month.
  • Default implementation <Day />

Roadmap

• Improve documentation
• Implement SSR
• Feature-parity with React Day Picker
• Improve UX on touch devices
• Keyboard navigation & ARIA