Framework agnostic calendar components (demo)
The components are implemented with Svelte, so they can be used with Svelte component API. The following is a simple example how you can use DateCalendar
component.
import { en, DateCalendar } from 'calendar-set'
// Set the locale object to the component
DateCalendar.setLocale(en)
// Instantiate the calendar component
const calendar = new DateCalendar({
// Pass a DOM element which the component mount to
target: document.querySelector('#calendar'),
// Pass initial data of the component
data: {
selected: new Date()
}
})
// Observe calendar events
calendar.on('select', selected => {
console.log(selected)
})
// Set calendar data
calendar.set({
selected: new Date(2018, 0, 1)
})
// Destroy the component
calendar.destroy()
All components have a static method setLocale
to specify localized string shown in the calendar. You need to call the method before instantiating components. calendar-set
provides built in locales en
and ja
.
If you want to use with Vue.js, you may interested in vue-svelte-adapter.
{
current: {
year: number
month: number
}
selected: Date | Date[] | undefined
isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
getClass: (target: Date) => string
locale: Locale
}
fire('select', selectedDate)
fire('hover', hoveredDate)
Similar to DateCalendar but can be selected range of two dates.
{
current: {
year: number
month: number
}
selected: Date | Date[] | undefined
hovered: Date | undefined
getClass: (target: Date) => string
second: boolean // `true` if it is going to select the second date
locale: Locale
}
fire('select', selectedDate)
: selectedDate
is an array and always sorted with ASC order by date.fire('hover', hoveredDate)
{
currentYear: number
selected: Date | Date[] | undefined
isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
getClass: (target: Date) => string
locale: Locale
}
fire('select', selectedMonth)
fire('hover', hoveredMonth)
Similar to MonthCalendar but can be selected range of two months.
{
currentYear: number
selected: Date | Date[] | undefined
hovered: Date | undefined
getClass: (target: Date) => string
second: boolean // `true` if it is going to select the second month
locale: Locale
}
fire('select', selectedMonth)
: selectedMonth
is an array and always sorted with ASC order by month.fire('hover', hoveredMonth)
There is a default style at calendar-set/dist/calendar-set.css
. If you want to use it, import it by appropriate way of your project setup.
Example of webpack:
// Import calendar default style
import 'calendar-set/dist/calendar-set.css'
// Import calendar component
import { DateCalendar, en } from 'calendar-set'
DateCalendar.setLocale(en)
Example loading from CDN:
<!-- Import calendar default style -->
<link rel="stylesheet" href="https://unpkg.com/calendar-set/dist/calendar-set.css">
<!-- Import calendar script -->
<script src="https://unpkg.com/calendar-set"></script>
MIT