v-calendar

As of v3.0.0-alpha.7, you must manually import the component styles in your application due to Vite build restrictions in library mode.

import 'v-calendar/dist/style.css';

The recommended way to use v-calendar is by installing it as a plugin. This allows you to set global defaults and choose a component prefix to avoid naming conflicts.

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker components
Vue.use(VCalendar, {
  componentPrefix: 'vc',  // Use <vc-calendar /> instead of <v-calendar />
  ...,                // ...other defaults
});

V-Calendar provides a $screens mixin that allows you to create responsive props. This function automatically re-evaluates when the window crosses a breakpoint.

Usage Pattern

1. Mobile-First: V-Calendar is mobile-first. Values assigned to smaller screens apply to larger ones unless overridden.
2. The $screens function: Pass an object where keys are screen sizes (sm, md, lg, xl) and values are the desired prop values. Use the default key for the mobile layout.
3. Alternative Syntax: You can pass the default value as a second parameter to $screens instead of using the default key in the object.

Alternatively, you can use SetupCalendar to configure defaults and then register specific components like Calendar and DatePicker globally using app.component().

// main.js
import { SetupCalendar, Calendar, DatePicker } from 'v-calendar';

// Setup plugin for defaults or $screens (optional)
app.use(SetupCalendar, {})
// Use the components
app.component('Calendar', Calendar)
app.component('DatePicker', DatePicker)

<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date" />
</template>

To install the v1.0 version of v-calendar, use the @next tag with npm.

npm install --save v-calendar@next

In v1.0, replace is-double-paned and is-vertical with rows and columns props. To create responsive layouts, use the $screens function provided via a mixin to adjust these props based on breakpoints.

<v-calendar
  :rows="$screens({ default: 1, lg: 2 })"
  :columns="$screens({ default: 1, lg: 2 })"
  />

When using both disabled-dates and available-dates simultaneously, the following logic applies:

1. disabled-dates is evaluated first to disable specific days.
2. available-dates is then evaluated to re-enable any dates that were previously disabled by the disabled-dates expression.

Best Practice: Avoid specifying dates in available-dates that are not already covered by the disabled-dates logic, as they will have no effect.

When a mask is assigned an array of values, the first value is used to format the date, while all values in the array are used (from first to last) to parse the input string. The first successfully parsed format is used as the date value.

For example, if the input mask is ["L", "YYYY-MM-DD", "YYYY/MM/DD"], a user can type a date in YYYY-MM-DD format, but the component will ultimately display it using the L (localized) format after the change event.

<v-date-picker v-model="date">
  <template #default="{ inputValue, inputEvents }">
    <input class="px-3 py-1 border rounded" :value="inputValue" v-on="inputEvents" />
  </template>
</v-date-picker>

```js
export default {
  data() {
    return  {
      date: new Date(),
    }
  }
}