https://6edesign.github.io/svelte-calendar/

A lightweight datepicker with neat animations and a unique UX.
https://6edesign.github.io/svelte-calendar/

calendar-component calendar-widget datepicker svelte svelte-framework svelte-v3 svelte3 sveltejs

Last synced: 2 months ago
JSON representation

A lightweight datepicker with neat animations and a unique UX.

• Host: GitHub
• URL: https://6edesign.github.io/svelte-calendar/
• Owner: 6eDesign
• License: mit
• Created: 2018-11-25T23:23:10.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-10-10T19:00:00.000Z (over 2 years ago)
• Last Synced: 2024-11-14T13:35:26.938Z (2 months ago)
• Topics: calendar-component, calendar-widget, datepicker, svelte, svelte-framework, svelte-v3, svelte3, sveltejs
• Language: Svelte
• Homepage: https://6edesign.github.io/svelte-calendar/
• Size: 2.72 MB
• Stars: 543
• Watchers: 11
• Forks: 90
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web - Svelte Calendar

README

        
# svelte-calendar

A small date picker built with Svelte 3. Demo available here: [view docs and examples](https://6edesign.github.io/svelte-calendar).

![Demo](static/demo.gif)

## Installation

```sh

npm i -D svelte-calendar

```

## Features

- Day, Month & Year pickers

- Responsive

- Keyboard, touch, and scroll support

- Inline & Picker modes

- Virtual/infinite grid for animation performance

- Store-driven and extensible

- [Localization](https://6edesign.github.io/svelte-calendar) using `day.js`

## Usage within svelte-kit project

When using this component within a svelte-kit application it is necessary to add its two dependencies (`just-throttle` and `dayjs`) to the `config.kit.vite.optimizeDeps.include` array in `svelte.config.js`. Eg: your config should include the following:

```js

const config = {

  kit: {

    vite: {

      optimizeDeps: {

        include: ['just-throttle', 'dayjs']

      }

    }

  }

};

export default config;

```

## Features In Development

- time picker

- date & date-time range picker