https://github.com/cshaa/svelte-day-picker

Cutomizable calendar component for Svelte, a drop-in replacement for react-day-picker
https://github.com/cshaa/svelte-day-picker

Last synced: 21 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cshaa/svelte-day-picker
• Owner: cshaa
• License: mit
• Created: 2022-05-18T16:45:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-25T14:24:10.000Z (7 months ago)
• Last Synced: 2024-12-14T22:03:50.259Z (28 days ago)
• Language: Svelte
• Size: 343 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-day-picker

A solid calendar component for Svelte and drop-in replacement for [React Day Picker](https://react-day-picker.js.org/). Uses the [Temporal API](https://2ality.com/2021/06/temporal-api.html) to handle dates, although it is also backwards-compatible with `Date`.

## Installation

```bash

yarn add svelte-day-picker

# OR

npm install svelte-day-picker

```

## Example Usage

```svelte

  import DayPicker, { Mode } from 'svelte-day-picker';

  let selected;

  $: first = selected?.at(0);

  $: last = selected?.at(-1);

From {first?.toLocaleString()} to {last?.toLocaleString()}

```

[**Try it!**](https://svelte.dev/repl/0f027084f8c2485483a3e5ccb6287acf?version=3.48.0)

# API

## ``

### 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](https://github.com/unicode-org/cldr/blob/main/common/bcp47/calendar.xml#L12) of a calendar type, or a custom calendar according to the [Temporal Calendar Protocol](https://tc39.es/proposal-temporal/docs/calendar.html#custom-calendars). 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](https://en.wikipedia.org/wiki/Workweek_and_weekend#Friday_weekend_(One_day_weekend)), [nor contiguous](https://en.wikipedia.org/wiki/Workweek_and_weekend#Non-contiguous_working_week).

  * `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: ``

  * `day-heading`

    * The days of week that appear as column headers of the calendar.

    * Default implementation ``

  * `day`

    * The individual days in the month.

    * Default implementation ``

# Roadmap

 * [ ] Improve documentation

 * [ ] Implement SSR

 * [ ] Feature-parity with React Day Picker

 * [ ] Improve UX on touch devices

 * [ ] Keyboard navigation & ARIA