# v1.0.0-beta.0

This is a big update with quite a few breaking changes. Here are the biggest updates.

• Responsive Layouts
• i18n Improvements
• Modern Design
• Theming & Dark Mode
• Attributes API
• Datepicker Improvements
• Popper.js Integration
• Defaults Restructuring
• Modifications to Props & Events
• Bug Fixes

# Quick Update

# Install next version of v-calendar

npm install --save v-calendar@next

# VCalendar & VDatePicker

• Replace is-double-paned and is-vertical props and with rows and columns. Use the $screens function for custom responsive layouts.
• Combine weeks-transition and title-transition props into single transition prop.
• Rename formats prop and formats default setting to masks
• Replace tint-color with color and is-dark props
• Remove any use of is-linked, pane-width and theme-styles props

# VDatePicker Only

• Combine popover-direction and popover-align props with the placement property of the new popover prop. Read more
• Remove any use of popover-content-style, popover-expanded and popover-show-clear-margin props.
• Remove any use of date-formatter, date-parser,
• Remove any use of show-caps. Highlights now use the fillMode property for this.

# Responsive Layouts

In pre-v1 versions you could create double-paned calendars via the is-double-paned and is-vertical props. While better than nothing, only getting up to 2 panes in a single calendar was limiting and the built-in responsiveness was not great. Now you have multiple props to configure your own layouts.

For responsive designs, you can use the newly provided $screens function to make these props responsive (or any other prop for that matter). For example, this will get you 2 columns and 2 rows on large layouts.

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

One extra nicety: because this function is provided via a lightweight mixin, you can use it to make any prop on any component responsive.

Read more about creating responsive layouts.

# i18n Improvements

Previously, you could only define a single locale for all instances of v-calendar in your application. Now, you can pass a locale prop to each instance of v-calendar. It can either be a locale string identifier...

<v-calendar locale="es" />

...or an object with the id and optional firstDayOfWeek or masks.

<v-calendar :locale="{ id: 'da', firstDayOfWeek: 2, masks: { weekdays: 'WW' } }" />

If you don't provide a locale prop, it still reverts to the locale detected by the browser.

Also, you can provide a locales object within your own defaults to provide info for any locales not natively detected by v-calendar or the browser.

import VCalendar from 'v-calendar';
// When using VCalendar
Vue.use(VCalendar, {
  locales: {
    'pt-PT': {
      firstDayOfWeek: 1,
      masks: {
        L: 'YYYY-MM-DD',
        // ...optional `title`, `weekdays`, `navMonths`, etc
      }
    }
  }
});

Then, simply use the locale in your calendar by passing the locale id (key above).

<v-calendar locale="pt-PT" />

Read more about working with i18n.

# Modern Design

In this release I went back to the drawing board with the design. I decided to go with a more clean and modern look, which overall led to cleaner, solid backgrounds, more appropriate font weights, less borders and improved visual hierarchy.

# Theming & Dark Mode

In deciding to modernize the design, I also wanted it to look great for multiple colors. That led to redesigning the theming system so that it would look great out of the box but also flexible for multiple scenarios. I'm still working towards the best solution to implement this, but right now I feel like I've got the overall approach nailed down.

# Attributes API

# Datepicker Improvements

# Input debounce

You can now debounce the rate at which the date picker value changes after the input text has changed. This can be configured with the input-debounce prop (in milliseconds).

# Date selection popover removed from core

While including the date selection popover might have been nice for some, I don't feel it was used enough to warrant having it included in the core plugin. As a result, the show-day-popover prop has been deprecated. I think I will create a little tutorial on re-creating it within a custom select-attribute for those who really want to have it.

# Combine popover related props into single popover object

There is now a single popover prop that combines any popover related properties. As a result of using Popper.js for popovers, the popover-direction and popover-align props have been replaced in favor of the popover-placement which essentially combines them together. The next section covers the new popover related properties.

# Popper.js Integration

All use of popovers, including atributes, the navigation pane and the date picker input, now use Popper.js under the hood for more accurate and adaptable layout positioning. For example, if the window size doesn't allow for positioning the popover in the desired position, it will get rearranged to a new position visible to the user.

Also, each calendar shares a single popover for all day attributes. This helps improve performance and memory usage, as each day doesn't need to have its own separate popover instance.

The following configuration properties may be used for v-date-picker.popover, v-calendar.nav-popover and popovers for attributes.

# Defaults Restructuring

# Modifications to Props & Events

Below is a comprehensive list of all deprecated and added props and events.

# v-calendar

# v-date-picker

# Bug Fixes

# v1.0.0-beta.1

# Bug Fixes

• Fix click handler for calendar days to support Mobile Safari
• Re-add support for title-position prop
• Add disable-page-swipe prop for disabling page swiping. This is mostly needed when building custom calendars that need to support overflow scrolling.

# v1.0.0-beta.2

# Bug Fixes

• Fix extractor for TailwindCSS
• Add nesting rules to PostCSS config

# v1.0.0-beta.4

# Bug Fixes

• Fix whitelisting for PurgeCSS

# v1.0.0-beta.5

# Bug Fixes

• Undo tap handlers on mobile preventing click events on days with popovers (this needs to be done another way)
• Fix scoped slot names for header-left-button and header-right-button

# Improvements

• Significantly improve performance when displaying lots of attributes

# v1.0.0-beta.7, beta.8

# Bug Fixes

• Fix date matching logic for multi-date picker
• Remove global base styles getting applied
• Theme fixes

# Improvements

• Add support for disabling dates in v-calendar
• Auto-adjust page ranges for date picker values
• Remove unused code

# v1.0.0-beta.9

# Bug Fixes

• Fix pages not getting refreshed on initial screen size detection
• Fix drag values getting reset in v-date-picker
• Fix edge-case with attribute change detection

# Improvements

• Add new is-dragging and hidePopover props for default slot in v-date-picker
• Update README.md

# v1.0.0-beta.10

# Bug Fixes

• Fix event handling when using custom default slot for v-date-picker

# Improvements

• Add support for new "hover-focus" popover visibility state (new default state)
• Disable pointer events for non-interactive popovers

# v1.0.0-beta.11

# Bug Fixes

• Apply base border styles to popover

# Improvements

• Clean up attribute code
• Add navCellDisabled theme setting

# v1.0.0-beta.12

# Bug Fixes

• Apply reset style to properly display borders using Tailwind
• Fix bug when resetting attributes

# v1.0.0-beta.13

# Bug Fixes

• Fix reuse of existing attribute when resetting