Don't use this library. It's not maintained. Use this instead: https://github.com/bounoable/calendair
Vue Airbnb Calendar
This calendar / datepicker is inspired by the Datepicker from Airbnb (react-dates) and the existing vue-airbnb-style-calendar. Unfortunately that project uses 1.x version of date-fns, so I couldn't use it in my projects.
This library is created with Vue's composition API. You need to install it to make the calendar work. Learn more about the composition API here.
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
Installation
Package Manager
yarn add vue-airbnb-calendar // npm install vue-airbnb-calendar --save
CDN
<script src="https://unpkg.com/vue">script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js">script>
<script src="https://unpkg.com/bounoable/vue-airbnb-calendar">script>
Basic Usage
Package Manager
import { AirbnbCalendar, Options } from 'vue-airbnb-calendar'
import 'vue-airbnb-calendar/dist/style.css'
export default {
components: { AirbnbCalendar },
data() {
const options: Options = {
// Calendar options...
}
return { options }
}
}
<AirbnbCalendar :options="options"/>
Calendar Options
This project is written in TypeScript, so you can and should discover the available options with your IDE.
| Property | Type | Default | Description |
|---|---|---|---|
| dateFnsLocale | Object | english | The date-fns locale object |
| shortWeekdaysLength | Integer | 3 |
Number of characters to use for short weekday names |
| maxMonths | Integer | 2 |
Maximum number of visible months on the screen |
| startMonth | Date | now | A date which's month is the default leftmost visible calendar month |
| firstMonth | Date | - | The left side limit of the calendar |
| lastMonth | Date | - | The right side limit of the calendar |
| plugins | Array | [] |
Calendar plugins |
| watch | Object | - | Watchers for internal properties |
Plugins
Without any plugins you basically just got an infinite scrolling calendar. Currently the only available plugin is the Selection Plugin.
Selection Plugin
The Selection Plugin provides a range datepicker with customizable color schemes and options to control the calendar items/days.
Supported features:
- Range datepicker
- Custom color scheme
- Disabling of dates (min/max date, date ranges, custom function)
- Highlight dates (custom function)
Installation
yarn add vue-airbnb-calendar-plugin-selection // npm install vue-airbnb-calendar-plugin-selection --save
<script> import { Options } from 'vue-airbnb-calendar' import SelectionPlugin from 'vue-airbnb-calendar-plugin-selection' import 'vue-airbnb-calendar-plugin-selection/dist/style.css' export default { data() { const options: Options = { plugins: [ SelectionPlugin({ // Plugin options ... }) ] } return { options } } } script> <template> <AirbnbCalendar :options="options"/> template>
Plugin Options
Like the core, this plugin is written in TypeScript, so you can and should discover the options with your IDE.
Colors
Specify CSS color strings for the different states.
interface CalendarItemColors {
background?: string
border?: string
text?: string
}
| Property | Type | Description |
|---|---|---|
| colors | Object | Define the colors for the calendar item / day states |
| colors.withinSelection | CalendarItemColors | Day is within selection range / hovered |
| colors.selectable | CalendarItemColors | Day is selectable |
| colors.selected | CalendarItemColors | Day is selected |
| colors.highlighted | CalendarItemColors | Day is highlighted |
Other options
| Property | Type | Description |
|---|---|---|
| dateFormat | String | The date format for the returned dates. If not provided Date objects are returned. |
| minDate | Date | The minimum Date that can be selected. |
| maxDate | Date | The maximum Date that can be selected. |
| selectableRanges | Array | Date ranges that are selectable. If not provided all days are selectable. |
| selectableWeekdays | Array | Weekdays that are selectable. If not provided all days are selectable. |
| reservations | Object | Reservation options for a booking calendar. |
| selectable | Function | Function to determine if a day is selectable. |
| highlight | Function | Function to determine if a day is highlighted. |
| onSelect | Function | Function that is called when the selection changes. |
Contributing
This calendar was created out of a personal need, therefore new features / plugins will likely also emerge from my personal needs. Feel free to create pull requests, but keep in mind that the core of the calendar should stay small and simple. Rather than adding advanced features directly to the core, try to extend the calendar's API (if you need to) and then create the plugin for the feature.
If you can't contribute to the code by yourself, create an issue and hope for the best
13.4k Jan 8, 2023
3.7k Dec 31, 2022
0 Feb 11, 2021
3 Oct 31, 2022
10 Dec 29, 2022
48 Dec 26, 2022
3 Oct 3, 2022
16 Nov 24, 2022
404 Dec 20, 2022
1.4k Dec 26, 2022
37 Sep 10, 2021
7.9k Dec 31, 2022
1.5k Dec 18, 2022
70 Aug 20, 2022
762 Jan 3, 2023
15 Feb 28, 2022
47 Aug 16, 2022
485 Dec 18, 2022
129 Aug 13, 2022