V-Calendar

# v0.9.0

# Bug Fixes

# v-calendar

  • Fixes Turkish locale identifier
  • Fixes weekday formatting by using UNC dates with Intl.DateTimeFormat. Closes #104.
  • Other small bug fixes

# v-date-picker

  • Fixes glitch with highlight cap animation when mode === "range"
  • Fixes bug with themeStyles.dayContent style getting ignored. Closes #115.

# Improvements

# v-calendar

  • Adds min-date prop as a convenient alternative to min-page
  • Adds max-date prop as a convenient alternative to max-page
  • Adds is-linked prop to link panes to consecutive months when is-double-paned is set. Closes #80.
  • Adds is-vertical prop for vertical calendar orientation when is-double-paned is set. Closes #89.

# v-date-picker

  • min-date and max-date props are now forwarded to v-calendar. Closes #78.

# Defaults

Theme styles modifications. Closes #93.

Style Modification Description
horizontalDivider Add Horizontal divider when calendars are in vertical orientation (is-vertical)
navHeader Add Navigation pane header.
navHeaderTitle Add Navigation pane header title.
navHeaderArrows Add Navigation pane header arrows.
navMonthCell Add Navigation pane month cells.
navYearCell Add Navigation pane year cells.
header Edited Supports use of function that accepts a page (opens new window) object and return a style
headerTitle Edit Supports use of function that accepts a page (opens new window) object and return a style
headerArrows Edit Supports use of function that accepts a page (opens new window) object and return a style
headerHorizontalDivider Edit Supports use of function that accepts a page (opens new window) object and return a style
weekdays Edit Supports use of function that accepts a page (opens new window) object and return a style
weekdaysHorizontalDivider Edit Supports use of function that accepts a page (opens new window) object and return a style
weeks Edit Supports use of function that accepts a page (opens new window) object and return a style
headerVerticalDivider Remove Reference note below
weekdaysVerticalDivider Remove Reference note below
weeksVerticalDivider Remove Reference note below
  • Styles 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.9.1

# Bug Fixes

# v-calendar

  • Removes global css
  • Removes 'clever' container size detection

# v0.9.2

# Bug Fixes

# v-calendar

  • Fixes bug where detected locale getting overwritten by 'en-US' in some cases. Closes #101.

# Improvements

# v-calendar

  • Adds support for importing individual components along with a method to setupCalendar. Closes #60. Closes #105.
  • Includes full page object with update:frompage and update:topage events. Closes #120.

# v0.9.3

# Bug Fixes

# v-calendar

  • Fix bug where initial update:frompage and update:topage events missing page argument. Closes #125.

# v-date-picker

  • Fix bug where formats prop not getting forwarded to v-calendar. Closes #123.

# popover

  • Modify tabindex to improve tab navigation. Closes #119.
  • Fix bug where content container element was overflowing window on mobile.

# Improvements

# v-date-picker

  • Improve input key handing, specifically for enter and esc keys
  • Added update-on-input-keyup prop to update picker selection on every keyup event.
  • Custom slot method updateValue can now accept options as the second parameter. Closes #118.
Property Description Default Value
formatInput If new value is valid, date picker should reformat the inputValue (based on formats.input). true
hidePopover If new valud is valid, date picker should hide popover. !popoverKeepVisibleOnInput
<v-date-picker
  v-model='date'>
  <input
    slot-scope='{ inputValue, updateValue }'
    :value='inputValue'
    @change='updateValue(inputValue, { formatInput: true, hidePopover: false })'
    @keyup='updateValue(inputValue, { formatInput: false, hidePopover: false })' />
</v-date-picker>

# defaults

  • Added datePickerUpdateOnKeyup as default value for v-date-picker.update-on-keyup prop.

# v0.9.4

# Bug Fixes

# v-date-picker

  • Fix bug where 'Do' format token was not supported. Closes #127.

# v0.9.5

# Improvements

# v-calendar

  • Adds support for 'day-content' slots. 🎉 🎉 🎉 This adds a lot of flexibility by allowing you to provide your own day cells. The layout has also been improved to grow with your cells, so you can now build larger calendars to fill with your own content.
<v-calendar>
  <div
    slot='day-content'
    slot-scope='{ day, attributes, contentStyle }'
    class='my-day'>
    <!-- Be sure to display the day of the month somewhere in your content -->
    {{ day.day }}
  </div>
</v-calendar>

/* Set width and height and `v-calendar` will resize appropriately */
.my-day {
  width: 40px;
  height: 40px;
}
/* You can also apply your own hover styles */
.my-day:hover {
  background-color: #dadada;
}

You can get access to the following slot props:

Prop Type Description
day (opens new window) Object Object with various day info. Use the day.day number prop to display the day of month in your slot content.
attibutes Array List of attributes for this day.
contentStyle Object Content style to apply if you wish, derived from themeStyles.dayContent and other attributes.

# v0.9.6

# Bug Fixes

# v-date-picker

  • Fixes bug where calling slot method updateValue with formatInput: false was not working.
  • Rename update-on-input-keyup prop to simply update-on-input.

# defaults

  • Rename datePickerUpdateOnInputKeyup to simply datePickerUpdateOnInput.

# v0.9.7

# Bug Fixes

# v-calendar

  • Declares svg icons inline. Closes #126.
← v0.8 →