Flatpickr Calendar Component

This npm package provides a customizable and lightweight calendar component using the Flatpickr library. It is designed to integrate seamlessly with Svelte applications.

Installation

Install the package using npm:

npm install @icgcat/calendar

All required dependencies, including Flatpickr and its styles, will be installed automatically.

Features

• Date Range Selection: Allows users to select a range of dates.
• Customizable Options: Configure min/max dates, themes, and callbacks for various events.
• Localization: Built-in support for Catalan (locale: Catalan).
• Responsive: Adapts to different screen sizes.

Props

Customizable Properties

• onChange (optional): Callback triggered when the selected date range changes.
  • Parameters: (selectedDates, dateStr, instance)
• onReady (optional): Callback triggered when the calendar is initialized.
  • Parameters: (selectedDates, dateStr, instance)
• onValueUpdate (optional): Callback triggered when the input value updates.
  • Parameters: (selectedDates, dateStr, instance)
• onClose (optional): Callback triggered when the calendar closes.
  • Parameters: (selectedDates, dateStr, instance)
• minDate (optional): Minimum selectable date. Default: "01-12-2015".
• maxDate (optional): Maximum selectable date. Default: Current date.

Usage Example

<script>
    import Calendar from '@icgcat/calendar';

    function handleDateChange(selectedDates, dateStr) {
        console.log('Selected dates:', selectedDates);
        console.log('Formatted date:', dateStr);
    }
</script>

<Calendar 
    minDate="01-01-2020" 
    maxDate="31-12-2023" 
    onChange={handleDateChange} 
/>

Styling

The component comes with minimal styling for integration into your project. You can customize styles by modifying the included CSS:

.calendari {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
}

#calendaricon {
    font-size: 24px;
}

#date-range {
    padding: 5px;
    font-size: 16px;
    width: 15vw;
}

Localization

The calendar is pre-configured to use the Catalan locale. If you want to use another locale, import the appropriate file from flatpickr/dist/l10n/ and update the locale property in calendarOptions.

Dependencies

The following dependencies are automatically installed:

• flatpickr (library for date selection)
• flatpickr/dist/flatpickr.min.css (default styles)

No additional steps are required to configure dependencies.

License

This project is licensed under the MIT License.