Svelte Calendar

Theme by 6edesign

|

Updated: 22 Sep 2021

|

548 Stars

A lightweight datepicker with neat animations and a unique UX.

Overview:

The Svelte Calendar is a small date picker built with Svelte 3. It offers various features such as day, month, and year pickers, keyboard, touch, and scroll support, inline and picker modes, and a virtual/infinite grid for animation performance. It also supports localization using day.js.

Features:

• Day, Month & Year pickers: Allows users to easily select a specific day, month, or year.
• Responsive: The calendar is designed to be responsive and adapt to different screen sizes.
• Keyboard, touch, and scroll support: Users can interact with the calendar using a variety of input methods.
• Inline & Picker modes: The calendar can be used either as an inline component or as a pop-up picker.
• Virtual/infinite grid for animation performance: The calendar utilizes a virtual grid to optimize animation performance.
• Store-driven and extensible: The calendar can be easily integrated with existing Svelte stores and extended to fit specific needs.
• Localization using day.js: Supports localization with the help of the day.js library.

Installation:

To use the Svelte Calendar component within a Svelte-Kit application, follow these steps:

1. Install the necessary dependencies by running the following command:

npm install just-throttle dayjs

2. Open the svelte.config.js file and add the following code to include the dependencies in the config.kit.vite.optimizeDeps.include array:

optimizeDeps: {
    include: ['just-throttle', 'dayjs']
}

3. Now you can import and use the Svelte Calendar component in your Svelte-Kit project.

Summary:

The Svelte Calendar is a feature-rich date picker built with Svelte 3. It offers various pickers, supports responsive design and multiple input methods, and provides performance optimization with its virtual grid. It can be easily integrated with existing Svelte stores and supports localization using the day.js library. To use it in a Svelte-Kit project, make sure to install the required dependencies and include them in the project configuration.