Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ktsn/calendar-set
Framework agnostic calendar components
https://github.com/ktsn/calendar-set
calendar calendar-components svelte svelte-components ui ui-components
Last synced: about 1 month ago
JSON representation
Framework agnostic calendar components
- Host: GitHub
- URL: https://github.com/ktsn/calendar-set
- Owner: ktsn
- Created: 2018-03-23T08:50:33.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-31T01:12:29.000Z (over 6 years ago)
- Last Synced: 2024-11-08T15:16:43.209Z (2 months ago)
- Topics: calendar, calendar-components, svelte, svelte-components, ui, ui-components
- Language: HTML
- Homepage: https://ktsn.github.io/calendar-set/
- Size: 1.02 MB
- Stars: 20
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# calendar-set
Framework agnostic calendar components ([demo](https://ktsn.github.io/calendar-set/))
## Components
The components are implemented with [Svelte](https://svelte.technology/), so they can be used with [Svelte component API](https://svelte.technology/guide#component-api). The following is a simple example how you can use `DateCalendar` component.
```js
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](https://vuejs.org/), you may interested in [vue-svelte-adapter](https://github.com/ktsn/vue-svelte-adapter).
### DateCalendar
#### Data
```ts
{
current: {
year: number
month: number
}
selected: Date | Date[] | undefined
isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
getClass: (target: Date) => string
locale: Locale
}
```
#### Events
* `fire('select', selectedDate)`
* `fire('hover', hoveredDate)`
### DateRangeCalendar
Similar to DateCalendar but can be selected range of two dates.
#### Data
```ts
{
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
}
```
#### Events
* `fire('select', selectedDate)`: `selectedDate` is an array and always sorted with ASC order by date.
* `fire('hover', hoveredDate)`
### MonthCalendar
#### Data
```ts
{
currentYear: number
selected: Date | Date[] | undefined
isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
getClass: (target: Date) => string
locale: Locale
}
```
#### Events
* `fire('select', selectedMonth)`
* `fire('hover', hoveredMonth)`
### MonthRangeCalendar
Similar to MonthCalendar but can be selected range of two months.
#### Data
```ts
{
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
}
```
#### Events
* `fire('select', selectedMonth)`: `selectedMonth` is an array and always sorted with ASC order by month.
* `fire('hover', hoveredMonth)`
## Styles
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:
```js
// 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:
```html
```
## License
MIT