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 })"
  />
August 2019
S
M
T
W
T
F
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
31
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" />
August 2019
S
M
T
W
T
F
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
31
1
2
3
4
5
6
7

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

<v-calendar :locale="{ id: 'da', firstDayOfWeek: 2, masks: { weekdays: 'WW' } }" />
August 2019
Mo
Tu
We
Th
Fr
Sa
Su
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
31
1
2
3
4
5
6
7
8

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" />
August 2019
S
M
T
W
T
F
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
31
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.

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 documentation for more details.

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

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

Bug Fixes

  • Whitelist text/background/border hover class variants

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

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