0.0.1 • Published 8 months ago
@mittirorg/svelte-datepicker v0.0.1
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"] |
0.0.1
8 months ago