0.15.0 • Published 3 years ago

vue-airbnb-calendar-plugin-selection v0.15.0

Weekly downloads
3
License
MIT
Repository
github
Last release
3 years ago

This project is a work in progress and is subject to change. It is very likely that I will change the dependency to Vue 3.x as soon as it's relased.

Vue Airbnb Calendar

Vue Airbnb Calendar

Examples

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.

PropertyTypeDefaultDescription
dateFnsLocaleObjectenglishThe date-fns locale object
shortWeekdaysLengthInteger3Number of characters to use for short weekday names
maxMonthsInteger2Maximum number of visible months on the screen
startMonthDatenow A date which's month is the default leftmost visible calendar month
firstMonthDate-The left side limit of the calendar
lastMonthDate-The right side limit of the calendar
pluginsArray[]Calendar plugins
watchObject-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
}
PropertyTypeDescription
colorsObjectDefine the colors for the calendar item / day states
colors.withinSelectionCalendarItemColorsDay is within selection range / hovered
colors.selectableCalendarItemColorsDay is selectable
colors.selectedCalendarItemColorsDay is selected
colors.highlightedCalendarItemColorsDay is highlighted

Other options

PropertyTypeDescription
dateFormatStringThe date format for the returned dates. If not provided Date objects are returned.
minDateDateThe minimum Date that can be selected.
maxDateDateThe maximum Date that can be selected.
selectableRangesArrayDate ranges that are selectable. If not provided all days are selectable.
reservationsObjectReservation options for a booking calendar.
selectableFunctionFunction to determine if a day is selectable.
highlightFunctionFunction to determine if a day is highlighted.
onSelectFunctionFunction 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 😬

0.15.0

3 years ago

0.14.1

3 years ago

0.14.0

3 years ago

0.13.0

4 years ago

0.12.3

4 years ago

0.12.4

4 years ago

0.12.0

4 years ago

0.12.1

4 years ago

0.12.2

4 years ago

0.11.0

4 years ago

0.10.1

4 years ago

0.10.0

4 years ago

0.9.6

4 years ago

0.9.4

4 years ago

0.9.3

4 years ago

0.9.5

4 years ago

0.9.0

4 years ago

0.9.2

4 years ago

0.9.1

4 years ago

0.8.6

4 years ago

0.8.5

4 years ago

0.8.4

4 years ago

0.8.3

4 years ago

0.8.2

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.4

4 years ago

0.6.3

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago