svelte-calender is svelte component that allows the rendering of dynamic calendars
$ npm install svelte-calendars
<script>
import { Calendar } from 'svelte-calendars';
</script>
<Calendar />
Active month and year at which the calendar will first display
Amount of months to display in calendar
If true will display day titles as defined by config option daysTitles
If true will display current month with previous and next buttons
Will display the month name over each visible month in calendar
If true will display current year with previous and next buttons
Preselected date (will change when user clicks on date)
Callback that will be called on selected date change with three parameters:
The dateClasses prop is an array of arrays that contain a Date and string, if the date in the calendar matches the provided date, the class will be applied
<script>
import { DatePicker } from 'svelte-calendars';
</script>
<DatePicker />
The datepicker uses all the props from the calendar component with an extra optional prop
The function used to translate the selected date to the string in the input field, by default:
date => date.toLocaleDateString(),
Global configuration can be changed by calling the setConfiguration method:
import { setConfiguration } from 'sveltejs-form';
setConfiguration({
daysTitles: ['MON', 'TUE', 'WEN', 'THU', 'FRI', 'SAT', 'SUN'],
firstDay: 1, // set to 0 to start week sunday
libClassName: 'svelte-calendar',
monthTitles: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
});