V-Calendar

# v1.0.0-beta.0

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

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

Type Description
rows Number Number of calendar pane rows
columns Number Number of calendar pane columns

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 })"
  />
September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7

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" />
September 2023
M
T
W
T
F
S
S
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8

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

<v-calendar :locale="{ id: 'da', firstDayOfWeek: 2, masks: { weekdays: 'WW' } }" />
September 2023
Mo
Tu
We
Th
Fr
Sa
Su
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8

TIP

If firstDayOfWeek or masks are supplied as top level props, they will override those defined by the locale.

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" />
September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7

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.

WARNING

Nailing down the best approach to theming is in work!

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

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.

Type Default
visibility String
placement String Default placement for the popover. This could get change as the window resizes. Reference the Popper.js documentation (opens new window) documentation for more details.

TIP

Some examples of valid popover placements include

  • "bottom": Below reference, Center aligned
  • "bottom-start": Below reference, Left aligned
  • "top-end": Above reference, Right aligned
  • "left-start": Left of reference, Top aligned
  • "right-end": Right of reference, Bottom aligned

# Defaults Restructuring

# Modifications to Props & Events

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

# v-calendar

Deprecated Props Comments
is-double-paned Use rows and columns instead
is-vertical Use rows and columns instead
is-linked Calendar panes are now always linked
title-transition Now tied to transition prop
weeks-transition Now tied to transition prop
pane-width Use the new theme prop or just plain CSS
theme-styles Use the new theme prop or just plain CSS
formats Replaced by the masks prop
Deprecated Events Description
daymouseover Use daymouseenter instead
Added Props Comments
rows Number of calendar rows to display
columns Number of calendar columns to display
step Number of months to step when navigating forwards and backwards. This defaults to rows * columns.
transition Transition type for calendar panes when navigating to a new page ("slide-h": Horizontal slide, "slide-v": Vertical slide, "fade", "none")
from-date Date used to compute from-page
to-date Date used to compute to-page
min-date Date used to compute min-page
max-date Date used to computed max-page
color Sets color for the theme (gray, yellow, orange, red, pink, purple, indigo, blue, teal, green). You can also specify the theme color via the theme prop.
is-dark Sets dark mode for the current theme
masks Replaces the formats prop

# v-date-picker

Deprecated Props Comments
date-formatter Formatting is performed by the configured locale.
date-parser Parsing is performed by the configured locale.
tint-color Replaced by the color prop or a configured theme object.
show-caps Caps are now configured by the highlights fillMode.
show-popover The previously included popover has been removed from the core library.
popover-direction This has been replaced by the placement property of the added popover prop.
popover-align This has been replaced by the placement property of the added popover prop.
popover-content-style Replaced by the configured theme.
popover-expanded There is no concept of an expanded popover anymore.
popover-show-clear-margin All popovers are now absolute positioned.
Added Props Comments
input-debounce Number of milliseconds to debounce before updating the date picker value after the input value changes. Only applies when is-inline === false and updateOnInput === true.
popover Configuration object for the input/custom slot popover.

# 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 many 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

# v1.0.0-beta.14

# Bug Fixes

  • Fix min-date, max-date, disabled-dates and available-dates not refreshing when reassigned
  • Fix locale masks getting overwritten when provided as defaults

# Improvements

  • Support more date type parameters for the showPageRange() method

# v1.0.0-beta.15

# Bug Fixes

  • Fix pages cache not invalidating after locale updates

# Improvements

  • New accessibility features
    • Add aria-label html attributes to day, month, year navigation elements
    • Support day, month and year keyboard navigation using the following keys
      • Up, Down, Left and Right for moving days, months and years
      • Home and End for moving to first and last row elements
      • PageUp and PageDown for moving months
      • PageUp+Alt and PageDown+Alt for moving years
      • Space and Ender for selecting months and years in navigation popover
    • For date picker
      • Space and Enter for selecting days and modifying dragged selection in range mode
  • Convert all rem measurements to px to improve consistency across CSS frameworks and browsers

# v1.0.0-beta.16

# Improvements

  • Migrate from buttons to avoid default browser styling
  • Improve focus styles for navigation elements

# v1.0.0-beta.17

WARNING

This version was unpublished and should not be used.

# v1.0.0-beta.18

WARNING

This version was unpublished and should not be used.

# v1.0.0-beta.19

# Bug Fixes

  • Whitelist text/background/border hover class variants
  • Fix bug when dismissing popover after new date is selected
  • Fix bug where typed disabled dates wouldn't get cleared from input

# Improvements

  • Update Locale and Theme classes to improve testability
  • Added tests for locale and theme handling
  • Allow hover, focus and click events to support popovers for disabled days
  • Calling setupCalendar(opts) not required when importing components separately. If you wish to setup plugin defaults for all instances of v-calendar and v-date-picker, calling this function is still required, but importing it no longer includes the entire package.
  • Dynamically import components when using plugin to reduce initial bundle sizes

WARNING

As of this time, Webpack can't resolve chunks for dynamic imports from within 3rd party packages.

# v-date-picker

  • Added back in popover show/hide events
  • popoverWillShow: Called just before picker popover transitions into view
  • popoverDidShow: Called just after picker popover has transitioned into view
  • popoverWillHide: Called just before picker popover transitions out of view
  • popoverDidHide: Called just after picker popover has transitioned out of view

# v1.0.0-beta.20

# Bug Fixes

  • Fix locking bug when trying to use keyboard to navigate to disabled pages
  • Remove border styles from vc-reset class

# Improvements

  • Pin navigation popover to bottom position
  • Adjust theme settings for container and date picker input

# v1.0.0-beta.21

# Improvements

  • Improve tab handling for date picker
  • Add positionFixed option for date picker and attribute popovers to overcome containers with overlay: hidden

# v1.0.0-beta.22

  • Fix popover bug with focus visibility

# v1.0.0-beta.23

# Bug Fixes

  • Fix bug when setting end: null for complex dates. Closes #431.
  • Fix random navigation arrow glitches in Chrome when paging via keyboard.

# Improvements

  • New move method with flexible parameters and asynchronous support
  • Remove use of Array spread for improved Babel support
  • Remove default input styling for dark mode. Closes #450.
  • Close popovers on escape

# v1.0.0

  • Merge next into master 🎉 🎉 🎉

# v1.0.1

# Bug Fixes

  • Fix merge bug that affected input updates

# v1.0.2

# Improvements

  • Export helper classes and methods from lib.js
  • Removes unnecessary z-index from calendar arrows

# Bug Fixes

  • Allows entering ISO-8601 formatted dates in date picker

# v1.0.3

# Bug Fixes

  • Fix helpers and touch exports

# v1.0.4

# Improvements

  • Bumps various packages to fix security vulnerabilities
  • Adds Hebrew, Norwegian, Spanish and Vietnam locales
  • Prevent flashing and double-tap zooming in Mobile Safari

# Bug Fixes

  • Fix Finnish locale

# v1.0.5

# Bug Fixes

  • Fix day focus while preventing double-tap zooming

# v1.0.6

# Bug Fixes

  • Fix first day of week setting for Spanish (Mexican) locales

# v1.0.7

# Bug Fixes

  • Fix use of ::v-deep that cause border overlap with popovers
  • Fix various issues related to library export

# Improvements

  • Add South Africa, Estonian, Latvian and Lithuanian locales
  • Decrease popover hide delay to 250ms
  • Update lodash

# v1.0.8

# Improvements

  • Support case-insensitive matches for supplied locale
← v0.9 →