V-Calendar

# v0.8.0

# Date Picker Day Popover

Modifications

  • 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.

Property Name Type Description
day Object Object with specific information about the day displaying the attribute.
targetDate Object Date info object.
isHovered Boolean Day element is currently hovered over.
isFocused Boolean Day element is currently focused. Only applies when a popover is configured.
onStart Boolean Day lies on the first day of the attribute's targetDate.
onEnd Boolean Day lies on the last day of the attributes's targetDate.

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.

← v0.7 →