Migration Guide

This guide discusses all breaking changes made for new versions >= v0.8.0. It does not cover all new features. Please refer to the changelog for more info.

v0.9.0

• Theme styles headerVerticalDivider, weekdaysVerticalDivider and weeksVerticalDivider removed in favor of defining functions for the header, weekdays and weeks styles like so...

<template>
  <v-calendar :theme-styles='themeStyles'>
  </v-calendar>
</template>

export default {
  data() {
    return {
      themeStyles: {
        // Use page position to set left border for the 2nd pane header
        // NOTE: You can use the `verticalDivider` style to apply a single border. Just use this technique to apply different border styles for specific sections (header, weekdays, weeks)
        header({ position }) {
          return (position === 2) && {
            borderLeft: '1px solid #dadada'
          };
        }
      }
    }
  }
}

v0.8.0

Date Picker Day Popover

• Renamed v-date-picker prop show-popover to show-day-popover to avoid confusion with calendar popover.
• Renamed defaults property datePickerShowPopover to datePickerShowDayPopover to avoid confusion with calendar popover.

Attribute Functions

Attribute types can now be defined as functions that accept an object parameter with the following properties and return an object.

For example, you could fade a bar attribute when the day content is hovered.

<v-calendar
  :attributes='attributes'>
</v-calendar>

export default {
  data() {
    return {
      attributes: [
        {
          bar({ isHovered }) {
            return {
              backgroundColor: "black",
              opacity: (isHovered && 0.5) || 1
            };
          },
          dates: new Date()
        }
      ]
    };
  }
};

As a result of this change, the attribute.contentHoverStyle property has been deprecated in favor of using a function for attribute.contentStyle. This allows for more flexibility and control for configuring the style.

<v-calendar
  :attributes='attributes'>
</v-calendar>

export default {
  data() {
    return {
      attributes: [
        {
          contentStyle({ isHovered }) {
            return (
              isHovered && {
                backgroundColor: "#dadada",
                cursor: "pointer"
              }
            );
          },
          dates: new Date()
        }
      ]
    };
  }
};

Also, the dayContentHover theme style has been deprecated in favor of using a function to define the contentStyle, just like in the previous example.