svelte-datepicker
This repository hosts a customizable and responsive datepicker component built using the Svelte. Whether you're building a personal productivity app, a scheduling application, or just need a sleek and efficient datepicker UI, this project has you covered.
Features
- Flexible Customization: Tailor the datepicker to your design needs with customizable themes, color schemes, and event markers.
- Responsive Design: The datepicker seamlessly adapts to various screen sizes, ensuring a consistent experience across devices.
- Event Integration: Easily integrate events, appointments, and important dates into the datepicker for a comprehensive scheduling solution.
- Smooth Animations: Enjoy smooth and engaging animations for seamless navigation and interaction with the datepicker.
- User-friendly Interface: The intuitive interface makes it easy for users to navigate, select dates, and manage their schedules.
Getting Started
To start using the svelte-datepicker
in your project, follow these simple steps:
- Clone or download this repository.
- Integrate the datepicker component into your Svelte application using the provided examples.
Usage
Here's an example of how you can integrate the svelte-datepicker component into your Svelte application:
<script>
import Calendar from 'svelte-datepicker';
</script>
<Calendar />
User guide
Calendar
Displays a complete, interactive datepicker.
Props
Prop name | Description | Example values |
---|---|---|
onChange |
Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available. | (date) => {} |
onViewChange |
Function called when the user navigates from one view to another using prev/next up button or by clicking a tile. viewTypes are month , year & decade
|
(viewType) => {} |
startDate |
The beginning of a period that shall be displayed by default. | new Date(2017, 0, 1) |
rootClass |
Class name that will be applied to a given datepicker wrapper | String: "class1 class2"
|
calendarWrapperClass |
Class name that will be applied to different view type of datepicker wrapper, | String: "class1 class2"
|
defaultView |
Determines which datepicker view shall be opened initially. Does not disable navigation. Can be "month" , "year" , "decade" , it's optional. |
"month" |
allowedViews |
Will be an array of views that should be displayed while user navigates the datepicker/datepicker, it's optional | initial value: ["month", "year", "decade"]
|