Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bounoable/calendair
https://github.com/bounoable/calendair
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/bounoable/calendair
- Owner: bounoable
- License: mit
- Created: 2020-04-08T18:06:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T10:04:28.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T17:38:57.504Z (7 months ago)
- Language: TypeScript
- Size: 2.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Calendair
A Vue 3 Datepicker inspired by Airbnb's [react-dates](https://github.com/airbnb/react-dates).
## Install
### Package Manager
```sh
npm install calendair --save
```
### CDN
```html
```
## Usage
```ts
import { defineComponent, reactive } from 'vue'
import { Calendair, Options } from 'calendair'
export default {
components: { Calendair },
setup() {
const options: Options = reactive({
/* Calendar options */
})
return { options }
}
}
```
```html
```
## Booking Plugin
The Booking Plugin adds functionality that is needed for booking / reservation related apps. It handles blocked periods, minimum stay, check-in / check-out days & booking gaps.
### Install
```sh
npm install calendair @calendair/booking --save
```
### Use
```html
import { reactive } from 'vue'
import { Calendair, Options } from 'calendair'
import BookingPlugin from '@calendair/booking'
export default {
components: { Calendair },
setup() {
const options: Options = reactive({
plugins: [
BookingPlugin({
/**
* Disable all dates / date ranges except the provided ones.
*/
enabled?: Array<Date|[Date, Date]>|(() => Array<Date|[Date, Date]>)
/**
* Disable dates / date ranges.
*/
disabled?: Array<Date|[Date, Date]>|(() => Array<Date|[Date, Date]>)
/**
* Already blocked periods (bookings).
*/
blocked?: [Date, Date][]
/**
* Specify the selectable weekdays. Defaults to all if none provided.
* Can provide an array of configurations for different periods.
* 0 = Sunday, 6 = Saturday
*/
selectableWeekdays?: Array<number|{
period: [Date, Date]
weekdays: number[]
}>
/**
* Minimum days that have to be selected.
*/
minDays?: number|((date: Date) => number)
/**
* Maximum gap between two bookings.
*/
maxGap?: number|((date: Date) => number)
/**
* Allow overlapping of two bookings (check-in same as check-out).
*/
allowOverlap?: boolean
/**
* Allow gaps between bookings to be filled, if otherwise the
* gap could not be filled because of the minDays constraint.
*/
allowGapFill?: boolean
})
]
})
return { options }
}
}
```
## Highlight plugin
The highlight plugin allows you to highlight certain dates in the calendar.
You can either highlight a static array of dates or provide a function to determine if a date should be highlighted.
### Install
```sh
npm install calendair @calendair/highlight --save
```
### Use
```html
import { reactive } from 'vue'
import { Calendair, Options } from 'calendair'
import HighlightPlugin from '@calendair/highlight'
export default {
components: { Calendair },
setup() {
const options: Options = reactive({
plugins: [
HighlightPlugin({
/**
* The highlighted dates.
*/
highlights?: Date[]|((date: Date) => boolean)
/**
* CSS style of the highlighted dates.
*/
style?: Partial<CSSStyleDeclaration>
}),
],
})
return { options }
}
}
```