- Hi! 👋 I'm Nathan, the
- creator and maintainer of V-Calendar. I started this project because I
- wanted a simple, yet flexible, way to use attributed calendars and date
- pickers in my web applications and I thought it could help others save
- some time too!
-
-
-
-
-
-
-
- By sponsoring this project you can help ensure that this project continues
- to get the love it deserves, along with getting a shout-out in the list
- above.
-
-
-
-
-# V-Calendar
-
-### An elegant calendar and datepicker plugin for Vuejs.
-
-```bash
-npm i v-calendar
-```
-
-
-
-
-
-
-
-
-
-#### Popovers w/ Custom Slots
-
-
-
-
-
-[View example in GitHub](https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue)
-
-
diff --git a/docs/api/v1.0/README.md b/docs/api/v1.0/README.md
deleted file mode 100644
index 04d2f337f..000000000
--- a/docs/api/v1.0/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Overview
-
-:::warning
-This page is currently being updated.
-:::
-
-[Defaults](./defaults.md)
-
-[Calendar](./calendar.md)
- * [Props](./calendar.md#props)
- * [Events](./calendar.md#events)
- * [Methods](./calendar.md#methods)
- * [Scoped Slots](./calendar.md#scoped-slots)
-
-[Page Object](./page-object.md)
-
-[Day Object](./day-object.md)
-
-[Attribute](./attribute.md)
- * [Highlight](./attribute.mds#highlight)
- * [Dot](./attribute.md#dot)
- * [Bar](./attribute.md#bar)
- * [Popover](./attribute.md#popover)
- * [Content](./attribute.md#content)
-
-[Date Picker](./datepicker.md)
- * [Props](./datepicker.md#props)
- * [Events](./datepicker.md#events)
- * [Slots](./datepicker.md#slots)
-
-[Date Patterns](./date-patterns.html)
\ No newline at end of file
diff --git a/docs/api/v1.0/attribute.md b/docs/api/v1.0/attribute.md
deleted file mode 100644
index 995b07c8a..000000000
--- a/docs/api/v1.0/attribute.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: Attribute
-sidebarDepth: 2
----
-
-## Properties
-
-### `key`
-
-**Type:** String
-
-**Description:** Keys uniquely identify an attribute and may determine how animations are applied.
-
-**Default:** `index`
-
-### `dates`
-
-**Type:** Date, Object, Array[Date, Object]
-
-**Description:** Date or date range objects (patterns supported) to include for the attribute.
-
-**Default:** `undefined`
-
-### `excludeDates`
-
-**Type:** Date, Object, Array[Date, Object]
-
-**Description:** Date or date range objects (patterns supported) to exclude. All other dates are included.
-
-**Default:** `undefined`
-
-### `customData`
-
-**Type:** Any
-
-**Description:** Assign any custom data to this property for easy access within event handlers.
-
-**Default:** `undefined`
-
-### `order`
-
-**Type:** Number
-
-**Description:** Order that the attribute should be displayed. Higher numbers take precedence in appearance.
-
-**Default:** `0`
-
-
-
-### `highlight`
-
-**Type:** Boolean, String, Object
-
-**Description:** Configuration of higlight. If boolean, displays the highlight using the current color. If string, displays the highlight using the specified color. If object, uses the properties below.
-
-**Default:** `undefined`
-
-### `highlight.color`
-
-**Type:** String
-
-**Description:** Color.
-
-**Default:** `undefined`
-
-### `highlight.fillMode`
-
-**Type:** String
-
-**Description:** Color fill option (`solid`, `light`, `none`)
-
-**Default:** `solid`
-
-### `highlight.class`
-
-**Type:** String
-
-**Description:** Class to apply to the highlight background element. |
-
-**Default:** `''`
-
-### `highlight.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the highlight background element. |
-
-**Default:** `undefined`
-
-### `highlight.contentClass`
-
-**Type:** String
-
-**Description:** Class to apply to the highlight content element.
-
-**Default:** `''`
-
-### `highlight.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the highlight content element. |
-
-**Default:** `undefined`
-
-### `highlight.contentStyle`
-
-**Type:** Object
-
-**Description:** Style to apply to the highlight content element. |
-
-**Default:** `undefined`
-
-### `dot`
-
-**Type:** Boolean, String, Object
-
-**Description:** Configuration of dot. If boolean, displays the dot using the current color. If string, displays the dot using the specified color. If object, uses the properties below.
-
-**Default:** `undefined`
-
-### `dot.color`
-
-**Type:** String
-
-**Description:** Color.
-
-**Default:** `undefined`
-
-### `dot.class`
-
-**Type:** String
-
-**Description:** Class to apply to the dot element.
-
-**Default:** `undefined`
-
-### `dot.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the dot element.
-
-**Default:** `undefined`
-
-### `bar`
-
-**Type:** Boolean, String, Object
-
-**Description:** Configuration of bar. If boolean, displays the bar using the current color. If string, displays the bar using the specified color. If object, uses the properties below.
-
-**Default:** `undefined`
-
-### `bar.color`
-
-**Type:** String
-
-**Description:** Color.
-
-**Default:** `undefined`
-
-### `bar.class`
-
-**Type:** String
-
-**Description:** Class to apply to the bar element.
-
-**Default:** `undefined`
-
-### `bar.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the bar element.
-
-**Default:** `undefined`
-
-### `popover`
-
-**Type:** Object
-
-### `popover.label`
-
-**Type:** String
-
-**Description:** Text string to display in the popover content row.
-
-**Default:** `undefined`
-
-### `popover.labelClass`
-
-**Type:** String
-
-**Description:** Class to apply to the label.
-
-**Default:** `undefined`
-
-### `popover.labelStyle`
-
-**Type:** Object
-
-**Description:** Style to apply to the label.
-
-**Default:** `undefined`
-
-### `popover.hideIndicator`
-
-**Type:** Boolean
-
-**Description:** Hides the indicator symbol on the left side of the popover content row.
-
-**Default:** `false`
-
-### `popover.isInteractive`
-
-**Type:** Boolean
-
-**Description:** Determines if the user can interract with the popover content. Logically 'OR'ed with other popovers on the same day.
-
-**Default:** `false`
-
-### `popover.modifiers`
-
-**Type:** Array
-
-**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/).
-
-### `popover.placement`
-
-**Type:** String
-
-**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. Valid placements include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`.
-
-**Default:** `bottom-start`
-
-### `popover.positionFixed`
-
-**Type:** Boolean
-
-**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details.
-
-**Default:** `false`
-
-### `popover.visibility`
-
-**Type:** String
-
-**Description:** Visibility of the popover when this label or slot is displayed (`hover-focus`, `hover`, `focus`, `click`, `visible`, `hidden`).
-
-**Default:** `hover`
-
-
\ No newline at end of file
diff --git a/docs/api/v1.0/calendar.md b/docs/api/v1.0/calendar.md
deleted file mode 100644
index 8eccecee6..000000000
--- a/docs/api/v1.0/calendar.md
+++ /dev/null
@@ -1,505 +0,0 @@
----
-title: 'Calendar'
-sidebarDepth: 2
----
-
-## Props
-
-### `rows`
-
-**Type:** Number
-
-**Description:** Number of calendar rows to display.
-
-**Default:** `1`
-
-### `columns`
-
-**Type:** Number
-
-**Description:** Number of calendar columns to display.
-
-**Default:** `1`
-
-### `step`
-
-**Type:** Number
-
-**Description:** Number of months to step when navigating forwards and backwards.
-
-**Default:** `0` *Resolves to **n** if not provided, where `n = rows * columns`.*
-
-### `title-position`
-
-**Type:** String
-
-**Description:** Position of the header title (`"left"`, `"center"`, `"right"`).
-
-**Default:** `"center"`
-
-### `is-expanded`
-
-**Type:** Boolean
-
-**Description:** Expands calendar to fill the full width of its container.
-
-**Default:** `false`
-
-### `nav-visibility`
-
-**Type:** String
-
-**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`)
-
-**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#nav-visibility)
-
-### `transition`
-
-**Type:** String
-
-**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`).
-
-**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#transition)
-
-### `from-page`
-
-**Type:** Object
-
-**Description:** The page (month, year) for the first calendar pane located at row 0 and column 0. Use the `.sync` modifier for two-way binding.
-
-**Default:** `undefined` *Resolves to current month if not provided.*
-
-:::tip
-Use the `.sync` modifier for two-way binding.
-:::
-
-### `from-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `from-page`.
-
-**Default:** `undefined`
-
-:::warning
-The `.sync` modifier does not work with this prop, unlike `from-page`.
-:::
-
-### `to-page`
-
-**Type:** Object
-
-**Description:** The page (month, year) for the last calendar pane located at row *n* and column *n*, where *n* is the max dimension.
-
-**Default:** `undefined` *Resolves to **n** month if not provided, where `n = rows * columns`.*
-
-::: tip
-*Resolves to **n** month if not provided, where `n = rows * columns`.
-:::
-
-:::tip
-Use the `.sync` modifier for two-way binding.
-:::
-
-:::warning
-To avoid erratic navigation behavior, do not try to assign both `from-page` and `to-page` at the same time (just pick one).
-:::
-
-### `to-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `to-page`.
-
-**Default:** `undefined`
-
-:::warning
-The `.sync` modifier does not work with this prop, unlike `to-page`.
-:::
-
-### `min-page`
-
-**Type:** Object
-
-**Description:** Earliest page (month, year) that the user can navigate to.
-
-**Default:** `undefined`
-
-### `min-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `min-page`.
-
-**Default:** `undefined`
-
-### `max-page`
-
-**Type:** Object
-
-**Description:** Latest page (month, year) that the user can navigate to.
-
-**Default:** `undefined`
-
-### `max-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `max-page`.
-
-**Default:** `undefined`
-
-### `attributes`
-
-**Type:** Array[Object]
-
-**Description:** List of attributes to display in the calendar.
-
-**Default:** `[]`
-
-### `disabled-dates`
-
-**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md)
-
-**Description:** Dates that are disabled from user selection or navigation.
-
-**Default:** `null`
-
-### `available-dates`
-
-**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md)
-
-**Description:** Dates or date range objects that are available for selection or navigation. All other dates are disabled.
-
-**Default Value:** `undefined`
-
-### `masks`
-
-**Type:** Object
-
-**Description:** Masks to use when formatting and parsing dates for various calendar sections.
-
-**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#masks)
-
-### `color`
-
-**Type:** String
-
-**Description:** Color used for accents and attribute defaults.
-
-**Default:** `"blue"`
-
-### `is-dark`
-
-**Type:** Boolean
-
-**Description:** Dark mode setting.
-
-**Default:** `false`
-
-### `first-day-of-week`
-
-**Type:** Number
-
-**Description:** Day number for the first day of the week (1: Sun - 7: Sat). Ignore setting this prop if you want to allow the locale to determine this setting.
-
-**Default:** `undefined` [Resolved by locale if not specified](#locale)
-
-### `locale`
-
-**Type:** String, Object
-
-**Description:** The locale identifier or locale configuration to use for displaying the calendar.
-
-**Default:** `undefined` [Resolved by defaults or detected locale if not completely specified](./defaults.md#locale)
-
-### `disable-page-swipe`
-
-**Type:** Boolean
-
-**Description:** Disables swipe detection for navigating forwards and backwards.
-
-**Default:** `undefined`
-
-
-
-
-## Events
-
-### `update:from-page`
-
-**Description:** Calendar left/single pane moved to a different page.
-
-**Params:** [`page`](./page-object.md)
-
-### `update:to-page`
-
-**Description:** Calendar right pane moved to a different page.
-
-**Params:** [`page`](./page-object.md)
-
-### `dayclick`
-
-**Description:** Forwarded from the `mouseclick` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `daymouseenter`
-
-**Description:** Forwarded from the `mouseenter` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `daymouseleave`
-
-**Description:** Forwarded from the `mouseleave` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `dayfocusin`
-
-**Description:** Forwarded from the `focusin` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `dayfocusout`
-
-**Description:** Forwarded from the `focusout` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `transition-start`
-
-**Description:** Transition to new page has started.
-
-### `transition-end`
-
-**Description:** Transition to new page has ended.
-
-## Methods
-
-To call methods on a component, assign a ref and call the method any time on or after the `mounted` lifecycle hook.
-
-```html
-
-```
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Move forwards 5 months (wait for transition)
-await calendar.move(5)
-
-// Move backwards 5 months (wait for transition)
-await calendar.move(-5)
-```
-
-#### Move to month
-
-Moves to a given month by calling `move(month)` with an object with `month` and `year` keys.
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Moves to January, 1983
-await calendar.move({ month: 1, year: 1983 })
-```
-
-#### Move to a date
-
-Moves to a specified date.
-
-Calling `move(date)` with a **Date** object will move to that date.
-
-Calling `move(date)` with a **String** will move to the converted date.
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Moves to today's date
-await calendar.move(new Date())
-
-// Moves to my birthday
-await calendar.move(`1983-01-21`)
-```
-
-::: warning
-Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead.
-:::
-
-### `focusDate(String|Date)`
-
-#### Description
-
-Asynchronously navigates to the month for a given date and focuses on that day after transition is complete.
-
-```js
-async focusDate(date, opts) => Promise
-```
-
-#### Parameters
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| **date** | *Date* | Target date |
-| **opts** | *Object* | Set of navigation options |
-| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. |
-| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. |
-
-#### Returns
-
-A **Promise** that *resolves* when the transition is complete or *rejects* if target month(s) are disabled.
-
-
-### `showPageRange(Date|Object)`
-
-**Description:** Navigates to the calendar page(s) that best displays a given date range.
-
-```js
- ...
- const date = new Date(2020, 0, 1); // January, 2020
- const page = { month: 2, year: 2020 }; // February, 2020
- // Pass a date
- calendar.showPageRange(date);
- // Pass a page ({ month, year })
- calendar.showPageRange(page);
- // From a date or page
- calendar.showPageRange({ from: date });
- // To a date or page
- calendar.showPageRange({ to: page });
- // From a date or page to a date or page
- calendar.showPageRange({ from: date, to: page })
-```
-
-
-
-## Scoped Slots
-
-### `header`
-
-**Description:** Calendar header. Use slots below for specific header sections.
-
-**Props:** [`page` props](./page-object.md)
-
-### `header-title`
-
-**Description:** Calendar header title. This slot is animated if `title-transition` is assigned.
-
-**Props:** [`page` props](./page-object.md)
-
-### `day-content`
-
-**Description:** Calendar day content cell.
-
-**Props:**
-
-| Props | Type | Description |
-| --- | --- | --- |
-| `day` | [Day Object](./day-object.md) | Day object. |
-| `dayEvents` | Object | Events that should get mapped to your custom content DOM element. |
-| `attributes` | Array | List of ordered attributes for the day. |
-| `attributesMap` | Object | Object map of the attributes using their designated key. |
-
-### `day-popover`
-
-**Description:** Custom popover content for attributes.
-
-**Props:**
-
-| Props | Type | Description |
-| --- | --- | --- |
-| `day` | [Day Object](./day-object.md) | Day object. |
-| `attributes` | Array | List of ordered attributes with an assigned popover for the day. |
-| `masks` | Object | Resolved locale masks |
-| `format` | Function | Call to format a custom date and mask |
-| `dayTitle` | String | Pre-formatted string using the `dayPopover` mask |
-| `updateLayout` | Function | Call to forcefully update the popover layout (such as when content changes are made) |
-| `hide` | Function | Call to forcefully hide the popover |
-
-### `header-left-button`
-
-**Description:** Calendar header button on the left side for moving to the previous page(s).
-
-### `header-right-button`
-
-**Description:** Calendar header button on the right side for moving to the next page(s).
-
-### `nav-left-button`
-
-**Description:** Calendar navigation header button on the left side for moving to the previous page(s).
-
-### `nav-right-button`
-
-**Description:** Calendar navigation header button on the right side for moving to the next page(s).
-
-
diff --git a/docs/api/v1.0/date-patterns.md b/docs/api/v1.0/date-patterns.md
deleted file mode 100644
index c2a9d36b0..000000000
--- a/docs/api/v1.0/date-patterns.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Date Patterns
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Date Patterns
-
-### `days`
-
-**Type:** Number, Array
-
-**Description:** Day number from the start or end of the month.
-
-**Range:** 1 to 31, -1 to -31
-
-### `weekdays`
-
-**Type:** Number, Array
-
-**Description:** Day of the week.
-
-**Range:** 1: Sun to 7: Sat
-
-### `ordinalWeekdays`
-
-**Type:** Object (key: Number / value: Number, Array)
-
-**Description:** Weekday ordinal position from the start or end of the month.
-
-**Range:**
- * key: 1 to 6, -1 to -6
- * value: 1: Sun to 7: Sat
-
-### `weeks`
-
-**Type:** Number, Array
-
-**Description:** Week number from the start or end of the month.
-
-**Range:** 1 to 6, -1 to -6
-
-### `months`
-
-**Type:** Number, Array
-
-**Description:** Months of the year.
-
-**Range:** 1 to 12
-
-### `years`
-
-**Type:** Number, Array
-
-**Description:** Year numbers.
-
-**Range:** 4-digit integer
-
-### `dailyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of days from the start date (or today when no start date provided).
-
-**Range:** n > 0
-
-### `weeklyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of weeks from the start date (or today).
-
-**Range:** n > 0
-
-### `monthlyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of months from the start date (or today).
-
-**Range:** n > 0
-
-### `yearlyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of years from the start date (or today).
-
-**Range:** n > 0
diff --git a/docs/api/v1.0/datepicker.md b/docs/api/v1.0/datepicker.md
deleted file mode 100644
index 5c448a955..000000000
--- a/docs/api/v1.0/datepicker.md
+++ /dev/null
@@ -1,215 +0,0 @@
----
-title: 'Date Picker'
-sidebarDepth: 2
----
-
-::: tip
-`v-date-picker` supports all props, events and slots that are supported by `v-calendar` in addition to those listed below.
-:::
-
-
-## Props
-
-### `is-inline`
-
-**Type:** Boolean
-
-**Description:** Displays the calendar picker only (not as a popover).
-
-**Default:** `false`
-
-:::danger
-**`is-inline` deprecated in [`v2.0`](../v2.0)**
-:::
-
-### `mode`
-
-**Type:** String
-
-**Description:** Selection mode: `"single"`, `"multiple"`, `"range"`
-
-**Default:** `"single"`
-
-:::warning
-**`mode` modified in [`v2.0`](../v2.0)**
-:::
-
-### `value`
-
-**Type:** Date, Array[Date], Object
-
-**Description:** Selected date, dates or date range.
-
-**Default:** `null`
-
-:::warning
-**`value` modified in [`v2.0`](../v2.0)**
-:::
-
-### `is-required`
-
-**Type:** Boolean
-
-**Description:** Prevents the **user** from clearing the selected value.
-
-**Default:** `false`
-
-::: tip
-Setting `value = null` still allowed through code.
-:::
-
-### `input-props`
-
-**Type:** Object
-
-**Description:** Props to apply to the input DOM element.
-
-**Default:** [Reference code]()
-
-:::danger
-**`input-props` deprecated in [`v2.0`](../v2.0)**
-:::
-
-### `update-on-input`
-
-**Type:** Boolean
-
-**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event.
-
-**Default:** `true`
-
-### `input-debounce`
-
-**Type:** Number
-
-**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value.
-
-**Default:** `1000`
-
-### `drag-attribute`
-
-**Type:** Object
-
-**Description:** Attribute to use for the dragged selection in "range" mode. The `dates` property is ignored.
-
-**Default:** [Reference code]()
-
-### `select-attribute`
-
-**Type:** Object
-
-**Description:** Attribute to use for the value selection in all modes. The `dates` property is ignored.
-
-**Default:** [Reference code]()
-
-### `popover`
-
-**Type:** Object
-
-**Description:** Properties of the popover to apply for the calendar component.
-
-**Default:** [Reference code](./defaults.md)
-
-### `popover.keepVisibleOnInput`
-
-**Type:** Boolean
-
-**Description:** Keep the popover visible after a date is selected (only applies for `mode: 'date'`), until the `visibility` determines that it should hide again.
-
-### `popover.modifiers`
-
-**Type:** Array
-
-**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/).
-
-**Default:** `undefined`
-
-### `popover.placement`
-
-**Type:** String
-
-**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. [Valid placements](https://popper.js.org/popper-documentation.html#Popper.placements) include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`.
-
-**Default:** `bottom-start`
-
-### `popover.positionFixed`
-
-**Type:** Boolean
-
-**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details.
-
-**Default:** `false`
-
-### `popover.visibility`
-
-**Type:** String
-
-**Description:** Visibility mode for the input/slot popover (`hover-focus`, `hover`, `focus`, `visible`, `hidden`)
-
-**Default:** `hover-focus`
-
-
-
-## Events
-
-### `input`
-
-**Description:** New date was selected.
-
-**Params:** `value: Date, Array[Date], Object`
-
-### `drag`
-
-**Description:** Dragged selection was updated. Only valid when `mode === "range"`
-
-**Params:** `range: Object`
-
-### `popoverWillShow`
-
-**Description:** Called just before picker popover transitions into view
-
-**Params:** `Object`: Popover content root HTML element.
-
-### `popoverDidShow`
-
-**Description:** Called just after picker popover has transitioned into view
-
-**Params:** `Object`: Popover content root HTML element.
-
-### `popoverWillHide`
-
-**Description:** Called just before picker popover transitions out of view
-
-**Params:** `Object`: Popover content root HTML element.
-
-### `popoverDidHide`
-
-**Description:** Called just after picker popover has transitioned out of view
-
-**Params:** `Object`: Popover content root HTML element.
-
-
-
-## Scoped Slots
-
-### *`default`*
-
-**Description:** Default slot to use as the popover anchor for v-date-picker. [[1]](#dp-slots-note-1) Not applicable to inline date pickers.
-
-**Props:**
-
-Reference the section on using [custom slots](../datepicker.md#use-custom-slot) for available props.
diff --git a/docs/api/v1.0/day-object.md b/docs/api/v1.0/day-object.md
deleted file mode 100644
index ef82a760a..000000000
--- a/docs/api/v1.0/day-object.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: 'Day Object'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Properties
-
-### `day`
-
-**Type:** Number
-
-**Description:** Day number (1 - 31).
-
-### `dayFromEnd`
-
-**Type:** Number
-
-**Description:** Day number from the end of the month (1 - 31).
-
-### `weekday`
-
-**Type:** Number
-
-**Description:** Day weekday number (1:Sun - 7:Sat).
-
-### `weekdayOrdinal`
-
-**Type:** Number
-
-**Description:** Weekday ordinal position from the start of the month (1 - 6).
-
-### `weekdayOrdinalFromEnd`
-
-**Type:** Number
-
-**Description:** Weekday ordinal position from the end of the month (1 - 6).
-
-### `week`
-
-**Type:** Number
-
-**Description:** Week number form the start of the month (1 - 6).
-
-### `weekFromEnd`
-
-**Type:** Number
-
-**Description:** Week number from the end of the month (1 - 6).
-
-### `month`
-
-**Type:** Number
-
-**Description:** Month number (1 - 12).
-
-### `year`
-
-**Type:** Number
-
-**Description:** Year number.
-
-### `date`
-
-**Type:** Date
-
-**Description:** Date for this day.
-
-### `dateTime`
-
-**Type:** Number
-
-**Description:** Result of calling `date.getTime()` for this day.
-
-### `inMonth`
-
-**Type:** Boolean
-
-**Description:** Day lies in the currently active month.
-
-### `inPrevMonth`
-
-**Type:** Boolean
-
-**Description:** Day lies in the month before the currently active month.
-
-### `inNextMonth`
-
-**Type:** Boolean
-
-**Description:** Day lies in the month after the currently active month.
-
-### `attributes`
-
-**Type:** Array
-
-**Description:** List of attributes for the day involved with the event.
-
-### `attributesMap`
-
-**Type:** Object
-
-**Description:** Object map of the attributes using their designated key.
-
-### `event`
-
-**Type:** Object
-
-**Description:** Original event that triggered the event.
-
-
diff --git a/docs/api/v1.0/defaults.md b/docs/api/v1.0/defaults.md
deleted file mode 100644
index 999357fa5..000000000
--- a/docs/api/v1.0/defaults.md
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: 'Defaults'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Properties
-
-### `componentPrefix`
-
-**Type:** String
-
-**Description:** Custom prefix to use for plugin components. Replace if `v-calendar` and `v-date-picker` interfere with other component libraries.
-
-**Default:** `"v"`
-
-### `titlePosition`
-
-**Type:** String
-
-**Description:** Position of the title in the header (`"left"`, `"center"`, `"right"`)
-
-**Default:** `"center"`
-
-### `navVisibility`
-
-**Type:** String
-
-**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`)
-
-**Default:** `"focus"`
-
-### `transition`
-
-**Type:** String
-
-**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`).
-
-**Default:** `"slide-h"` when `row === 1 && column === 1`, `"fade"` otherwise.
-
-### `masks`
-
-**Type:** Object
-
-**Description:** Masks to use when display and parsing dates for various calendar sections.
-
-**Default:**
-```js
-{
- title: 'MMMM YYYY',
- weekdays: 'W',
- navMonths: 'MMM',
- input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
- dayPopover: 'WWW, MMM D, YYYY',
- data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
-}
-```
-
-
-### `screens`
-
-**Type:** Object
-
-**Description:** Screen size breakpoints to use to obtain responsive layouts by calling the `$screens` function.
-
-**Default:**
-```js
-{
- "sm": "640px",
- "md": "768px",
- "lg": "1024px",
- "xl": "1280px"
-}
-```
-
-### `locale`
-
-**Type:** String, Object
-
-**Description:** Locale identification string in [*language-region*](https://lingohub.com/documentation/developers/supported-locales/language-designators-with-regions/) format, or set of locale configuration properties if object is provided.
-
-**Default:** `undefined`
-
-### `locales`
-
-**Type:** Object
-
-**Description:** Use this object if your locales are missing or you wish to override specific settings for existing locales. The key should match the locale identifier ('en-US') and the value may optionally include any of the following property settings:
-
-| Setting | Description |
-| --- | --- |
-| `firstDayOfWeek` | The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully). |
-| `masks` | Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more. |
-
-**Default:**
-
-### `datePicker`
-
-**Type:** Object
-
-**Description:** Defaults applied for date picker *only*.
-
-**Default:** *Reference below for default values*
-
-### `datePicker.updateOnInput`
-
-**Type:** Boolean
-
-**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event.
-
-**Default Value:** `true`
-
-### `datePicker.inputDebounce`
-
-**Type:** Number
-
-**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value.
-
-**Default Value:** `1000`
-
-
-### `datePicker.popover`
-
-**Type:** Object
-
-**Description:** Properties of the popover to apply for the calendar component. Not applicable for inline pickers.
-
-**Default Value:** *Reference below for default values.*
-
-### `datePicker.popover.visibility`
-
-**Type:** String
-
-**Description:** Visibility state of the popover (`"hover-focus"`, `"hover"`, `"focus"`, `"click"`, `"visible"`, `"hidden"`)
-
-**Default:** `"hover-focus"`
-
-### `datePicker.popover.keepVisibleOnInput`
-
-**Type:** Boolean
-
-**Description:** Keep the popover visible after a valid input has been selected
-
-**Default:** `false`
-
-### `datePicker.popover.placement`
-
-**Type:** String
-
-**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change.
-
-**Default:** `"bottom"`
-
-### `touch`
-
-**Type:** Object
-
-**Description:** Defaults applied for touch swipes
-
-**Default:** *Reference below for default values*
-
-### `touch.maxSwipeTime`
-
-**Type:** Number
-
-**Description:** Maximum time in milliseconds allowed for a swipe gesture to complete
-
-**Default:** `300`
-
-### `touch.minHorizontalSwipeDistance`
-
-**Type:** Number
-
-**Description:** Minimum distance in pixels allowed for a horizontal swipe gesture
-
-**Default:** `60`
-
-### `touch.maxVerticalSwipeDistance`
-
-**Type:** Number
-
-**Description:** Maximum distance in pixels allowed for a horizontal swipe gesture
-
-**Default:** `80`
-
-
diff --git a/docs/api/v1.0/page-object.md b/docs/api/v1.0/page-object.md
deleted file mode 100644
index a082174f9..000000000
--- a/docs/api/v1.0/page-object.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: 'Page Object'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## `position`
-
-**Type:** Number
-
-**Description:** Position of the the pane that contains this page (`0`: single-paned, `1`: double-paned, left side, `2`: double-paned, right side).
-
-## `month`
-
-**Type:** Number
-
-**Description:** Page month number.
-
-## `year`
-
-**Type:** Number
-
-**Description:** Page year number.
-
-## `monthLabel`
-
-**Type:** String
-
-**Description:** Page month label as specified by the `monthLabels` prop or locale settings.
-
-## `shortMonthLabel`
-
-**Type:** String
-
-**Description:** Shortened month label as specified by the `shortMonthLabels` prop or locale settings.
-
-## `yearLabel`
-
-**Type:** String
-
-**Description:** Page year label in YYYY format.
-
-## `shortYearLabel`
-
-**Type:** String
-
-**Description:** Page year label in YY format.
-
-## `monthComps`
-
-**Type:** Object
-
-**Description:** Components of the current page month.
-
-## `prevMonthComps`
-
-**Type:** Object
-
-**Description:** Components of the previous page month.
-
-## `nextMonthComps`
-
-**Type:** Object
-
-**Description:** Components of the next page page.
-
-## `canMove(Object) => Boolean`
-
-**Type:** Function
-
-**Description:** Function that determines if calendar can move to a desired page (due to `min-page` or `max-page` setting).
-
-## `move(Object)`
-
-**Type:** Function
-
-**Description:** Function that moves to the specified page.
-
-## `moveThisMonth()`
-
-**Type:** Function
-
-**Description:** Function that moves to the page for today's month.
-
-## `movePrevMonth()`
-
-**Type:** Function
-
-**Description:** Function that moves to the page for the previous month.
-
-## `moveNextMonth()`
-
-**Type:** Function
-
-**Description:** Function that moves to the page for the next month.
-
-
diff --git a/docs/api/v1.0/theme-styles.md b/docs/api/v1.0/theme-styles.md
deleted file mode 100644
index e244f447e..000000000
--- a/docs/api/v1.0/theme-styles.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-title: 'Theme Styles'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## `wrapper`
-
-**Target Area:**
-Wrapper for both single and double-paned calendars.
-
-**Default:**
-```js
-{
- backgroundColor: '#fafafa',
- border: '1px solid #dadada'
-}
-```
-
-
-## `verticalDivider`
-
-**Target Area:**
-Vertical divider that appears between calendar panes.
-
-**Default:**
-```js
-{
- borderLeft: '1px solid #dadada'
-}
-```
-
-
-## `horizontalDivider`
-
-**Target Area:**
-Horizontal divider that appears between calendar panes.
-
-**Default:**
-```js
-{
- borderTop: '1px solid #dadada'
-}
-```
-
-
-## `header`
-
-**Target Area:**
-Header section that encapsulates arrows and title. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `headerTitle`
-
-**Target Area:**
-Header title. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `headerArrows`
-**Target Area:**
-Header arrows that can be styled just like a font. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `headerHorizontalDivider`
-
-**Target Area:**
-Horizontal divider that appears just below header section.
-
-**Default:**
-`null`
-
-
-## `weekdays`
-
-**Target Area:**
-Weekday section that encapsulates all the weekday labels. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `weekdaysHorizontalDivider`
-
-**Target Area:**
-Horizontal divider that appears just below weekdays section.
-
-**Default:**
-`null`
-
-
-## `weeks`
-
-**Target Area:**
-Weeks section that encapsulate all the days of the month. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `dayCell`
-
-**Target Area:**
-Day cell that contains day content and any associated attributes.
-
-**Default:**
-`null`
-
-
-## `dayContent`
-
-**Target Area:**
-Content area within the day cell that contains the day of the month number. [[2]](#themes-note-2)
-
-**Default:**
-`null`
-
-
-## `dayPopoverContent`
-
-**Target Area:**
-Popover container for attribute popover labels and slot content.
-
-**Default:**
-```javascript
-{
- color: '#333333',
- fontSize: '.8rem',
- whiteSpace: 'nowrap'
-}
-```
-
-
-## `dots`
-
-**Target Area:**
-Container for dot indicators.
-
-**Default:**
-`null`
-
-
-## `bars`
-
-**Target Area:**
-Container for bar indicators.
-
-**Default:**
-`null`
-
-
-## `navHeader`
-
-**Target Area:**
-Navigation pane header.
-
-**Default:**
-`null`
-
-## `navHeaderArrows`
-
-**Target Area:**
-Navigation header arrows.
-
-**Default:**
-`null`
-
-## `navHeaderTitle`
-
-**Target Area:**
-Navigation header title.
-
-**Default:**
-`null`
-
-
-## `navMonthCell`
-
-**Target Area:**
-Navigation month cells. [[3]](#themes-note-3)
-
-**Default:**
-`null`
-
-
-## `navYearCell`
-
-**Target Area:**
-Navigation year cells. [[3]](#themes-note-3)
-
-**Default:**
-`null`
-
-
-
-
-::: tip [1]
-As of v0.9.0, you can use functions to define the `header`, `headerTitle`, `headerArrows`, `weekdays` and `weeks` styles. Functions should accept a [`page`](./page-object.md) object and return a configured style.
-:::
-
-::: tip [2]
-As of v0.8.0, the `dayContentHover` style has been deprecated and you can optionally use a function to define the `dayContent` style. This function should accept an object parameter with the following properties (`isHovered`, `isFocused`, [`day`](./day-object.md)). This function should return the configured style.
-:::
-
-::: tip [3]
-As of v0.9.0, you can use functions to define the `navMonthCell` and `navYearCell` styles. Functions should accept a [`nav-month-item`](#nav-month-item-properties) object and [`nav-year-item`](#nav-year-item-properties) object, respectively.
-
-#### `nav-month-item` Properties
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| `month` | Number | Month number of the cell. |
-| `label` | String | Formatted month label per the [`masks`](#calendar-props) prop. |
-| `is-active` | Boolean | Month is selected, or active. |
-| `is-disabled` | Boolean | Month is disabled (ie. not selectable). |
-
-#### `nav-year-item` Properties
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| `year` | Number | Year number of the cell. |
-| `is-active` | Boolean | Year is selected, or active. |
-| `is-disabled` | Boolean | Year is disabled (ie. not selectable). |
-:::
\ No newline at end of file
diff --git a/docs/api/v2.0/README.md b/docs/api/v2.0/README.md
deleted file mode 100644
index 04d2f337f..000000000
--- a/docs/api/v2.0/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Overview
-
-:::warning
-This page is currently being updated.
-:::
-
-[Defaults](./defaults.md)
-
-[Calendar](./calendar.md)
- * [Props](./calendar.md#props)
- * [Events](./calendar.md#events)
- * [Methods](./calendar.md#methods)
- * [Scoped Slots](./calendar.md#scoped-slots)
-
-[Page Object](./page-object.md)
-
-[Day Object](./day-object.md)
-
-[Attribute](./attribute.md)
- * [Highlight](./attribute.mds#highlight)
- * [Dot](./attribute.md#dot)
- * [Bar](./attribute.md#bar)
- * [Popover](./attribute.md#popover)
- * [Content](./attribute.md#content)
-
-[Date Picker](./datepicker.md)
- * [Props](./datepicker.md#props)
- * [Events](./datepicker.md#events)
- * [Slots](./datepicker.md#slots)
-
-[Date Patterns](./date-patterns.html)
\ No newline at end of file
diff --git a/docs/api/v2.0/attribute.md b/docs/api/v2.0/attribute.md
deleted file mode 100644
index 178edbc5f..000000000
--- a/docs/api/v2.0/attribute.md
+++ /dev/null
@@ -1,304 +0,0 @@
----
-title: Attribute
-sidebarDepth: 2
----
-
-## Properties
-
-### `key`
-
-**Type:** String
-
-**Description:** Keys uniquely identify an attribute and may determine how animations are applied.
-
-**Default:** `index`
-
-### `dates`
-
-**Type:** Date, Object, Array[Date, Object]
-
-**Description:** Date or date range objects (patterns supported) to include for the attribute.
-
-**Default:** `undefined`
-
-### `excludeDates`
-
-**Type:** Date, Object, Array[Date, Object]
-
-**Description:** Date or date range objects (patterns supported) to exclude. All other dates are included.
-
-**Default:** `undefined`
-
-### `customData`
-
-**Type:** Any
-
-**Description:** Assign any custom data to this property for easy access within event handlers.
-
-**Default:** `undefined`
-
-### `order`
-
-**Type:** Number
-
-**Description:** Order that the attribute should be displayed. Higher numbers take precedence in appearance.
-
-**Default:** `0`
-
-
-
-### `highlight`
-
-**Type:** Boolean, String, Object
-
-**Description:** Configuration of higlight. If boolean, displays the highlight using the current color. If string, displays the highlight using the specified color. If object, uses the properties below.
-
-**Default:** `undefined`
-
-### `highlight.color`
-
-**Type:** String
-
-**Description:** Color.
-
-**Default:** `undefined`
-
-### `highlight.fillMode`
-
-**Type:** String
-
-**Description:** Color fill option (`solid`, `light`, `outline`)
-
-:::warning
-The `none` option for `fillMode` is still available but will be deprecated in the next major release in favor of the more descriptive `outline` option.
-:::
-
-**Default:** `solid`
-
-### `highlight.class`
-
-**Type:** String
-
-**Description:** Class to apply to the highlight background element. |
-
-**Default:** `''`
-
-### `highlight.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the highlight background element. |
-
-**Default:** `undefined`
-
-### `highlight.contentClass`
-
-**Type:** String
-
-**Description:** Class to apply to the highlight content element.
-
-**Default:** `''`
-
-### `highlight.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the highlight content element. |
-
-**Default:** `undefined`
-
-### `highlight.contentStyle`
-
-**Type:** Object
-
-**Description:** Style to apply to the highlight content element. |
-
-**Default:** `undefined`
-
-### `dot`
-
-**Type:** Boolean, String, Object
-
-**Description:** Configuration of dot. If boolean, displays the dot using the current color. If string, displays the dot using the specified color. If object, uses the properties below.
-
-**Default:** `undefined`
-
-### `dot.color`
-
-**Type:** String
-
-**Description:** Color.
-
-**Default:** `undefined`
-
-### `dot.class`
-
-**Type:** String
-
-**Description:** Class to apply to the dot element.
-
-**Default:** `undefined`
-
-### `dot.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the dot element.
-
-**Default:** `undefined`
-
-### `bar`
-
-**Type:** Boolean, String, Object
-
-**Description:** Configuration of bar. If boolean, displays the bar using the current color. If string, displays the bar using the specified color. If object, uses the properties below.
-
-**Default:** `undefined`
-
-### `bar.color`
-
-**Type:** String
-
-**Description:** Color.
-
-**Default:** `undefined`
-
-### `bar.class`
-
-**Type:** String
-
-**Description:** Class to apply to the bar element.
-
-**Default:** `undefined`
-
-### `bar.style`
-
-**Type:** Object
-
-**Description:** Style to apply to the bar element.
-
-**Default:** `undefined`
-
-### `popover`
-
-**Type:** Object
-
-### `popover.label`
-
-**Type:** String
-
-**Description:** Text string to display in the popover content row.
-
-**Default:** `undefined`
-
-### `popover.labelClass`
-
-**Type:** String
-
-**Description:** Class to apply to the label.
-
-**Default:** `undefined`
-
-### `popover.labelStyle`
-
-**Type:** Object
-
-**Description:** Style to apply to the label.
-
-**Default:** `undefined`
-
-### `popover.hideDelay`
-
-*Introduced in `v2.1.0`*
-
-**Type:** Number
-
-**Description:** Number of milliseconds to delay the popover when hiding. After this delay, the popover transition will start if `popover.transition` is not `none` or ``.
-
-**Default:** 110
-
-### `popover.hideIndicator`
-
-**Type:** Boolean
-
-**Description:** Hides the indicator symbol on the left side of the popover content row.
-
-**Default:** `false`
-
-### `popover.isInteractive`
-
-**Type:** Boolean
-
-**Description:** Determines if the user can interract with the popover content. Logically 'OR'ed with other popovers on the same day.
-
-**Default:** `false`
-
-### `popover.modifiers`
-
-**Type:** Array
-
-**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/).
-
-**Default:** `undefined`
-
-### `popover.placement`
-
-**Type:** String
-
-**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. Valid placements include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`.
-
-**Default:** `bottom-start`
-
-### `popover.positionFixed`
-
-**Type:** Boolean
-
-**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details.
-
-**Default:** `false`
-
-### `popover.showDelay`
-
-*Introduced in `v2.1.0`*
-
-**Type:** Number
-
-**Description:** Number of milliseconds to delay the popover when showing. After this delay, the popover transition will start if `popover.transition` is not `none` or ``.
-
-**Default:** 0
-
-### `popover.transition`
-
-*Introduced in `v2.1.0`*
-
-**Type:** String
-
-**Description:** Transition to use when displaying the popover (`slide-fade`, `fade`, `none` or ``).
-
-**Default:** `slide-fade`
-
-### `popover.visibility`
-
-**Type:** String
-
-**Description:** Visibility of the popover when this label or slot is displayed (`hover-focus`, `hover`, `focus`, `click`, `visible`, `hidden`).
-
-**Default:** `"hover"`
-
-
\ No newline at end of file
diff --git a/docs/api/v2.0/calendar.md b/docs/api/v2.0/calendar.md
deleted file mode 100644
index 10d2e5576..000000000
--- a/docs/api/v2.0/calendar.md
+++ /dev/null
@@ -1,513 +0,0 @@
----
-title: 'Calendar'
-sidebarDepth: 2
----
-
-## Props
-
-### `rows`
-
-**Type:** Number
-
-**Description:** Number of calendar rows to display.
-
-**Default:** `1`
-
-### `columns`
-
-**Type:** Number
-
-**Description:** Number of calendar columns to display.
-
-**Default:** `1`
-
-### `step`
-
-**Type:** Number
-
-**Description:** Number of months to step when navigating forwards and backwards.
-
-**Default:** `0` *Resolves to **n** if not provided, where `n = rows * columns`.*
-
-### `title-position`
-
-**Type:** String
-
-**Description:** Position of the header title (`"left"`, `"center"`, `"right"`).
-
-**Default:** `"center"`
-
-### `is-expanded`
-
-**Type:** Boolean
-
-**Description:** Expands calendar to fill the full width of its container.
-
-**Default:** `false`
-
-### `nav-visibility`
-
-**Type:** String
-
-**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`)
-
-**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#nav-visibility)
-
-### `transition`
-
-**Type:** String
-
-**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`).
-
-**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#transition)
-
-### `from-page`
-
-**Type:** Object
-
-**Description:** The page (month, year) for the first calendar pane located at row 0 and column 0. Use the `.sync` modifier for two-way binding.
-
-**Default:** `undefined` *Resolves to current month if not provided.*
-
-:::tip
-Use the `.sync` modifier for two-way binding.
-:::
-
-### `from-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `from-page`.
-
-**Default:** `undefined`
-
-:::warning
-The `.sync` modifier does not work with this prop, unlike `from-page`.
-:::
-
-### `to-page`
-
-**Type:** Object
-
-**Description:** The page (month, year) for the last calendar pane located at row *n* and column *n*, where *n* is the max dimension.
-
-**Default:** `undefined` *Resolves to **n** month if not provided, where `n = rows * columns`.*
-
-::: tip
-*Resolves to **n** month if not provided, where `n = rows * columns`.
-:::
-
-:::tip
-Use the `.sync` modifier for two-way binding.
-:::
-
-:::warning
-To avoid erratic navigation behavior, do not try to assign both `from-page` and `to-page` at the same time (just pick one).
-:::
-
-### `to-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `to-page`.
-
-**Default:** `undefined`
-
-:::warning
-The `.sync` modifier does not work with this prop, unlike `to-page`.
-:::
-
-### `min-page`
-
-**Type:** Object
-
-**Description:** Earliest page (month, year) that the user can navigate to.
-
-**Default:** `undefined`
-
-### `min-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `min-page`.
-
-**Default:** `undefined`
-
-### `max-page`
-
-**Type:** Object
-
-**Description:** Latest page (month, year) that the user can navigate to.
-
-**Default:** `undefined`
-
-### `max-date`
-
-**Type:** Date
-
-**Description:** Date used to compute `max-page`.
-
-**Default:** `undefined`
-
-### `attributes`
-
-**Type:** Array[Object]
-
-**Description:** List of attributes to display in the calendar.
-
-**Default:** `[]`
-
-### `disabled-dates`
-
-**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md)
-
-**Description:** Dates that are disabled from user selection or navigation.
-
-**Default:** `null`
-
-### `available-dates`
-
-**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md)
-
-**Description:** Dates or date range objects that are available for selection or navigation. All other dates are disabled.
-
-**Default Value:** `undefined`
-
-### `masks`
-
-**Type:** Object
-
-**Description:** Masks to use when formatting and parsing dates for various calendar sections.
-
-**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#masks)
-
-### `color`
-
-**Type:** String
-
-**Description:** Color used for accents and attribute defaults.
-
-**Default:** `"blue"`
-
-### `is-dark`
-
-**Type:** Boolean
-
-**Description:** Dark mode setting.
-
-**Default:** `false`
-
-### `first-day-of-week`
-
-**Type:** Number
-
-**Description:** Day number for the first day of the week (1: Sun - 7: Sat). Ignore setting this prop if you want to allow the locale to determine this setting.
-
-**Default:** `undefined` [Resolved by locale if not specified](#locale)
-
-### `locale`
-
-**Type:** String, Object
-
-**Description:** The locale identifier or locale configuration to use for displaying the calendar.
-
-**Default:** `undefined` [Resolved by defaults or detected locale if not completely specified](./defaults.md#locale)
-
-### `timezone` :tada:
-
-**Type:** String
-
-**Description:** The timezone identifier to use for displaying the calendar. Use [this list](https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript) as a tentative guide of available timezones. Use `UTC` for Coordinated Universal Time.
-
-**Default:** `undefined` [Resolved by defaults or detected timezone if not completely specified](./defaults.md#locale)
-
-### `disable-page-swipe`
-
-**Type:** Boolean
-
-**Description:** Disables swipe detection for navigating forwards and backwards.
-
-**Default:** `undefined`
-
-
-
-
-## Events
-
-### `update:from-page`
-
-**Description:** Calendar left/single pane moved to a different page.
-
-**Params:** [`page`](./page-object.md)
-
-### `update:to-page`
-
-**Description:** Calendar right pane moved to a different page.
-
-**Params:** [`page`](./page-object.md)
-
-### `dayclick`
-
-**Description:** Forwarded from the `mouseclick` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `daymouseenter`
-
-**Description:** Forwarded from the `mouseenter` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `daymouseleave`
-
-**Description:** Forwarded from the `mouseleave` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `dayfocusin`
-
-**Description:** Forwarded from the `focusin` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `dayfocusout`
-
-**Description:** Forwarded from the `focusout` event for the day content element.
-
-**Params:** [`day`](./day-object.md)
-
-### `transition-start`
-
-**Description:** Transition to new page has started.
-
-### `transition-end`
-
-**Description:** Transition to new page has ended.
-
-## Methods
-
-To call methods on a component, assign a ref and call the method any time on or after the `mounted` lifecycle hook.
-
-```html
-
-```
-
-```js
-...
-mounted() {
- // Get reference to the calendar component
- const calendar = this.$refs.calendar;
- // Call method of the component
- calendar.showPageRange(new Date());
-}
-...
-```
-
-### `move(Number|String|Date|Object)`
-
-#### Description
-
-Asynchronously navigates by a given number of months, to a given month or to a given date.
-
-```js
-async move(arg, opts) => Promise
-```
-
-#### Parameters
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| **arg** | **Number*, *Date*, *String* or Page *Object* | Target month criteria |
-| **opts** | *Object* | Set of navigation options |
-| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. |
-| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. |
-| **opts.force** | *Boolean* | Force navigation even if the target months(s) are disabled |
-
-#### Returns
-
-A **Promise** that *resolves* when the transition to the new set of month(s) is complete or *rejects* if target month(s) are disabled.
-
-#### Move by number of months
-
-Moves a given number of months forwards or backwards.
-
-Calling `move(num)` with a **positive** number will move **forwards** by a given number of months.
-
-Calling `move(num)` with a **negative** number will move **backwards** by a given number of months.
-
-```html
-
-```
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Move forwards 5 months (wait for transition)
-await calendar.move(5)
-
-// Move backwards 5 months (wait for transition)
-await calendar.move(-5)
-```
-
-#### Move to month
-
-Moves to a given month by calling `move(month)` with an object with `month` and `year` keys.
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Moves to January, 1983
-await calendar.move({ month: 1, year: 1983 })
-```
-
-#### Move to a date
-
-Moves to a specified date.
-
-Calling `move(date)` with a **Date** object will move to that date.
-
-Calling `move(date)` with a **String** will move to the converted date.
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Moves to today's date
-await calendar.move(new Date())
-
-// Moves to my birthday
-await calendar.move(`1983-01-21`)
-```
-
-::: warning
-Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead.
-:::
-
-### `focusDate(String|Date)`
-
-#### Description
-
-Asynchronously navigates to the month for a given date and focuses on that day after transition is complete.
-
-```js
-async focusDate(date, opts) => Promise
-```
-
-#### Parameters
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| **date** | *Date* | Target date |
-| **opts** | *Object* | Set of navigation options |
-| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. |
-| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. |
-
-#### Returns
-
-A **Promise** that *resolves* when the transition is complete or *rejects* if target month(s) are disabled.
-
-
-### `showPageRange(Date|Object)`
-
-**Description:** Navigates to the calendar page(s) that best displays a given date range.
-
-```js
- ...
- const date = new Date(2020, 0, 1); // January, 2020
- const page = { month: 2, year: 2020 }; // February, 2020
- // Pass a date
- calendar.showPageRange(date);
- // Pass a page ({ month, year })
- calendar.showPageRange(page);
- // From a date or page
- calendar.showPageRange({ from: date });
- // To a date or page
- calendar.showPageRange({ to: page });
- // From a date or page to a date or page
- calendar.showPageRange({ from: date, to: page })
-```
-
-
-
-## Scoped Slots
-
-### `header`
-
-**Description:** Calendar header. Use slots below for specific header sections.
-
-**Props:** [`page` props](./page-object.md)
-
-### `header-title`
-
-**Description:** Calendar header title. This slot is animated if `title-transition` is assigned.
-
-**Props:** [`page` props](./page-object.md)
-
-### `day-content`
-
-**Description:** Calendar day content cell.
-
-**Props:**
-
-| Props | Type | Description |
-| --- | --- | --- |
-| `day` | [Day Object](./day-object.md) | Day object. |
-| `dayEvents` | Object | Events that should get mapped to your custom content DOM element. |
-| `attributes` | Array | List of ordered attributes for the day. |
-| `attributesMap` | Object | Object map of the attributes using their designated key. |
-
-### `day-popover`
-
-**Description:** Custom popover content for attributes.
-
-**Props:**
-
-| Props | Type | Description |
-| --- | --- | --- |
-| `day` | [Day Object](./day-object.md) | Day object. |
-| `attributes` | Array | List of ordered attributes with an assigned popover for the day. |
-| `masks` | Object | Resolved locale masks |
-| `format` | Function | Call to format a custom date and mask |
-| `dayTitle` | String | Pre-formatted string using the `dayPopover` mask |
-| `updateLayout` | Function | Call to forcefully update the popover layout (such as when content changes are made) |
-| `hide` | Function | Call to forcefully hide the popover |
-
-### `header-left-button`
-
-**Description:** Calendar header button on the left side for moving to the previous page(s).
-
-### `header-right-button`
-
-**Description:** Calendar header button on the right side for moving to the next page(s).
-
-### `nav-left-button`
-
-**Description:** Calendar navigation header button on the left side for moving to the previous page(s).
-
-### `nav-right-button`
-
-**Description:** Calendar navigation header button on the right side for moving to the next page(s).
-
-
diff --git a/docs/api/v2.0/date-patterns.md b/docs/api/v2.0/date-patterns.md
deleted file mode 100644
index c2a9d36b0..000000000
--- a/docs/api/v2.0/date-patterns.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Date Patterns
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Date Patterns
-
-### `days`
-
-**Type:** Number, Array
-
-**Description:** Day number from the start or end of the month.
-
-**Range:** 1 to 31, -1 to -31
-
-### `weekdays`
-
-**Type:** Number, Array
-
-**Description:** Day of the week.
-
-**Range:** 1: Sun to 7: Sat
-
-### `ordinalWeekdays`
-
-**Type:** Object (key: Number / value: Number, Array)
-
-**Description:** Weekday ordinal position from the start or end of the month.
-
-**Range:**
- * key: 1 to 6, -1 to -6
- * value: 1: Sun to 7: Sat
-
-### `weeks`
-
-**Type:** Number, Array
-
-**Description:** Week number from the start or end of the month.
-
-**Range:** 1 to 6, -1 to -6
-
-### `months`
-
-**Type:** Number, Array
-
-**Description:** Months of the year.
-
-**Range:** 1 to 12
-
-### `years`
-
-**Type:** Number, Array
-
-**Description:** Year numbers.
-
-**Range:** 4-digit integer
-
-### `dailyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of days from the start date (or today when no start date provided).
-
-**Range:** n > 0
-
-### `weeklyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of weeks from the start date (or today).
-
-**Range:** n > 0
-
-### `monthlyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of months from the start date (or today).
-
-**Range:** n > 0
-
-### `yearlyInterval`
-
-**Type:** Number
-
-**Description:** Interval number of years from the start date (or today).
-
-**Range:** n > 0
diff --git a/docs/api/v2.0/datepicker.md b/docs/api/v2.0/datepicker.md
deleted file mode 100644
index 948f6c19c..000000000
--- a/docs/api/v2.0/datepicker.md
+++ /dev/null
@@ -1,278 +0,0 @@
----
-title: 'Date Picker'
-sidebarDepth: 2
----
-
-::: tip
-`v-date-picker` supports all props, events and slots that are supported by `v-calendar` in addition to those listed below.
-:::
-
-
-## Props
-
-### `mode`
-
-**Type:** String
-
-**Description:** Selection mode: `"date"`, `"dateTime"`, `"time"`
-
-**Default:** `"single"`
-
-### `value`
-
-**Type:** Date, Object
-
-**Description:** Selected date or date range.
-
-**Default:** `null`
-
-### `is-range`
-
-**Type:** Boolean
-
-**Description:** Date value is a date range object.
-
-**Default:** `false`
-
-### `is24hr`
-
-**Type:** Boolean
-
-**Description:** Use 24-hr time picker and input format.
-
-**Default:** `false`
-
-### `minute-increment`
-
-**Type:** Number
-
-**Description:** Increment amount for the minute `select` options.
-
-**Default:** 1
-
-### `is-required`
-
-**Type:** Boolean
-
-**Description:** Prevents the **user** from clearing the selected value.
-
-**Default:** `false`
-
-::: tip
-Setting `value = null` still allowed through code.
-:::
-
-### `update-on-input`
-
-**Type:** Boolean
-
-**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event.
-
-**Default:** `true`
-
-### `input-debounce`
-
-**Type:** Number
-
-**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value.
-
-**Default:** `1000`
-
-### `drag-attribute`
-
-**Type:** Object
-
-**Description:** Attribute to use for the dragged selection in "range" mode. The `dates` property is ignored.
-
-**Default:** [Reference code]()
-
-### `select-attribute`
-
-**Type:** Object
-
-**Description:** Attribute to use for the value selection in all modes. The `dates` property is ignored.
-
-**Default:** [Reference code]()
-
-### `popover`
-
-**Type:** Object
-
-**Description:** Properties of the popover to apply for the calendar component.
-
-**Default:** [Reference code](./defaults.md)
-
-### `popover.hideDelay`
-
-*Introduced in `v2.1.0`*
-
-**Type:** Number
-
-**Description:** Amount of milliseconds to delay the popover when hiding. After this delay, the popover transition will start if `popover.transition` is not `none` or ``.
-
-**Default:** 0
-
-### `popover.keepVisibleOnInput`
-
-**Type:** Boolean
-
-**Description:** Keep the popover visible after a date is selected (only applies for `mode: 'date'`), until the `visibility` determines that it should hide again.
-
-### `popover.modifiers`
-
-**Type:** Array
-
-**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/).
-
-**Default:** `undefined`
-
-### `popover.placement`
-
-**Type:** String
-
-**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. [Valid placements](https://popper.js.org/popper-documentation.html#Popper.placements) include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`.
-
-**Default:** `bottom-start`
-
-### `popover.positionFixed`
-
-**Type:** Boolean
-
-**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details.
-
-**Default:** `false`
-
-### `popover.showDelay`
-
-*Introduced in `v2.1.0`*
-
-**Type:** Number
-
-**Description:** Amount of milliseconds to delay the popover when showing. After this delay, the popover transition will start if `popover.transition` is not `none` or ``.
-
-**Default:** 0
-
-### `popover.transition`
-
-**Type:** String
-
-**Description:** Transition to use when displaying the popover (`slide-fade`, `fade`, `none` or ``).
-
-**Default:** `slide-fade`
-
-### `popover.visibility`
-
-**Type:** String
-
-**Description:** Visibility mode for the input/slot popover (`hover-focus`, `hover`, `focus`, `visible`, `hidden`)
-
-**Default:** `hover-focus`
-
-## Methods
-
-To call methods on a component, assign a ref and call the method any time on or after the `mounted` lifecycle hook.
-
-```html
-
-```
-
-```js
-...
-mounted() {
- // Get reference to the date picker component
- const datepicker = this.$refs.datepicker;
- // Call method of the component
- datepicker.move(new Date());
-}
-...
-```
-
-### `move(Number|String|Date|Object)`
-
-#### Description
-
-Asynchronously navigates by a given number of months, to a given month or to a given date.
-
-This calls the [`Calendar.move`](./calendar.md#move-number-string-date-object) method under the hood.
-
-```js
-async move(arg, opts) => Promise
-```
-
-### `focusDate(String|Date)`
-
-#### Description
-
-Asynchronously navigates to the month for a given date and focuses on that day after transition is complete.
-
-This calls the [`Calendar.focusDate`](./calendar.md#focusdate-string-date) method under the hood.
-
-```js
-async focusDate(date, opts) => Promise
-```
-
-
-
-## Events
-
-### `input`
-
-**Description:** New date was selected.
-
-**Params:** `value: Date, Array[Date], Object`
-
-### `drag`
-
-**Description:** Dragged selection was updated. Only valid when `mode === "range"`
-
-**Params:** `range: Object`
-
-### `popoverWillShow`
-
-**Description:** Called just before picker popover transitions into view
-
-**Params:** `Object`: Popover content root HTML element.
-
-### `popoverDidShow`
-
-**Description:** Called just after picker popover has transitioned into view
-
-**Params:** `Object`: Popover content root HTML element.
-
-### `popoverWillHide`
-
-**Description:** Called just before picker popover transitions out of view
-
-**Params:** `Object`: Popover content root HTML element.
-
-### `popoverDidHide`
-
-**Description:** Called just after picker popover has transitioned out of view
-
-**Params:** `Object`: Popover content root HTML element.
-
-
-
-## Scoped Slots
-
-### *`default`*
-
-**Description:** Default slot to use as the popover anchor for v-date-picker. [[1]](#dp-slots-note-1) Not applicable to inline date pickers.
-
-**Props:**
-
-Reference the section on using [custom slots](../datepicker.md#use-custom-slot) for available props.
diff --git a/docs/api/v2.0/day-object.md b/docs/api/v2.0/day-object.md
deleted file mode 100644
index ef82a760a..000000000
--- a/docs/api/v2.0/day-object.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: 'Day Object'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Properties
-
-### `day`
-
-**Type:** Number
-
-**Description:** Day number (1 - 31).
-
-### `dayFromEnd`
-
-**Type:** Number
-
-**Description:** Day number from the end of the month (1 - 31).
-
-### `weekday`
-
-**Type:** Number
-
-**Description:** Day weekday number (1:Sun - 7:Sat).
-
-### `weekdayOrdinal`
-
-**Type:** Number
-
-**Description:** Weekday ordinal position from the start of the month (1 - 6).
-
-### `weekdayOrdinalFromEnd`
-
-**Type:** Number
-
-**Description:** Weekday ordinal position from the end of the month (1 - 6).
-
-### `week`
-
-**Type:** Number
-
-**Description:** Week number form the start of the month (1 - 6).
-
-### `weekFromEnd`
-
-**Type:** Number
-
-**Description:** Week number from the end of the month (1 - 6).
-
-### `month`
-
-**Type:** Number
-
-**Description:** Month number (1 - 12).
-
-### `year`
-
-**Type:** Number
-
-**Description:** Year number.
-
-### `date`
-
-**Type:** Date
-
-**Description:** Date for this day.
-
-### `dateTime`
-
-**Type:** Number
-
-**Description:** Result of calling `date.getTime()` for this day.
-
-### `inMonth`
-
-**Type:** Boolean
-
-**Description:** Day lies in the currently active month.
-
-### `inPrevMonth`
-
-**Type:** Boolean
-
-**Description:** Day lies in the month before the currently active month.
-
-### `inNextMonth`
-
-**Type:** Boolean
-
-**Description:** Day lies in the month after the currently active month.
-
-### `attributes`
-
-**Type:** Array
-
-**Description:** List of attributes for the day involved with the event.
-
-### `attributesMap`
-
-**Type:** Object
-
-**Description:** Object map of the attributes using their designated key.
-
-### `event`
-
-**Type:** Object
-
-**Description:** Original event that triggered the event.
-
-
diff --git a/docs/api/v2.0/defaults.md b/docs/api/v2.0/defaults.md
deleted file mode 100644
index 999357fa5..000000000
--- a/docs/api/v2.0/defaults.md
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: 'Defaults'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Properties
-
-### `componentPrefix`
-
-**Type:** String
-
-**Description:** Custom prefix to use for plugin components. Replace if `v-calendar` and `v-date-picker` interfere with other component libraries.
-
-**Default:** `"v"`
-
-### `titlePosition`
-
-**Type:** String
-
-**Description:** Position of the title in the header (`"left"`, `"center"`, `"right"`)
-
-**Default:** `"center"`
-
-### `navVisibility`
-
-**Type:** String
-
-**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`)
-
-**Default:** `"focus"`
-
-### `transition`
-
-**Type:** String
-
-**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`).
-
-**Default:** `"slide-h"` when `row === 1 && column === 1`, `"fade"` otherwise.
-
-### `masks`
-
-**Type:** Object
-
-**Description:** Masks to use when display and parsing dates for various calendar sections.
-
-**Default:**
-```js
-{
- title: 'MMMM YYYY',
- weekdays: 'W',
- navMonths: 'MMM',
- input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
- dayPopover: 'WWW, MMM D, YYYY',
- data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
-}
-```
-
-
-### `screens`
-
-**Type:** Object
-
-**Description:** Screen size breakpoints to use to obtain responsive layouts by calling the `$screens` function.
-
-**Default:**
-```js
-{
- "sm": "640px",
- "md": "768px",
- "lg": "1024px",
- "xl": "1280px"
-}
-```
-
-### `locale`
-
-**Type:** String, Object
-
-**Description:** Locale identification string in [*language-region*](https://lingohub.com/documentation/developers/supported-locales/language-designators-with-regions/) format, or set of locale configuration properties if object is provided.
-
-**Default:** `undefined`
-
-### `locales`
-
-**Type:** Object
-
-**Description:** Use this object if your locales are missing or you wish to override specific settings for existing locales. The key should match the locale identifier ('en-US') and the value may optionally include any of the following property settings:
-
-| Setting | Description |
-| --- | --- |
-| `firstDayOfWeek` | The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully). |
-| `masks` | Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more. |
-
-**Default:**
-
-### `datePicker`
-
-**Type:** Object
-
-**Description:** Defaults applied for date picker *only*.
-
-**Default:** *Reference below for default values*
-
-### `datePicker.updateOnInput`
-
-**Type:** Boolean
-
-**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event.
-
-**Default Value:** `true`
-
-### `datePicker.inputDebounce`
-
-**Type:** Number
-
-**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value.
-
-**Default Value:** `1000`
-
-
-### `datePicker.popover`
-
-**Type:** Object
-
-**Description:** Properties of the popover to apply for the calendar component. Not applicable for inline pickers.
-
-**Default Value:** *Reference below for default values.*
-
-### `datePicker.popover.visibility`
-
-**Type:** String
-
-**Description:** Visibility state of the popover (`"hover-focus"`, `"hover"`, `"focus"`, `"click"`, `"visible"`, `"hidden"`)
-
-**Default:** `"hover-focus"`
-
-### `datePicker.popover.keepVisibleOnInput`
-
-**Type:** Boolean
-
-**Description:** Keep the popover visible after a valid input has been selected
-
-**Default:** `false`
-
-### `datePicker.popover.placement`
-
-**Type:** String
-
-**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change.
-
-**Default:** `"bottom"`
-
-### `touch`
-
-**Type:** Object
-
-**Description:** Defaults applied for touch swipes
-
-**Default:** *Reference below for default values*
-
-### `touch.maxSwipeTime`
-
-**Type:** Number
-
-**Description:** Maximum time in milliseconds allowed for a swipe gesture to complete
-
-**Default:** `300`
-
-### `touch.minHorizontalSwipeDistance`
-
-**Type:** Number
-
-**Description:** Minimum distance in pixels allowed for a horizontal swipe gesture
-
-**Default:** `60`
-
-### `touch.maxVerticalSwipeDistance`
-
-**Type:** Number
-
-**Description:** Maximum distance in pixels allowed for a horizontal swipe gesture
-
-**Default:** `80`
-
-
diff --git a/docs/api/v2.0/page-object.md b/docs/api/v2.0/page-object.md
deleted file mode 100644
index a082174f9..000000000
--- a/docs/api/v2.0/page-object.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: 'Page Object'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## `position`
-
-**Type:** Number
-
-**Description:** Position of the the pane that contains this page (`0`: single-paned, `1`: double-paned, left side, `2`: double-paned, right side).
-
-## `month`
-
-**Type:** Number
-
-**Description:** Page month number.
-
-## `year`
-
-**Type:** Number
-
-**Description:** Page year number.
-
-## `monthLabel`
-
-**Type:** String
-
-**Description:** Page month label as specified by the `monthLabels` prop or locale settings.
-
-## `shortMonthLabel`
-
-**Type:** String
-
-**Description:** Shortened month label as specified by the `shortMonthLabels` prop or locale settings.
-
-## `yearLabel`
-
-**Type:** String
-
-**Description:** Page year label in YYYY format.
-
-## `shortYearLabel`
-
-**Type:** String
-
-**Description:** Page year label in YY format.
-
-## `monthComps`
-
-**Type:** Object
-
-**Description:** Components of the current page month.
-
-## `prevMonthComps`
-
-**Type:** Object
-
-**Description:** Components of the previous page month.
-
-## `nextMonthComps`
-
-**Type:** Object
-
-**Description:** Components of the next page page.
-
-## `canMove(Object) => Boolean`
-
-**Type:** Function
-
-**Description:** Function that determines if calendar can move to a desired page (due to `min-page` or `max-page` setting).
-
-## `move(Object)`
-
-**Type:** Function
-
-**Description:** Function that moves to the specified page.
-
-## `moveThisMonth()`
-
-**Type:** Function
-
-**Description:** Function that moves to the page for today's month.
-
-## `movePrevMonth()`
-
-**Type:** Function
-
-**Description:** Function that moves to the page for the previous month.
-
-## `moveNextMonth()`
-
-**Type:** Function
-
-**Description:** Function that moves to the page for the next month.
-
-
diff --git a/docs/api/v2.0/theme-styles.md b/docs/api/v2.0/theme-styles.md
deleted file mode 100644
index e244f447e..000000000
--- a/docs/api/v2.0/theme-styles.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-title: 'Theme Styles'
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## `wrapper`
-
-**Target Area:**
-Wrapper for both single and double-paned calendars.
-
-**Default:**
-```js
-{
- backgroundColor: '#fafafa',
- border: '1px solid #dadada'
-}
-```
-
-
-## `verticalDivider`
-
-**Target Area:**
-Vertical divider that appears between calendar panes.
-
-**Default:**
-```js
-{
- borderLeft: '1px solid #dadada'
-}
-```
-
-
-## `horizontalDivider`
-
-**Target Area:**
-Horizontal divider that appears between calendar panes.
-
-**Default:**
-```js
-{
- borderTop: '1px solid #dadada'
-}
-```
-
-
-## `header`
-
-**Target Area:**
-Header section that encapsulates arrows and title. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `headerTitle`
-
-**Target Area:**
-Header title. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `headerArrows`
-**Target Area:**
-Header arrows that can be styled just like a font. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `headerHorizontalDivider`
-
-**Target Area:**
-Horizontal divider that appears just below header section.
-
-**Default:**
-`null`
-
-
-## `weekdays`
-
-**Target Area:**
-Weekday section that encapsulates all the weekday labels. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `weekdaysHorizontalDivider`
-
-**Target Area:**
-Horizontal divider that appears just below weekdays section.
-
-**Default:**
-`null`
-
-
-## `weeks`
-
-**Target Area:**
-Weeks section that encapsulate all the days of the month. [[1]](#themes-note-1)
-
-**Default:**
-`null`
-
-
-## `dayCell`
-
-**Target Area:**
-Day cell that contains day content and any associated attributes.
-
-**Default:**
-`null`
-
-
-## `dayContent`
-
-**Target Area:**
-Content area within the day cell that contains the day of the month number. [[2]](#themes-note-2)
-
-**Default:**
-`null`
-
-
-## `dayPopoverContent`
-
-**Target Area:**
-Popover container for attribute popover labels and slot content.
-
-**Default:**
-```javascript
-{
- color: '#333333',
- fontSize: '.8rem',
- whiteSpace: 'nowrap'
-}
-```
-
-
-## `dots`
-
-**Target Area:**
-Container for dot indicators.
-
-**Default:**
-`null`
-
-
-## `bars`
-
-**Target Area:**
-Container for bar indicators.
-
-**Default:**
-`null`
-
-
-## `navHeader`
-
-**Target Area:**
-Navigation pane header.
-
-**Default:**
-`null`
-
-## `navHeaderArrows`
-
-**Target Area:**
-Navigation header arrows.
-
-**Default:**
-`null`
-
-## `navHeaderTitle`
-
-**Target Area:**
-Navigation header title.
-
-**Default:**
-`null`
-
-
-## `navMonthCell`
-
-**Target Area:**
-Navigation month cells. [[3]](#themes-note-3)
-
-**Default:**
-`null`
-
-
-## `navYearCell`
-
-**Target Area:**
-Navigation year cells. [[3]](#themes-note-3)
-
-**Default:**
-`null`
-
-
-
-
-::: tip [1]
-As of v0.9.0, you can use functions to define the `header`, `headerTitle`, `headerArrows`, `weekdays` and `weeks` styles. Functions should accept a [`page`](./page-object.md) object and return a configured style.
-:::
-
-::: tip [2]
-As of v0.8.0, the `dayContentHover` style has been deprecated and you can optionally use a function to define the `dayContent` style. This function should accept an object parameter with the following properties (`isHovered`, `isFocused`, [`day`](./day-object.md)). This function should return the configured style.
-:::
-
-::: tip [3]
-As of v0.9.0, you can use functions to define the `navMonthCell` and `navYearCell` styles. Functions should accept a [`nav-month-item`](#nav-month-item-properties) object and [`nav-year-item`](#nav-year-item-properties) object, respectively.
-
-#### `nav-month-item` Properties
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| `month` | Number | Month number of the cell. |
-| `label` | String | Formatted month label per the [`masks`](#calendar-props) prop. |
-| `is-active` | Boolean | Month is selected, or active. |
-| `is-disabled` | Boolean | Month is disabled (ie. not selectable). |
-
-#### `nav-year-item` Properties
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| `year` | Number | Year number of the cell. |
-| `is-active` | Boolean | Year is selected, or active. |
-| `is-disabled` | Boolean | Year is disabled (ie. not selectable). |
-:::
\ No newline at end of file
diff --git a/docs/attributes.md b/docs/attributes.md
deleted file mode 100644
index f14c328ea..000000000
--- a/docs/attributes.md
+++ /dev/null
@@ -1,674 +0,0 @@
----
-title: 'Attributes'
-sidebarDepth: 2
----
-
-# Attributes
-
-Attributes are what bring `v-calendar` to life. They are simply visual decorators that can be applied to specific calendar dates.
-
-
-
-Attributes are defined as an array of objects (each object is a separate attribute).
-
-A single attribute may be displayed for single dates, date ranges and even complex date patterns. Some examples of complex patterns include:
-* Every other Friday
-* 15th of every month
-* Last Friday of every other month.
-
-Here is the basic structure of attributes:
-
-```html
-
-```
-
-```js
-...
-data() {
- return {
- // Attributes are supplied as an array
- attributes: [
- // This is a single attribute
- {
- // An optional key can be used for retrieving this attribute later,
- // and will most likely be derived from your data object
- key: Any,
- // Attribute type definitions
- highlight: true, // Boolean, String, Object
- dot: true, // Boolean, String, Object
- bar: true, // Boolean, String, Object
- content: 'red', // Boolean, String, Object
- popover: { ... }, // Only objects allowed
- // Your custom data object for later access, if needed
- customData: { ... },
- // We also need some dates to know where to display the attribute
- // We use a single date here, but it could also be an array of dates,
- // a date range or a complex date pattern.
- dates: new Date(),
- // You can optionally provide dates to exclude
- excludeDates: null,
- // Think of `order` like `z-index`
- order: 0
- }
- ];
- }
-}
-```
-
-### Using `customData`
-
-The `customData` property is used to link your own custom data object to the attribute. This is useful when handling events or providing custom slot content. For example, if a user clicks on a calendar day that is displaying the attribute, you might want to have some data associated with that attribute.
-
-### Using `order`
-
-By default, attributes are ordered to display the most information possible. For example, when attributes with highlighted regions overlap, single date regions appear above date range regions, and date ranges with a later start date appear above those with an earlier start date.
-
-
-
-
-
-If you would like to force an attribute to display above (or before) all others and override these rules, assign an order value greater than 0.
-
-## Quick Guide
-
-Let's start by displaying a simple **highlight** on today's date.
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- attrs: [
- {
- key: 'today',
- highlight: true,
- dates: new Date(),
- },
- ],
- };
- },
-};
-```
-
-For the simple example above, we used the following properties to build the attribute:
-
-| Property | Description |
-| --- | --- |
-| **`key`** | Uniquely identifies the attribute. This will come in handy later. |
-| **`highlight`** | Config for the highlighted region displayed on each date. |
-| **`dates`** | Dates used to display the attribute. |
-
-:::tip
-When simply assigning `true` to the highlight config (or any other attribute except popovers), the currently active [`color`](/api/calendar#color) is used to display it. In this example, the `color` prop is not specified, so the default `color` (`"blue"`) and `fillMode` (`"solid"`) are used.
-:::
-
-Here is how the default dot config would appear.
-
-
-
-```js
-export default {
- data() {
- return {
- attrs: [
- {
- key: 'today',
- dot: true,
- dates: new Date(),
- },
- ],
- };
- },
-};
-```
-
-## Colors
-
-There are 8 pre-defined color sets available (`gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `indigo`, `purple`, `pink`).
-
-As mentioned above, if a color is not specifically assigned to an attribute, the `color` prop passed to the component is used. If this color is not provided, the default `blue` color is used.
-
-All attributes, except popovers, may be assigned directly to a color.
-
-
-
-```js
-export default {
- data() {
- return {
- attrs: [
- {
- key: 'today',
- highlight: 'red',
- dates: new Date(),
- },
- ],
- };
- },
-};
-```
-
-Additionally, when an object is used to configure an attribute, the `color` property may be assigned as part of that configuration.
-
-Click to learn more about the custom properties for [highlights](#highlights), [dots](#dots), [bars](#bars) and [popovers](#popovers).
-
-## Highlights
-
-As mentioned before, highlights may be assigned a boolean, string or object value.
-
-```js
-// Uses the active color (default blue)
-highlight: true
-
-// Uses the red color
-highlight: 'red'
-
-// Configuration object
-highlight: {
- color: 'orange',
- fillMode: 'light',
-}
-```
-
-These are all the configuration options you may use for further highlight customization:
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `color` | String | Color. |
-| `fillMode` | String | Color fill option: `solid` (default), `light`, `outline`. |
-| `class` | String | Class to apply to the highlight background element. |
-| `style` | Object | Style to apply to the highlight background element. |
-| `contentClass` | String | Class to apply to the highlight content element. |
-| `contentStyle` | Object | Style to apply to the highlight content element. |
-
-:::warning
-The `none` option for `fillMode` is still available but will be deprecated in the next major release in favor of the more descriptive `outline` option.
-:::
-
-Here is an example using each of the three fill mode types (`solid`, `light` and `outline`, respectively).
-
-
-
-```html
-
-```
-
-```js
-data() {
- const date = new Date();
- const year = date.getFullYear();
- const month = date.getMonth();
- return {
- attrs: [
- {
- key: 'today',
- highlight: {
- color: 'purple',
- fillMode: 'solid',
- contentClass: 'italic',
- },
- dates: new Date(year, month, 12),
- },
- {
- highlight: {
- color: 'purple',
- fillMode: 'light',
- },
- dates: new Date(year, month, 13),
- },
- {
- highlight: {
- color: 'purple',
- fillMode: 'outline',
- },
- dates: new Date(year, month, 14),
- },
- ],
- };
-},
-```
-
-You may also target the `start`, `base` and `end` sections of the highlight with different configurations.
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- attrs: [
- {
- highlight: {
- start: { fillMode: 'outline' },
- base: { fillMode: 'light' },
- end: { fillMode: 'outline' },
- },
- dates: { start: new Date(2019, 0, 14), end: new Date(2019, 0, 18) },
- },
- ],
- };
- },
-};
-```
-
-## Dots
-
-Dots may be assigned a boolean, string or object value.
-
-```js
-// Uses the active color (default blue)
-dot: true
-
-// Uses the red color
-dot: 'red'
-
-// Configuration object
-dot: {
- style: {
- backgroundColor: 'brown',
- }
-}
-```
-
-These are the additional configuration options you may use for further dot customization:
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `color` | String | Color. |
-| `class` | String | Class to apply to the dot element. |
-| `style` | Object | Style to apply to the dot element. |
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- attributes: [
- {
- dot: true,
- dates: [
- new Date(2018, 0, 1), // Jan 1st
- new Date(2018, 0, 10), // Jan 10th
- new Date(2018, 0, 22), // Jan 22nd
- ],
- },
- {
- dot: 'red',
- dates: [
- new Date(2018, 0, 4), // Jan 4th
- new Date(2018, 0, 10), // Jan 10th
- new Date(2018, 0, 15), // Jan 15th
- ],
- },
- {
- dot: {
- style: {
- background-color: 'brown',
- },
- },
- dates: [
- new Date(2018, 0, 12), // Jan 12th
- new Date(2018, 0, 26), // Jan 26th
- new Date(2018, 0, 15), // Jan 15th
- ],
- },
- ],
- };
- },
-};
-```
-
-## Bars
-
-Bars may be assigned a boolean, string or object value. When more than one bar is dislayed per calendar day, they are equally spaced amongst each other. As a result, it might be a good idea to limit displaying up to 2 to 3 bars per day cell, as legibility can suffer.
-
-```js
-// Uses the active color (default blue)
-bar: true
-
-// Uses the red color
-bar: 'red'
-
-// Configuration object
-bar: {
- style: {
- backgroundColor: 'brown',
- }
-}
-```
-
-These are the additional configuration options you may use for further bar customization:
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `color` | String | Color. |
-| `class` | String | Class to apply to the bar element. |
-| `style` | Object | Style to apply to the bar element. |
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- attributes: [
- {
- bar: true,
- dates: [
- new Date(2018, 0, 1), // Jan 1st
- new Date(2018, 0, 10), // Jan 10th
- new Date(2018, 0, 22), // Jan 22nd
- ],
- },
- {
- bar: 'red',
- dates: [
- new Date(2018, 0, 4), // Jan 4th
- new Date(2018, 0, 10), // Jan 10th
- new Date(2018, 0, 15), // Jan 15th
- ],
- },
- {
- bar: {
- style: {
- backgroundColor: 'brown',
- },
- },
- dates: [
- new Date(2018, 0, 12), // Jan 12th
- new Date(2018, 0, 26), // Jan 26th
- new Date(2018, 0, 15), // Jan 15th
- ],
- },
- ],
- };
- },
-};
-```
-
-## Popovers
-
-There are 2 basic approaches to displaying popovers within attributes.
-
-### 1. Labels
-
-Labels are the basic tooltip-style popover. They are configured as simple strings. By default, these popovers display when the user hovers over the day content and additionaly are not interactive to the user.
-
-
-
-```html
-
-
-
-```
-
-```js
-export default {
- data() {
- const todos = [
- {
- description: 'Take Noah to basketball practice.',
- isComplete: false,
- dates: { weekdays: 6 }, // Every Friday
- color: 'red',
- },
- ];
- return {
- incId: todos.length,
- todos,
- };
- },
- computed: {
- attributes() {
- return [
- // Attributes for todos
- ...this.todos.map(todo => ({
- dates: todo.dates,
- dot: {
- color: todo.color,
- class: todo.isComplete ? 'opacity-75' : '',
- },
- popover: {
- label: todo.description,
- },
- customData: todo,
- })),
- ];
- },
- },
-};
-```
-
-For this example, we simply assigned a string to the `popover.label` property. This signals to `v-calendar` that it needs to display the label in a popover whenever the user hovers over the day content (or taps on mobile).
-
-If we want to force the user to click on the day content in order to display the popover, we can set the popover's `visibility` property to `"focus"` or `"click"`.
-
-
-
-```js
- ...
- popover: {
- label: todo.description,
- visibility: 'focus'
- }
- ...
-```
-
-
-
-```js
- ...
- popover: {
- label: todo.description,
- visibility: 'click'
- }
- ...
-```
-
-Also, you'll notice there is a small indicator next to the popover content row for the attribute. This is a simple indicator provided in order to help the user match up the popover content rows to the indicators in the calendar day cell. The indicator will try to coordinate the colors and shapes as closely as possible.
-
-In the previous example, because a red dot was used, the indicator displays the same.
-
-
-
-
-
-Here is how a bar or highlight would appear, respectively.
-
-
-
-
-
-
-If you would like to hide the indicator, just set the `hideIndicator` property to `true`;
-
-
-
-```js
- ...
- popover: {
- label: todo.description,
- visibility: 'hover',
- hideIndicator: true,
- }
- ...
-```
-
-### 2. Scoped Slot
-
-For a more customized approach you can insert your own `"day-popover"` custom scoped slot within `v-calendar`.
-
-::: tip
-If you are not familiar with the convention of using scoped slots in Vue.js, you can reference the [Vue docs](https://vuejs.org/v2/guide/components.html#Scoped-Slots) or [this post by alligator.io](https://alligator.io/vuejs/scoped-component-slots/).
-:::
-
-
-
-```html
-
-
-
- Using my own content now
-
-
-
-```
-
-```js
-// ...Continued from previous example
-export default {
- ...
- computed: {
- attributes() {
- return [
- // Attributes for todos
- ...this.todos.map(todo => ({
- dates: todo.dates,
- dot: {
- color: todo.color,
- class: todo.isComplete ? 'opacity-75' : '',
- },
- // We need to at least pass a truthy value for the popover to appear
- // Pass an object to customize popover settings like visibility, placement, etc.
- popover: true,
- customData: todo,
- })),
- ];
- },
- },
-}
-```
-
-Notice that displaying static content here probably isn't going to help you much.
-
-Now that you are providing your own popover, you need to display the attributes on your own. Fortunately, the following `slot-scope` props should provide you with everything you need to help you display content for your custom data.
-
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| `day` | Object | The [day object](/api/day-object.md) associated with the popover. |
-| `attributes` | Array | All the attributes assigned for the associated day. Only attributes with 'truthy' values assigned to their `popover` key are passed in. |
-| `format` | Function | Function for formatting dates. Accepts `date: Date` and `mask: String` arguments, respectively. |
-| `masks` | Object | Set of format masks for the calendar. |
-| `updateLayout` | Function | Call this function to force the popover to recalculate its layout. For example, making changes to elements within popover could cause it to grow or shrink. Calling this function will keep it positioned correctly. |
-| `hide` | Function | Call this function to forcefully hide the popover. |
-
-Let's walk through the process of customizing the previous example. First, let's add a header to display the date for the popover.
-
-
-
-```html
-
-
-
- {{ format(day.date, masks.dayPopover) }}
-
-
-
-```
-
-For the header, we use the `format` function to format the date for the current `day`, using the default `dayPopover` mask. Note: you could also just use your own custom mask.
-
-Because this technique for displaying the header is common, you can extract the pre-formatted `dayTitle` property.
-
-```html
-
-
-
- {{ dayTitle }}
-
-
-
-```
-
-Now, we just need to display the attributes for the day as well. We can do so by extracting the `attributes` array from the slot-scope expression. We'll use a simple list to display the attribute data.
-
-
-
-```html
-
-
-
- {{ dayTitle }}
-
-
-
- {{ customData.description }}
-
-
-
-
-```
-
-Finally, if you wish to display indicators with your custom content, you can use the `v-popover-row` component included with the plugin. Just pass in the attribute for each row.
-
-
-
-```html
-
-
-
-
- {{ dayTitle }}
-
-
- {{ attr.customData.description }}
-
-
-
-
-```
-
-```js
-// Import popover row component from plugin
-import PopoverRow from 'v-calendar/lib/components/popover-row.umd.min'
-
-export default {
- components: {
- PopoverRow,
- },
- ...
-}
-```
-
-### Additional Options
-
-Reference [API](api/v2.0/attribute.html#popover) for a complete list of popover options.
diff --git a/docs/calendar/api.md b/docs/calendar/api.md
new file mode 100644
index 000000000..bdb2e149c
--- /dev/null
+++ b/docs/calendar/api.md
@@ -0,0 +1,351 @@
+---
+title: 'API'
+---
+
+# API
+
+## Props
+
+| Name | Type | Default |
+| --- | --- | --- |
+| **view** | "weekly" \| "monthly"| "monthly" |
+| **attributes** | [AttributeConfig](#attributeconfig)[] | *undefined* |
+| **rows** | number | 1 |
+| **columns** | number | 1 |
+| **step** | number | *undefined* |
+| **color** | string | "blue" |
+| **is-dark** | boolean \| "system" \| [DarkModeClassConfig](#darkmodeclassconfig) | false |
+| **expanded** | boolean | false |
+| **borderless** | boolean | false |
+| **transparent** | boolean | false |
+| **first-day-of-week** | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 | 1 |
+| **nav-visibility** | "click" \| "hover" \| "hover-focus" \| "focus" | "click" |
+| **title-position** | "center" \| "left" \| "right" | "center" |
+| **transition** | "none" \| "fade" \| "slide-v" \| "slide-h" | "slide-h" |
+| **masks** | Record | [Default masks](#defaults) |
+| **locale** | string | *undefined* |
+| **timezone** | string | *undefined* |
+| **initial-page** | [PageAddress](#pageaddress) | *undefined* |
+| **initial-page-position** | number | 1 |
+| **min-page** | [PageAddress](#pageaddress) | *undefined* |
+| **max-page** | [PageAddress](#pageaddress) | *undefined* |
+| **min-date** | Date | *undefined* |
+| **max-date** | Date | *undefined* |
+| **disabled-dates** | [DateRangeSource](#daterangesource)[] | *undefined* |
+| **show-weeknumbers** | boolean \| "left" \| "left-outside" \| "right" \| "right-outside| *undefined* |
+| **show-iso-weeknumbers** | boolean \| "left" \| "left-outside" \| "right" \| "right-outside| *undefined* |
+| **trim-weeks** | boolean | false |
+| **disable-page-swipe** | boolean | false |
+
+## Events
+
+| Name | Parameter Type(s) |
+| --- | --- |
+| **dayclick** | [CalendarDay](#calendarday), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) |
+| **daymouseenter** | [CalendarDay](#calendarday), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) |
+| **daymouseleave** | [CalendarDay](#calendarday), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) |
+| **dayfocusin** | [CalendarDay](#calendarday), [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) |
+| **dayfocusout** | [CalendarDay](#calendarday), [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) |
+| **daykeydown** | [CalendarDay](#calendarday), [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) |
+| **weeknumberclick** | [CalendarWeek](#calendarweek), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) |
+| **transition-start** | |
+| **transition-end** | |
+| **did-move** | [Page](#page)[] |
+| **update:view** | "daily" \| "weekly" \| "monthly" |
+| **update:pages** | [Page](#page)[] |
+
+## Slots
+
+| Name | Props |
+| --- | --- |
+| **header-title** | title: string |
+| **header-title-wrapper** | |
+| **header-prev-button** | move: () => Promise\, disabled: boolean |
+| **header-next-button** | move: () => Promise\, disabled: boolean |
+| **nav-prev-button** | move: () => Promise\, disabled: boolean |
+| **nav-next-button** | move: () => Promise\, disabled: boolean |
+| **day-content** | day: [CalendarDay](#calendarday), attributes: Attribute[], locale: Locale |
+| **day-popover** | day: [CalendarDay](#calendarday), dayTitle: string, attributes: Attribute[] |
+| **footer** | |
+
+## Methods
+
+| Name | Type |
+| --- | --- |
+| **canMove** | (target: [\](#movetarget), opts?: Partial[\](#moveoptions)) => boolean |
+| **canMoveBy** | (pages: number, opts?: Partial[\](#moveoptions)) => boolean |
+| **move** | (target: [MoveTarget](#movetarget), opts?: Partial[\](#moveoptions)) => Promise\ |
+| **moveBy** | (pages: number, opts?: Partial[\](#moveoptions)) => Promise\ |
+| **movePrev** | () => Promise\ |
+| **moveNext** | () => Promise\ |
+| **focusDate** | (date: Date, opts?: Partial[\](#moveoptions)) => Promise\ |
+
+## Types
+
+### AttributeConfig
+
+```ts
+interface AttributeConfig {
+ key: string | number;
+ content: string | Partial>>;
+ highlight: boolean | string | Partial>>;
+ dot: boolean | string | Partial>>;
+ bar: boolean | string | Partial>>;
+ popover: PopoverConfig;
+ dates: DateRangeSource[];
+ customData: any;
+ order: number;
+}
+
+interface Profile {
+ start: T;
+ base: T;
+ end: T;
+ startEnd?: T;
+}
+
+interface Content {
+ key: string | number;
+ color: string;
+ class: string | any[];
+ style: Record;
+}
+
+interface Highlight {
+ key: string | number;
+ color: string;
+ class: string | any[];
+ style: Record;
+ contentClass: string | any[];
+ contentStyle: Record;
+ fillMode: 'solid' | 'light' | 'outline';
+}
+
+interface Dot {
+ key: string | number;
+ color: string;
+ class: string | any[];
+ style: Record;
+}
+
+interface Bar {
+ key: string | number;
+ color: string;
+ class: string | any[];
+ style: Record;
+}
+
+type PopoverConfig = Partial<{
+ label: string;
+ customData: any;
+ visibility: 'click' | 'hover' | 'hover-focus' | 'focus';
+ placement: Placement;
+ hideIndicator: boolean;
+ isInteractive: boolean;
+}>;
+```
+
+### CalendarDay
+
+```ts
+interface CalendarDay {
+ id: string;
+ dayIndex: number;
+ day: number;
+ dayFromEnd: number;
+ weekday: number;
+ weekdayOrdinal: number;
+ weekdayOrdinalFromEnd: number;
+ week: number;
+ weekFromEnd: number;
+ weeknumber: number;
+ month: number;
+ year: number;
+ date: Date;
+ position: number;
+ label: string;
+ ariaLabel: string;
+ weekdayPosition: number;
+ weekdayPositionFromEnd: number;
+ weekPosition: number;
+ isoWeeknumber: number;
+ startDate: Date;
+ noonDate: Date;
+ endDate: Date;
+ isToday: boolean;
+ isFirstDay: boolean;
+ isLastDay: boolean;
+ isDisabled: boolean;
+ isFocusable: boolean;
+ inMonth: boolean;
+ inPrevMonth: boolean;
+ inNextMonth: boolean;
+ onTop: boolean;
+ onBottom: boolean;
+ onLeft: boolean;
+ onRight: boolean;
+ classes: Array;
+ locale: Locale;
+}
+```
+
+### CalendarWeek
+
+```ts
+interface CalendarWeek {
+ id: string;
+ week: number;
+ weekPosition: number;
+ weeknumber: number;
+ isoWeeknumber: number;
+ weeknumberDisplay?: number;
+ days: CalendarDay[];
+ title: string;
+}
+```
+
+### CalendarWeekday
+
+```ts
+interface CalendarWeekday {
+ weekday: number;
+ label: string;
+}
+```
+
+### DarkModeClassConfig
+
+```ts
+interface DarkModeClassConfig {
+ selector: string;
+ darkClass: string;
+}
+```
+
+### DateRangeSource
+
+```ts
+type DateRangeSource = DateRangeDate | [DateRangeDate, DateRangeDate] | Partial;
+
+type DateRangeDate = Date | null;
+
+interface DateRangeConfig {
+ start: DateRangeDate;
+ end: DateRangeDate;
+ span: number;
+ repeat: Partial;
+}
+```
+
+### DateSource
+
+```ts
+type DateSource = Date | string | number;
+```
+
+### MoveOptions
+
+```ts
+interface MoveOptions {
+ position: number;
+ view: CalendarView;
+ transition: MoveTransition;
+ force: boolean;
+}
+
+type MoveTransition = 'none' | 'fade' | 'slide-v' | 'slide-h';
+
+```
+
+### MoveTarget
+
+```ts
+type MoveTarget = DateSource | PageAddress;
+```
+
+### PageAddress
+
+```ts
+interface PageAddress {
+ day?: number;
+ week?: number;
+ month: number;
+ year: number;
+}
+```
+
+### Page
+
+```ts
+interface Page {
+ id: string;
+ day?: number;
+ week?: number;
+ month: number;
+ year: number;
+ view: PageView;
+ trimWeeks: boolean;
+ position: number;
+ row: number;
+ rowFromEnd: number;
+ column: number;
+ columnFromEnd: number;
+ showWeeknumbers: boolean;
+ showIsoWeeknumbers: boolean;
+ weeknumberPosition: string;
+ monthTitle: string;
+ weekTitle?: string;
+ dayTitle?: string;
+ title: string;
+ titlePosition: TitlePosition;
+ shortMonthLabel: string;
+ monthLabel: string;
+ shortYearLabel: string;
+ yearLabel: string;
+ monthComps: MonthParts;
+ prevMonthComps: MonthParts;
+ nextMonthComps: MonthParts;
+ days: CalendarDay[];
+ weeks: CalendarWeek[];
+ weekdays: CalendarWeekday[];
+ viewDays: CalendarDay[];
+ viewWeeks: CalendarWeek[];
+}
+```
+
+## Defaults
+
+```js
+{
+ componentPrefix: 'V',
+ color: 'blue',
+ isDark: false,
+ navVisibility: 'click',
+ titlePosition: 'center',
+ transition: 'slide-h',
+ datePicker: {
+ updateOnInput: true,
+ inputDebounce: 1000,
+ popover: {
+ visibility: 'hover-focus',
+ placement: 'bottom-start',
+ isInteractive: true,
+ },
+ },
+ masks: {
+ title: 'MMMM YYYY',
+ weekdays: 'W',
+ navMonths: 'MMM',
+ hours: 'h A',
+ input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
+ inputDateTime: ['L h:mm A', 'YYYY-MM-DD h:mm A', 'YYYY/MM/DD h:mm A'],
+ inputDateTime24hr: ['L HH:mm', 'YYYY-MM-DD HH:mm', 'YYYY/MM/DD HH:mm'],
+ inputTime: ['h:mm A'],
+ inputTime24hr: ['HH:mm'],
+ dayPopover: 'WWW, MMM D, YYYY',
+ data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
+ model: 'iso',
+ iso: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/calendar/attributes.md b/docs/calendar/attributes.md
new file mode 100644
index 000000000..28c2febf3
--- /dev/null
+++ b/docs/calendar/attributes.md
@@ -0,0 +1,697 @@
+---
+title: 'Attributes'
+---
+
+# Attributes
+
+Attributes are visual decorators that can be applied to specific calendar dates.
+
+
+
+
+
+Attributes are defined as an array of objects (each object is a separate attribute).
+
+A single attribute may be displayed for single dates, date ranges and even complex date patterns. Some examples of complex patterns include:
+* Every other Friday
+* 15th of every month
+* Last Friday of every other month.
+
+Here is the basic structure of attributes:
+
+```html
+
+```
+
+```js
+...
+data() {
+ return {
+ // Attributes are supplied as an array
+ attributes: [
+ // This is a single attribute
+ {
+ // An optional key can be used for retrieving this attribute later,
+ // and will most likely be derived from your data object
+ key: Any,
+ // Attribute type definitions
+ content: 'red', // Boolean, String, Object
+ highlight: true, // Boolean, String, Object
+ dot: true, // Boolean, String, Object
+ bar: true, // Boolean, String, Object
+ popover: { ... }, // Only objects allowed
+ // Your custom data object for later access, if needed
+ customData: { ... },
+ // We also need some dates to know where to display the attribute
+ // We use a single date here, but it could also be an array of dates,
+ // a date range or a complex date pattern.
+ dates: new Date(),
+ // Think of `order` like `z-index`
+ order: 0
+ }
+ ];
+ }
+}
+```
+
+### Using `customData`
+
+The `customData` property is used to link your own custom data object to the attribute. This is useful when handling events or providing custom slot content. For example, if a user clicks on a calendar day that is displaying the attribute, you might want to have some data associated with that attribute.
+
+### Using `order`
+
+By default, attributes are ordered to display the most information possible. For example, when attributes with highlighted regions overlap, single date regions appear above date range regions, and date ranges with a later start date appear above those with an earlier start date.
+
+If you would like to force an attribute to display above (or before) all others and override these rules, assign an order value greater than 0.
+
+## Quick Guide
+
+Let's start by displaying a simple **highlight** on today's date.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+For the simple example above, we used the following properties to build the attribute:
+
+| Property | Description |
+| --- | --- |
+| **`key`** | Uniquely identifies the attribute. This will come in handy later. |
+| **`highlight`** | Config for the highlighted region displayed on each date. |
+| **`dates`** | Dates used to display the attribute. |
+
+
+
+ When simply assigning `true` to the highlight config (or any other attribute except popovers), the currently active color is used to display it. In this example, the `color` prop is not specified, so the default `color` (`"blue"`) and `fillMode` (`"solid"`) are used.
+
+
+Here is how the default dot config would appear.
+
+
+
+
+
+```vue
+
+```
+
+## Colors
+
+Attributes inherit the default color from the `Calendar.color` prop (which is blue by default).
+
+However, all attributes except popovers may be assigned directly to a color.
+
+
+
+
+
+```vue
+
+```
+
+Additionally, when an object is used to configure an attribute, the `color` property may be assigned as part of that configuration.
+
+Click to learn more about the custom properties for [content](#content), [highlights](#highlights), [dots](#dots), [bars](#bars) and [popovers](#popovers).
+
+## Highlights
+
+Highlights may be assigned a boolean, string or object value.
+
+```js
+// Uses the active color (default blue)
+highlight: true
+
+// Uses the red color
+highlight: 'red'
+
+// Configuration object
+highlight: {
+ color: 'orange',
+ fillMode: 'light',
+}
+```
+
+When using an object value, these are the properties you may use for further highlight customization:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `color` | String | Color. |
+| `fillMode` | String | Color fill option: `solid` (default), `light`, `outline`. |
+| `class` | String | Class to apply to the highlight background element. |
+| `style` | Object | Style to apply to the highlight background element. |
+| `contentClass` | String | Class to apply to the highlight content element. |
+| `contentStyle` | Object | Style to apply to the highlight content element. |
+
+Here is an example using each of the three fill mode types (`solid`, `light` and `outline`, respectively).
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Content
+
+The day content (number label) may be configured with a boolean, string or object value.
+
+```js
+// Uses the active color (default blue)
+content: true
+
+// Uses the red color
+content: 'red'
+
+// Configuration object
+content: {
+ style: {
+ color: 'brown',
+ }
+}
+```
+
+When using an object value, these are the properties you may use for further content customization:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `color` | String | Color. |
+| `class` | String | Class to apply to the content element. |
+| `style` | Object | Style to apply to the content element. |
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Dots
+
+Dots may be assigned a boolean, string or object value.
+
+```js
+// Uses the active color (default blue)
+dot: true
+
+// Uses the red color
+dot: 'red'
+
+// Configuration object
+dot: {
+ style: {
+ backgroundColor: 'brown',
+ }
+}
+```
+
+When using an object value, these are the properties you may use for further dot customization:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `color` | String | Color. |
+| `class` | String | Class to apply to the dot element. |
+| `style` | Object | Style to apply to the dot element. |
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Bars
+
+Bars may be assigned a boolean, string or object value. When more than one bar is dislayed per calendar day, they are equally spaced amongst each other. Thus, it might be a good idea to limit displaying up to 2 to 3 bars per day cell, as legibility can suffer.
+
+```js
+// Uses the active color (default blue)
+bar: true
+
+// Uses the red color
+bar: 'red'
+
+// Configuration object
+bar: {
+ style: {
+ backgroundColor: 'brown',
+ }
+}
+```
+
+These are the additional configuration options you may use for further bar customization:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `color` | String | Color. |
+| `class` | String | Class to apply to the bar element. |
+| `style` | Object | Style to apply to the bar element. |
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Target Options
+
+Each attribute type allows for targeting `start`, `base` and `end` sections with separate configurations.
+
+For example, we could style the `fillMode` for the highlight end caps separately from the base section.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Popovers
+
+There are 2 basic approaches to displaying popovers within attributes.
+
+### 1. Labels
+
+Labels are the basic tooltip-style popover, configured as simple strings. By default, these popovers display when the user hovers over the day content and are not interactive to the user.
+
+
+
+```vue
+
+
+
+
+
+```
+
+For this example, we simply assigned a string to the `popover.label` property. Now, the label displays in a popover whenever the user hovers over the day content (or taps on mobile).
+
+If we want to force the user to click on the day content in order to display the popover, we can set the popover's `visibility` property to `"focus"` or `"click"`.
+
+
+
+```js
+ ...
+ popover: {
+ label: todo.description,
+ visibility: 'focus'
+ }
+ ...
+```
+
+
+
+```js
+ ...
+ popover: {
+ label: todo.description,
+ visibility: 'click'
+ }
+ ...
+```
+
+Also, you'll notice there is a small indicator next to the popover content row for the attribute. This is a simple indicator provided in order to help the user match up the popover content rows to the indicators in the calendar day cell.
+
+If you would like to hide the indicator, just set the `hideIndicator` property to `true`;
+
+
+
+```js
+ ...
+ popover: {
+ label: todo.description,
+ visibility: 'hover',
+ hideIndicator: true,
+ }
+ ...
+```
+
+### 2. Scoped Slot
+
+For a more customized approach you can insert your own `"day-popover"` custom scoped slot within `VCalendar`.
+
+
+
+ If you are not familiar with the convention of using scoped slots in Vue.js, you can reference the [Vue docs](https://vuejs.org/guide/components/slots.html#scoped-slots).
+
+
+
+
+
+
+
+```vue{3-7,31-33}
+
+
+
+
+ Using my own content now
+
+
+
+
+
+
+```
+
+We can also pass multiple dates in an array to highlight multiple dates in the calendar.
+
+
+
+
+
+```vue{11-16}
+
+
+
+
+
+```
+
+## Date ranges
+
+Date ranges are also valid date expressions. They simply denote a range of dates from a start date to an end date.
+### Range array
+
+A range can be configured with an array of start/end dates.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Range object
+
+A range can also be configured as an object with the following definition.
+
+```ts
+type DateRangeConfig = Partial<{
+ start: Date | null;
+ end: Date | null;
+ span: number;
+ repeat: Partial;
+}>
+```
+
+#### Range span
+
+Note from the definition above that the date range can be denoted with `start` and `end` dates or a `start` date and a `span` number of days added to compute the `end` date.
+
+
+
+
+
+```vue{11}
+
+
+
+
+
+```
+
+#### Boundless dates
+
+Also note that `start` and `end` dates can span forever backwards and forwards, respectively, by assigning `null` or `undefined` values.
+
+Boundless dates probably make more sense when defining disabled date expressions.
+
+
+
+
+
+```vue{8}
+
+
+
+
+
+```
+
+
+
+Note how `disabled-dates` do not also disable navigation. Use the `min-date` or `max-date` props to disable dates and navigation.
+
+
+
+## Repeating dates
+
+Use the `repeat` property of a date range object to create a repeating date or date range.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Definitions
+
+The `repeat` object follows the `DateRepeatConfig` interface below, which consists of key-value pairs of rules.
+
+```ts
+export interface DateRepeatConfig {
+ every: RepeatIntervalShort | [number, RepeatInterval];
+ until: Date;
+ weekdays: SingleOrArray;
+ days: SingleOrArray;
+ weeks: SingleOrArray;
+ months: SingleOrArray;
+ years: SingleOrArray;
+ ordinalWeekdays: SingleOrArray;
+ on: SingleOrArray>;
+}
+
+type SingleOrArray = T | T[];
+type RepeatIntervalShort = 'day' | 'week' | 'month' | 'year';
+type RepeatInterval = 'days' | 'weeks' | 'months' | 'years';
+type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+type DayInMonth = -31, -30 ... -1 | 1 | 2 ... | 31;
+type WeekInMonth = -6 | -5 | -4 | -3 | -2 | -1 | 1 | 2 | 3 | 4 | 5 | 6;
+type MonthInYear = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+```
+
+### Interval rules
+
+Interval rules are defined using the `every` key.
+
+```ts
+{
+ repeat: {
+ every: 'month',
+ days: 15
+ }
+}
+```
+
+Since the `repeat` above repeats over a single interval (1 month), the frequency (`day`, `week`, `month`, `year`) can be expressed as a simple string.
+
+If repeating over 2 or more intervals, then an array is required to express the interval and frequency.
+
+```ts
+{
+ repeat: {
+ every: [2, 'months'],
+ days: 15,
+ }
+}
+```
+
+Also, it is important to note that `week`, `month` and `year` interval rules must be paired with at least one component rule (`days` in the example above) or ordinal component rule.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Component rules
+
+Component rules are used to more specifically target repeating date ranges. They include the following keys of the `DateRepeatConfig` interface.
+
+```ts
+export interface DateRepeatConfig {
+ // ...
+ weekdays: SingleOrArray;
+ days: SingleOrArray;
+ weeks: SingleOrArray;
+ months: SingleOrArray;
+ years: SingleOrArray;
+ // ...
+}
+
+type SingleOrArray = T | T[];
+type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+type DayInMonth = -31, -30 ... -1 | 1 | 2 ... | 31;
+type WeekInMonth = -6 | -5 | -4 | -3 | -2 | -1 | 1 | 2 | 3 | 4 | 5 | 6;
+type MonthInYear = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+```
+
+Component rule values can be expressed as a single number or an array of numbers. Also, note that the `days` and `weeks` rules may be expressed as negative numbers to offset from the end of the repeat interval.
+
+In the example below, since repeating on multiple days of the month (15, 25), the `days` property must be an array.
+
+
+
+
+
+```js
+// ...
+const attributes = ref([
+ {
+ highlight: true,
+ dates: [
+ {
+ start: new Date(2022, 10, 15),
+ repeat: {
+ every: [2, 'months'],
+ days: [15, 25],
+ },
+ },
+ ],
+ },
+]);
+```
+
+### Ordinal component rules
+
+Ordinal component rules target ordinal weekdays of the month. Such examples include
+
+* First Sunday of the month
+* Fifth Tuesday of the month
+* Last Monday of the month
+* Second to last Saturday of the month
+
+```ts
+export interface DateRepeatConfig {
+ // ...
+ ordinalWeekdays: SingleOrArray;
+}
+
+type SingleOrArray = T | T[];
+```
+
+The rule values are expressed as an array with the position first (-6 to -1, 1 to 6), followed by the weekdays to match (1 to 7).
+
+```ts
+{
+ repeat: {
+ every: 'month',
+ ordinalWeekdays: [-1, 2], // Last Monday of the month
+ }
+}
+```
+
+Multiple weekdays can be appended to the end of the array.
+
+```ts
+{
+ repeat: {
+ every: 'month',
+ ordinalWeekdays: [-1, 2, 6], // Last Monday or Friday of the month
+ }
+}
+```
+
+Multiple rules can be set by wrapping them in a separate array.
+
+```ts
+{
+ repeat: {
+ every: 'month',
+ ordinalWeekdays: [
+ [1, 1], // First Sunday of the month
+ [-1, 2], // Last Monday or Friday of the month
+ ]
+ }
+}
+```
+
+In the example below, we can apply this rule to a repeating date range.
+
+
+
+
+
+```js
+// ...
+const attributes = ref([
+ {
+ highlight: true,
+ dates: [
+ {
+ start: new Date(2022, 10, 7),
+ end: new Date(2022, 10, 9),
+ repeat: {
+ every: 'month',
+ ordinalWeekdays: [
+ [1, 2], // First Monday of the month
+ [-1, 2], // Last Monday of the month
+ ],
+ },
+ },
+ ],
+ },
+]);
+```
+
+### Nested group rules
+
+Repeat objects can be nested for more complex matching logic. Until now, rules have been conditionally *and*-ed with each other by defining them in a single object.
+
+Using the `on` property, we can use an array to group multiple rule objects that are conditionally *or*-ed instead of *and*ed.
+
+```ts
+export interface DateRepeatConfig {
+ // ...
+ on: SingleOrArray | DateRepeatFn>;
+}
+
+type SingleOrArray = T | T[];
+```
+
+For example, if we want to repeat every month on the 15th day or the last Monday, we might try to do something like this.
+
+
+
+
+
+```js
+// ...
+const attributes = ref([
+ {
+ highlight: true,
+ dates: [
+ {
+ start: new Date(2022, 10, 15),
+ repeat: {
+ every: 'month',
+ days: 15,
+ ordinalWeekdays: [-1, 2], // Last Monday of the month
+ },
+ },
+ ],
+ },
+]);
+```
+
+As you can see, the date never repeats because the 15th is never the last Monday of the month. Instead, we can use the `on` property to combine the rules.
+
+
+
+
+
+```js
+// ...
+const attributes = ref([
+ {
+ highlight: true,
+ dates: [
+ {
+ start: new Date(2022, 10, 15),
+ repeat: {
+ every: 'month',
+ on: [{ days: 15 }, { ordinalWeekdays: [-1, 2] }],
+ },
+ },
+ ],
+ },
+]);
+```
+
+### Function rules
+
+A custom function can be used instead of a configuration object to manually select which dates to repeat on. This function should return a `boolean` that indicates if the date or date range should start on the passed in `dayParts`.
+
+```ts
+type DateRepeatFn = (dayParts: DayParts) => boolean;
+
+export interface DayParts {
+ dayIndex: number;
+ day: number;
+ dayFromEnd: number;
+ weekday: number;
+ weekdayOrdinal: number;
+ weekdayOrdinalFromEnd: number;
+ week: number;
+ weekFromEnd: number;
+ weeknumber: number;
+ month: number;
+ year: number;
+ date: Date;
+}
+```
+
+For example, we can reimplement the previous example with a custom function.
+
+
+
+
+
+```js
+// ...
+const attributes = ref([
+ {
+ highlight: true,
+ dates: [
+ {
+ start: new Date(2022, 10, 15),
+ repeat: {
+ every: 'month',
+ on: ({ weekdayOrdinalFromEnd, weekday, day }) =>
+ (weekdayOrdinalFromEnd === 1 && weekday === 2) || day === 15,
+ },
+ },
+ ],
+ },
+]);
+```
\ No newline at end of file
diff --git a/docs/calendar/layouts.md b/docs/calendar/layouts.md
new file mode 100644
index 000000000..5c6ea8279
--- /dev/null
+++ b/docs/calendar/layouts.md
@@ -0,0 +1,239 @@
+---
+title: 'Layouts'
+---
+
+# Layouts
+
+## Full Width
+
+To expand the component to the full width of its container, set the `expanded` prop.
+
+
+
+
+
+```html
+
+```
+
+## Title Positioning
+
+To make the title header left or right aligned, use the `title-position` prop.
+
+### Left Aligned
+
+
+
+
+
+```html
+
+```
+
+### Right Aligned
+
+
+
+
+
+```html
+
+```
+
+## Weekly View
+
+Set the `view` prop to display the calendar in 'weekly' view.
+
+
+
+
+
+```html
+
+```
+
+## Weeknumbers
+
+### Left
+
+Show week numbers by setting the `show-weeknumbers` prop.
+
+
+
+
+
+```html
+
+```
+
+By default, this will display the numbers on the left side within the calendar pane.
+
+The `show-weeknumbers` can also be assigned to left and outside positions.
+
+### Left Outside
+
+
+
+
+
+```html
+
+```
+
+### Right
+
+
+
+
+
+```html
+
+```
+
+### Right Outside
+
+
+
+
+
+```html
+
+```
+
+### ISO Weeknumbers
+
+To show ISO week numbers, use the `show-iso-weeknumbers` prop with the same convention as `show-weeknumbers`. If both are assigned, the `show-weeknumbers` prop takes precendence.
+
+Since ISO weeks start on Monday, it makes sense to also set Monday as the first day of the week when setting `show-iso-weeknumbers`.
+
+
+
+
+
+```html
+
+```
+
+
+
+For the ISO week date standard (ISO-8601), weeks start on Monday and end on Sunday. If the `firstDayOfWeek` setting is different (U.S. default), this could result in 2 weeks displaying the same week number for certain months.
+
+
+## Trim Weeks
+
+By default, calendar panes always displays the maximum number of weeks in a month, even if the max week does not contain any days in the current month displayed.
+
+This is to ensure user interface consistency and prevents the calendar height from always changing as the user navigates months.
+
+However, these empty weeks can be 'trimmed' by setting the `trim-weeks` prop.
+
+
+
+
+
+```html
+
+```
+
+## Footer
+
+A `footer` slot may be used to insert content below the primary calendar content.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+The slot may also be applied to date pickers.
+
+
+
+
+
+## Multiple Rows & Columns
+
+Use the `rows` and `columns` props to create multi-row and multi-column static layouts.
+
+
+
+
+
+```html
+
+```
+
+## Responsive Layouts
+
+Previous to 3.0, `v-calendar` provided a `$screens` function out-of-the-box to help create computed properties based on the current screen size. To minimize package size and complexity, this built-in functionality has been removed.
+
+To reproduce this behavior, you can bind to computed `rows` or `columns` using your own logic, or install a 3rd-party plugin like [`vue-screen-utils`](https://github.com/nathanreyes/vue-screen-utils) that can create dynamic computed properties based on media queries or `ResizeObserver`.
+
+For this example, we can use the `mapCurrent` function exported by [`vue-screen-utils`](https://github.com/nathanreyes/vue-screen-utils) to display 2 `columns` for large screens.
+
+
+
+
+
+```vue
+
+
+
+
+```
+
+Next, for mobile layouts, we can expand the pane width to fill its container.
+
+
+
+
+
+```vue
+
+
+
+
+```
+
+Read more about [`vue-screen-utils`](https://github.com/nathanreyes/vue-screen-utils) for more options.
\ No newline at end of file
diff --git a/docs/calendar/navigation.md b/docs/calendar/navigation.md
new file mode 100644
index 000000000..747a0489a
--- /dev/null
+++ b/docs/calendar/navigation.md
@@ -0,0 +1,184 @@
+---
+title: 'Navigation'
+sidebarDepth: 2
+---
+
+# Navigation
+
+## User Interface
+
+### Header
+
+There are 2 primary methods for navigating the calendar within the header.
+
+1. Navigation arrows to move forwards and backwards by a given [`step`](#month-steps) amount.
+2. Navigation popover to more easily skip to a specific month/year.
+
+
+
+
+
+```html
+
+```
+
+### Month Steps
+
+By default, the calendar will navigate to the month following the last current displayed month when navigating forwards. Conversely, it will navigate to the month preceding the first month when navigating backwards.
+
+This default step amount is equal to the number of rows multiplied by the number of columns in a given layout (2 rows x 1 column = 2).
+
+
+
+
+
+However, the `step` prop can be used to configure a custom month interval.
+
+For example, instead of moving forward by 2 months in the previous example, we can instead force it move by 1 month.
+
+
+
+
+
+```html
+
+```
+
+### Min & Max Dates
+
+If `min-date` or `max-date` props are assigned, this will disable navigation for the user beyond the dates provided.
+
+#### Min Date
+
+
+
+
+
+```html
+
+```
+
+#### Max Date
+
+
+
+
+
+```html
+
+```
+
+## Key Commands
+
+
+ A calendar day must be in focus in order for key commands to be recognized.
+
+
+Both `VCalendar` and `VDatePicker` now support the following key commands for navigation:
+
+| Command | Action |
+| --- | --- |
+| **Left** | Move to the previous day |
+| **Right** | Move to the next day |
+| **Up** | Move to the previous week |
+| **Down** | Move to the next week |
+| **Home** | Move to the start of the current week |
+| **End** | Move to the end of the current week |
+| **PgUp** | Move to the same day of the previous month |
+| **PgDown** | Move to the same day of the next month |
+| ***Alt*** + **PgUp** | Move to the same month and day of the previous year |
+| ***Alt*** + **PgDown** | Move to the same month and day of the next year |
+
+## *Move* Methods
+
+The base calendar component provides the `move` and `moveBy` methods that provide more flexible options not provided by the user interface or keyboard navigation. These methods are asynchronous which can be `await`ed when a transition is specified.
+
+```ts
+type Move = async (target: MoveTarget, opts: MoveOptions) => Promise;
+type MoveBy = async (pages: number, opts: MoveOptions) => Promise;
+
+type MoveTarget = Date | string | number | PageAddress;
+
+interface PageAddress {
+ day?: number;
+ week?: number;
+ month: number;
+ year: number;
+}
+
+interface MoveOptions {
+ // Target position for multi-row or multi-column layouts.
+ // Negative numbers will offset from last position.
+ position: number;
+ // How the calendar animates to the new target
+ transition: 'none' | 'fade' | 'slide-v' | 'slide-h';
+ // Force navigation even if the target is disabled
+ force: boolean;
+}
+```
+
+### Move by number of pages
+
+Moves a given number of months forwards or backwards.
+
+Calling `moveBy(num)` with a **positive** number will move **forwards** by a given number of months.
+
+Calling `moveBy(num)` with a **negative** number will move **backwards** by a given number of months.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Move to month
+
+Moves to a given month by calling `move(page)` with a page object with `month` and `year` keys.
+
+```js
+// ...
+// Moves to January, 1983
+await calendar.value.move({ month: 1, year: 1983 })
+```
+
+### Move to a date
+
+Moves to a specified date.
+
+Calling `move(date)` with a **Date** object will move to that date.
+
+Calling `move(date)` with a **String** will move to the converted date.
+
+```js
+// ...
+// Moves to today's date
+await calendar.value.move(new Date())
+// Moves to my birthday
+await calendar.value.move(`1983-01-21`)
+```
+
+
+
+ Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead.
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/calendar/theme.md b/docs/calendar/theme.md
new file mode 100644
index 000000000..c9799da3c
--- /dev/null
+++ b/docs/calendar/theme.md
@@ -0,0 +1,276 @@
+# Theme
+
+VCalendar supports some basic helper props to avoid having to manually [override styles](#custom-styles).
+
+## Borderless
+
+Set the `borderless` prop to simple reset the border width and radius.
+
+
+
+
+
+```vue
+
+
+
+```
+
+## Transparent
+
+Set the `transparent` prop to reset the background color. This prop should be used if embedding the calendar within another container. Most often, this prop should be set in combination with the `borderless` prop.
+
+
+
+
+
+```vue
+
+
+
+```
+
+## Colors
+
+VCalendar ships with support for 10 colors: **gray**, **red**, **orange**, **yellow**, **green**, **teal**, **blue**, **indigo**, **purple**, **pink**.
+
+You can apply a theme color with the `color` prop.
+
+
+
+
+
+```vue
+
+
+
+
+```
+
+Colors may be added or customized using [CSS variables](#css-variables)
+
+## Dark Mode
+
+VCalendar supports a variety of dark mode strategies to ensure compatibility with your application. They are all configured by the `is-dark` prop.
+
+### Manual Strategy
+
+First, you can pass a boolean value for `isDark` to set the dark mode manually.
+
+
+
+By default, `is-dark` is `false`, so if left unassigned, the calendar will always display in light mode.
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+### System Preference Strategy
+
+When assigning `is-dark: "system"`, it will use the `Window.matchMedia()` API to apply the user's system preference. This setting is continually watched to detect future changes made by the user.
+
+For example, to view the effect on the Mac, you can navigate to **System Preferences › General** and switch the **Appearance** setting between `Light`, `Dark` and `Auto`.
+
+
+
+```vue
+
+
+
+```
+
+### Class Strategy
+
+Finally, dark mode can be activated if a class is present on an element.
+
+For example, most calendars on this site sync with this site's dark mode by watching for the `dark` class on the `:root` element.
+
+To use the class strategy, pass an object with the element `selector` and `darkClass` to check against. Any class updates made on the element are watched with a `MutationObserver` to detect future changes made by the user.
+
+
+
+
+
+```html
+
+
+
+```
+
+Because `:root` and `dark` are the default `selector` and `darkClass`, respectively, a simple object could be passed to achieve the same effect.
+
+
+
+
+
+```html
+
+
+
+```
+
+## Custom styles
+
+Manually overriding styles in css is possible when more customization is required. There are 2 methods we can use to accomplish this.
+
+
+ While class names and element structure are relatively stable, it should be noted that they could change across minor and patch versions.
+
+
+### Global styles
+
+First we can simply apply a global style that will affect all calendars. It is recommended to nest target classes within `.vc-container` to meet the specificity required to override any default styles.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+#### Custom wrapper class
+
+We can also apply a custom class to the component itself to target specific instances of our calendar.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Scoped styles
+
+If applying custom styles within a scoped component, then the `:deep()` pseudo-class is required combined with a custom wrapper element.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+## CSS Variables
+
+Colors and other styles for both light and dark modes may be customized by overriding css variables defined within your own custom theme stylesheet.
+
+Use the [default stylesheet](https://github.com/nathanreyes/v-calendar/blob/v3/src/styles/theme.css) as a guide.
+
+### Adding a custom color
+
+Custom colors may be added by creating a color class prefixed with `vc-` in your stylesheet or SFC `style` block. For example, to add a sky blue color, create a `vc-sky-blue` class that overrides the accent color scale.
+
+```css
+/* Sky blue */
+.vc-sky-blue {
+ --vc-accent-50: #f0f9ff;
+ --vc-accent-100: #e0f2fe;
+ --vc-accent-200: #bae6fd;
+ --vc-accent-300: #7dd3fc;
+ --vc-accent-400: #38bdf8;
+ --vc-accent-500: #0ea5e9;
+ --vc-accent-600: #0284c7;
+ --vc-accent-700: #0369a1;
+ --vc-accent-800: #075985;
+ --vc-accent-900: #0c4a6e;
+}
+```
+
+Once the color is defined, it may be used anywhere colors are referenced, including the `Calendar.color` prop or as an [attribute](./attributes#colors) color.
+
+
+
+```vue
+
+
+
+
+```
+
+### Replace an existing color
+
+We can also use the same approach to update an existing color. For example, we may want to override the built-in blue color with sky blue.
+
+```css
+/* Replace blue with sky blue palette */
+.vc-blue {
+ --vc-accent-50: #f0f9ff;
+ --vc-accent-100: #e0f2fe;
+ --vc-accent-200: #bae6fd;
+ --vc-accent-300: #7dd3fc;
+ --vc-accent-400: #38bdf8;
+ --vc-accent-500: #0ea5e9;
+ --vc-accent-600: #0284c7;
+ --vc-accent-700: #0369a1;
+ --vc-accent-800: #075985;
+ --vc-accent-900: #0c4a6e;
+}
+```
\ No newline at end of file
diff --git a/docs/changelog/v0.1.md b/docs/changelog/v0.1.md
deleted file mode 100644
index 66ab63812..000000000
--- a/docs/changelog/v0.1.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: v0.1
----
-
-## v0.0.4
-
-* Fix lib subfolder not published
-* Add license declaration
-* Add CHANGELOG file
-
-## v0.0.5
-
-* Add tap to dismiss popover
-* Add tint color (with blending) for easy date picker styling
-* Add support for custom title position (left, center, right)
-
-## v0.0.6
-
-* Fix README
-
-## v0.0.7
-
-* Add 'theme-styles' prop to calendar for theming
-* Remove a number of '...-style' replaced by theme-styles object
-* Renamed 'select-mode' prop to 'mode' for datepicker
-
-## v0.0.8
-
-* Add support for installing via CDN
-* Add licensing and copyright to README
-* Fix vertically centering header title
-* Fix styling bug with date picker
-* Fix setup instructions
-
-## v0.0.9
-
-* Add support for more flexible month/year navigation
-* Fix popover visibility bug
-* Fix styling bug in date example
-
-## v0.1.0
-
-* Add navigation pickers in calendar headers
-
-## v0.1.1
-
-* Add documentation for custom theming
-* Restructure docs component hierarchy
-* Remove lib files from git tracking
-* Fix layout bug in calendar pane
-* Fix event forwarding for date picker
\ No newline at end of file
diff --git a/docs/changelog/v0.2.md b/docs/changelog/v0.2.md
deleted file mode 100644
index 07fa5f1e4..000000000
--- a/docs/changelog/v0.2.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: v0.2
----
-
-## v0.2.0
-
-* Simplify header title layout
-* Add navigation panel popover with indicators
-* Add passive event modifiers for touch events
-* Add 'go to today' with header title click
-* Add 'hover' as visibility option for popovers
-* Redesign popovers to display caret arrows
-* Move DateInfo class into separate file
-* Fix date logic for range intersections
-
-## v0.2.1
-
-* Fix layout bug with navigation panel in Firefox
-
-## v0.2.2
-
-* Fix bug where is-expanded prop not working for calendar component
\ No newline at end of file
diff --git a/docs/changelog/v0.3.md b/docs/changelog/v0.3.md
deleted file mode 100644
index 981ca166e..000000000
--- a/docs/changelog/v0.3.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: v0.3
----
-
-## v0.3.0
-
-* Add support for accepting various defaults when calling Vue.use(VCalendar, { ...defaults... })
-* Set default calendar pages to best show date picker values
-* Fix issue where inline date picker would not respond to is-expanded. Fixes #8.
-* Dismiss popovers on navigation month select and date selection. Fixes #9.
-* Fix issue where popover content not properly layered. Fixes #10.
-* Add locale detection and support user-supplied locales for month/weekday labels. Fixes #11.
-
-## v0.3.1
-
-* Fix bug with duplicate events being fired. Closes #15.
-* Fix application of styling for date pickers when not inline. Closes #17.
-
-## v0.3.2
-
-* Fix styling bug introduced by v0.3.1.
-
-## v0.3.3
-
-* Fix duplicate input event for inline date picker
\ No newline at end of file
diff --git a/docs/changelog/v0.4.md b/docs/changelog/v0.4.md
deleted file mode 100644
index c97119aed..000000000
--- a/docs/changelog/v0.4.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: v0.4
----
-
-## v0.4.0
-
-* Fix weekday labels not always having same exact width
-* Add support for complex attribute dates. Closes #7 and #12.
-* Add support for attribute `excludeDates`, date picker `availableDates`. Closes #19.
-* Add support for endless date ranges using null for start/end dates. Closes #20.
-* Add support for attaching custom data to attributes via `customData` property. Closes #21.
-* Add Turkish locale.
-
-## v0.4.1
-
-* Use local nextTick reference, deleting Vue scope dependency.
-* Fix null attribute bug in date picker.
-
-## v0.4.2
-
-* Convert event names to all lowercase to support in-DOM templates. Closes #26.
-
-## v0.4.3
-
-* Fix bug for duplicated weekday label keys. Closes #28.
\ No newline at end of file
diff --git a/docs/changelog/v0.5.md b/docs/changelog/v0.5.md
deleted file mode 100644
index ce3f2456c..000000000
--- a/docs/changelog/v0.5.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: v0.5
----
-
-## v0.5.0
-
-### Bug Fixes
-* Day content more vertically centered with `line-height: 1`
-* Strip unused component props
-
-### Improvements
-* Support day popovers for attributes (custom slots supported). Closes #13.
-* Support `dayPopoverContent` theme style
-* Support multiple visibility options for navigation header ('hover', 'focus', 'visible', 'hidden')
-* Simplified popover visibility state transitions
-* Support `span` (day length) in place of `end` date for date ranges
-* Add `targetDate` property to attributes passed in event handlers
-* Extract touch handlers to separate state functions
-* Require Vue v2.5.0+
-
-## v0.5.1
-
-### Bug Fixes
-* Fix layout bugs in navigation popover
-
-### Improvements
-* Reorganize css variables. Improve default styling.
-
-## v0.5.2
-
-### Bug Fixes
-* Fix bug for wrong/missing parameters passed on day events. Closes #33.
-
-### Improvements
-* Allow for custom cap styling for highlight and content style attributes.
-* Add `show-caps` prop for date pickers
-* Add Swedish translation.
-
-## v0.5.3
-
-### Bug Fixes
-* Detect date range intersections with `disabled-dates`. Closes #12.
-
-## v0.5.4
-
-### Bug Fixes
-* Pass missing `page` attribute to `header-title` slot
-* Fade input text when dragging date ranges in `v-date-picker`
-
-### Improvements
-* Add `pane-width` prop to `v-calendar` for setting pane width manually
-* Add `pane-width` as a configurable default setting
-* Add `shortMonthLabel` and `shortYearLabel` properties to `page` objects
-* Disable pointer events for day cells not in month if `opacity: 0` in `theme-styles.dayCellNotInMonth` style
-
-### Improvements
-* Added `componentPrefix` constructor option when using plugin. Closes #37.
-* Redesigned popover for selected and dragged regions in `v-date-picker`.
-* Input elements in `v-date-packer` no longer require `readonly` attribute when using date patterns with `disabled-dates` or `available-dates`.
-* Popovers for selected and dragged regions can be hidden via `show-popover` prop in `v-date-picker`.
-* Use custom component for popover attributes via the `component` property.
-* Testing framework moved to Jest. Added tests for detecting date collisions.
-* Update README for more clear introduction guide.
-
-## v0.5.5
-
-### Bug Fixes
-* Fix miscalculation of day numbers for previous months when `firstDayOfWeek !== 1`. Closes #44.
diff --git a/docs/changelog/v0.6.md b/docs/changelog/v0.6.md
deleted file mode 100644
index 17e9f57bc..000000000
--- a/docs/changelog/v0.6.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: v0.6
----
-
-## v0.6.0
-
-### Bug Fixes
-`v-date-picker`
-* Bug: `fromPage` and `toPage` not updating when new date was assigned or selected.
- Fix: `fromPage` and `toPage` are updated when new value is assigned, if needed. Closes #51.
-* Bug: When clearing out input element, infinite start and end dates selected.
- Fix: When clearing out input element, date is cleared or reverts to previous value, depending on `is-required` prop or if dragging in `"range"` mode. Closes #54.
-
-### Improvements
-* Add Finnish translation to locales
-`v-calendar`
-#### Slots
-* Rename `popover-header` slot name to `day-popover-header` to more clearly identify slot target
-* Add `day-popover-footer` slot for day popover footers
-* `day-popover-header`, `day-popover-footer` and custom popover slots accept `day` prop instead of `day-info` prop
-#### Events
-* Rename `dayselect` calendar event to `dayclick` to more clearly indicate DOM event source
-* Modify parameter structure for day events (`dayclick`, `daymouseenter`, `daymouseover`, `daymouseleave`). Instead of passing multiple parameters in order (and having to remember the right order), there is now a single object parameter with the following properties.
-
- | Property | Type | Description |
- | -------- | ---- | ----------- |
- | `day` | Number | Day number (1 - 31). |
- | `dayFromEnd` | Number | Day number from the end of the month (1 - 31). |
- | `weekday` | Number | Day weekday number (1:Sun - 7:Sat). |
- | `weekdayOrdinal` | Number | Weekday ordinal position from the start of the month (1 - 6). |
- | `weekdayOrdinalFromEnd` | Number | Weekday ordinal position from the end of the month (1 - 6). |
- | `week` | Number | Week number form the start of the month (1 - 6). |
- | `weekFromEnd` | Number | Week number from the end of the month (1 - 6). |
- | `month` | Number | Month number (1 - 12). |
- | `year` | Number | Year number. |
- | `date` | Date | Date for this day. |
- | `dateTime` | Number | Result of calling `date.getTime()` for this day. |
- | `inMonth` | Boolean | Day lies in the currently active month. |
- | `inPrevMonth` | Boolean | Day lies in the month before the currently active month. |
- | `inNextMonth` | Boolean | Day lies in the month after the currently active month. |
- | `attributes` | Array | List of attributes for the day involved with the event. |
- | `attributesMap` | Object | Object map of the attributes using their designated key. |
- | `event` | Object | Original trigger event. |
-
-`v-date-picker`
-#### Props
-* Add `is-required` prop to `v-date-picker` to prevent null date selections. Closes #45.
-* Replace input related props (`input...`) with `input-props` object as a catch all for all props to apply to input element.
-* Replace `select-color` and `drag-color` props with `tint-color`. Opacity is set to `0.5` when `tint-color` is applied to `drag-attribute`.
-* Add `disabled-attribute` prop.
-#### Defaults
-* Replace input related defaults (`datePickerInput...`) with `input-props` as a configurable default function or object.
-
-## v0.6.1
-
-### Bug Fixes
-`v-date-picker`
-* Prevent bug causing infinite update cycle loop and locking the browser when using `disabled-dates`. Closes #61.
-
-### Improvements
-`v-calendar`
-* Improve efficiency of date intersection detection logic.
-
-## v0.6.2
-
-### Bug Fixes
-`v-calendar`
-Fix bug when using `max-page` with single-paned calendars. Closes #64.
-
-`v-date-picker`
-Force delay when navigating pages to prevent display of empty calendars. Closes #52.
-Fix bug when using supplying default `dateFormatter` and `dateParser`. Closes #62.
-Fix bug resulting in date selections getting ignored. Closes #66.
-
-### Improvements
-Replace icon fonts with svg icons. Closes #59.
-
-## v0.6.3
-
-### Bug Fixes
-Use svg icons for left and right year group arrows in navigation pane. Closes #69.
\ No newline at end of file
diff --git a/docs/changelog/v0.7.md b/docs/changelog/v0.7.md
deleted file mode 100644
index 8ed13cc58..000000000
--- a/docs/changelog/v0.7.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: v0.7
----
-
-## v0.7.0
-
-### Bug Fixes
-`v-calendar`
-* Fix animation bug when `weeks-transition` or `title-transition` is `"none"`. Closes #70.
-
-`v-date-picker`
-* Disabling dates on drag can invalidate current selected range. Closes #67.
-
-### Improvements
-`v-calendar`
-* Uses Javascript's `Intl.DateTimeFormat` API to supply month and day names for to 35 languages with minimal bundle size.
-* Transitioned top level calendar component to render function for improved slot support.
-* Supports a new `formats` prop object where you can specify custom formats for title, weekdays and navigation months.
-* Deprecate `month-labels` and `weekday-labels` props in favor of using `formats` prop.
-* Improved handling of svg icons for smaller bundle size.
-
-`v-date-picker`
-* Transitioned all date picker components to render functions. This allows using all slots that `v-calendar` supports. Closes #49.
-* Supports a new `formats` prop object where you can specify custom formats for input element and date selection popovers.
-* Deprecate `dateFormatter` and `dateParser` props in favor of using `formats` prop.
-
-## v0.7.1
-
-### Bug Fixes
-* Fix setup crash when not manually specifying a locale
-
-## v0.7.2
-
-### Bug Fixes
-* Fix event collision when using render functions. Closes #82.
-* Fix date formatting bug in Safari.
-
-## v0.7.3
-
-### Bug Fixes
-* Fix scoped slot usage in `v-date-picker` render function. Closes #83.
-
-## v0.7.4
-
-### Bug Fixes
-* Redress issue introduced by v0.7.3.
-
-## v0.7.5
-
-### Bug Fixes
-* Remove `console.log` statement. Closes #85.
\ No newline at end of file
diff --git a/docs/changelog/v0.8.md b/docs/changelog/v0.8.md
deleted file mode 100644
index 0c623002a..000000000
--- a/docs/changelog/v0.8.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: v0.8
----
-
-## 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.
-
-```html
-
-
-```
-
-```javascript
-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.
-
-```html
-
-
-```
-
-```javascript
-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.
diff --git a/docs/changelog/v0.9.md b/docs/changelog/v0.9.md
deleted file mode 100644
index ddb82bf04..000000000
--- a/docs/changelog/v0.9.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: v0.9
----
-
-## 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`](https://docs.vcalendar.io/api/page-object.html) object and return a style |
-| `headerTitle` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api/page-object.html) object and return a style |
-| `headerArrows` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api/page-object.html) object and return a style |
-| `headerHorizontalDivider` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api/page-object.html) object and return a style |
-| `weekdays` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api/page-object.html) object and return a style |
-| `weekdaysHorizontalDivider` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api/page-object.html) object and return a style |
-| `weeks` | Edit | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api/page-object.html) 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...
-
-```html
-
-
-
-
-```
-
-```javascript
-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` |
-
-```html
-
-
-
-```
-
-### `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. :tada: :tada: :tada: 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.
-
-```html
-
-
-
- {{ day.day }}
-
-
-```
-```css
-/* 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`](https://docs.vcalendar.io/api/day-object.html) | 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.
\ No newline at end of file
diff --git a/docs/changelog/v1.0.md b/docs/changelog/v1.0.md
deleted file mode 100644
index 705e79ced..000000000
--- a/docs/changelog/v1.0.md
+++ /dev/null
@@ -1,480 +0,0 @@
----
-title: v1.0
----
-
-## v1.0.0-beta.0
-
-This is a big update with quite a few breaking changes. Here are the biggest updates.
-
-* [Responsive Layouts](#layouts)
-* [i18n Improvements](#i18n-improvements)
-* [Modern Design](#modern-design)
-* [Theming & Dark Mode](#theming-dark-mode)
-* [Attributes API](#attributes-api)
-* [Datepicker Improvements](#datepicker-improvements)
-* [Popper.js Integration](#popper-js-integration)
-* [Defaults Restructuring](#defaults-restructuring)
-* [Modifications to Props & Events](#modifications-to-props-events)
-* [Bug Fixes](#bug-fixes)
-
-### Quick Update
-
-#### Install next version of `v-calendar`
-
-```bash
-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](#popper-js-integration)
-* 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.
-
-```html
-
-```
-
-
-
-
-
-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.](../layouts.md#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...
-
-```html
-
-```
-
-
-
-
-
-...or an object with the `id` and optional `firstDayOfWeek` or `masks`.
-
-```html
-
-```
-
-
-
-
-
-:::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.
-
-```js
-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).
-
-```html
-
-```
-
-
-
-
-
-[Read more about working with i18n.](./readme.md#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.
-
-#### Combine popover related props into single `popover` object
-
-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](popperjs.com) 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](https://popper.js.org/docs/v2/constructors/#placement) 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](./attributes.md). |
-| `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~~
-::: danger
-This version was unpublished and should not be used.
-:::
-
-## ~~v1.0.0-beta.18~~
-::: danger
-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` :tada: :tada: :tada:
-
-## 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
\ No newline at end of file
diff --git a/docs/changelog/v2.0.md b/docs/changelog/v2.0.md
deleted file mode 100644
index 5fa5d7b00..000000000
--- a/docs/changelog/v2.0.md
+++ /dev/null
@@ -1,367 +0,0 @@
----
-title: v2.0
----
-
-## v2.0.0
-
-This version introduces a significant number of breaking changes, all of which have been introduced to streamline component simplicity and size.
-
-Reference the guides below to help update your `v-calendar` and `v-date-picker` components to `v2.0.0`.
-
-### Add `@popperjs/core` to `dependencies`
-
-[Popper.js](https://popper.js.org/) has been converted to a peer dependency to trim down the size of the package. As a result, `@popperjs/core` must be installed as a dependency within your application in order for popovers to work properly.
-
-### Calendar Conversion Guide
-
-1. [Use timezones (optional)](#_1-use-timezones-optional)
-2. [Use `footer` scoped slot](#_2-use-footer-scoped-slot)
-3. [Attribute styles](#_3-attribute-styles)
-
-
-
-### 1. Use timezones (optional)
-
-Timezone support via `timezone` prop (`UTC`, `America/Chicago`, etc.)
- * Local timezone is used if not supplied (default)
- * Timezone names allowed (`UTC`, `America/Chicago`, etc.)
- * Uses `Intl` api for native browser date conversions
-
-:::warning
-The `timezone` prop is optional and should only be used in special cases.
-:::
-
-[Read more about using timezones.](/timezones)
-
-
-
-### 2. Use `footer` scoped slot
-
-The `footer` slot may be used to place your own custom content at the bottom of the calendar.
-
-
-
-```html
-
-
-
-
-
-
-
-```
-
-```js
-export default {
- methods: {
- moveToToday() {
- this.$refs.calendar.move(new Date());
- },
- },
-};
-```
-
-
-
-### 3. Attribute styles
-
-Style objects may now be assigned to attributes via the following properties.
-
-| Attribute Type | Properties |
-| --- | --- |
-| `highlight` | `style`, `contentStyle` |
-| `dot` | `style` |
-| `bar` | `style` |
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- attributes: [
- { dot: { style: { backgroundColor: 'brown' } }, dates: new Date() },
- ],
- };
- },
-};
-```
-
-
-
-### Date Picker Conversion Guide
-
-1. [Use `mode` for new time picker](#_1-new-time-picker)
-2. [Use `is-range` for date ranges](#_2-use-is-range-for-date-ranges)
-3. [Multiple dates deprecated](#_3-multiple-dates-deprecated)
-4. [Bind to date strings & numbers](#_4-bind-to-date-strings-numbers)
-5. [Set default times for date selections](#_5-set-default-times-for-date-selections)
-6. [New time mask tokens](#_6-new-time-mask-tokens)
-7. [Remove `is-inline` prop](#_7-remove-is-inline-prop)
-8. [Update custom `input` slot bindings](#_8-update-custom-input-slot-bindings)
-
-
-
-### 1. Use `mode` for new time picker
-
-The `mode` prop has been repurposed to enable date and/or time selection.
-
-#### Date Picker Only (default)
-
-Use `date` mode to select the date **only**. This is the default mode and is not strictly required.
-
-
-
-```html
-
-```
-
-#### Date & Time Picker
-
-Use `dateTime` mode to allow for selecting dates **and** times using the new time picker. Times are displayed and modified using the local timezone unless specified via the `timezone` prop.
-
-
-
-```html
-
-```
-
-#### Time Picker Only
-
-Use `time` mode to select the time **only**.
-
-
-
-```html
-
-```
-
-
-
-### 2. Use `is-range` for date ranges
-
-Since the `mode` prop no longer can be used to select date ranges, use the `is-range: Boolean` prop to bind to date ranges.
-
-
-
-```html
-
-```
-
-```js
-data() {
- return {
- dateRange: {
- start: new Date(2020, 0, 6),
- end: new Date(2020, 0, 10),
- }
- }
-}
-```
-
-
-
-### 3. Multiple dates deprecated
-
-Multiple date selection mode has been deprecated in favor of using a slot to provide more flexible user interface patterns.
-
-[Reference this example as an idea for a replacement option.](/examples/datepickers#multiple-dates)
-
-
-
-### 4. Bind to date strings & numbers
-
-Previously, you could only bind to Javascript dates. Now it is possible to bind directly to string and number date values without manual conversion by setting the `type` and `mask` properties of the `model-config` prop.
-
-[Read more about binding to date strings and numbers.](/datepicker#model-config)
-
-
-
-### 5. Set default times for date selections
-
-When the user selects a new date, it is now possible to auto-assign a default time value by setting the `timeAdjust` property of the `model-config` prop in `HH:mm:ss` format (use `now` for the current time of selection).
-
-By default, time values are left unchanged from the original date value unless this property is assigned. [Read more about setting default times.](/datepicker#time-adjust)
-
-
-
-### 6. New time mask tokens
-
-New mask tokens have been added to support user time entry. When providing your own `input` element as a default slot, use the `masks.input` setting with the tokens below to allow the user to type in their own times.
-
-
-
-```html
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- date: new Date(),
- masks: {
- input: 'YYYY-MM-DD h:mm A',
- },
- };
- },
-};
-```
-
-| | Token | Output |
-| --- | --- | --- |
-| Hour | `h` | 1 2 ... 11 12 |
-| | `hh`| 01 02 ... 11 12 |
-| | `H` | 0 1 ... 22 23 |
-| | `HH`| 00 01 ... 22 23 |
-| Minute | `m` | 0 1 ... 58 59 |
-| | `mm` | 00 01 ... 58 59 |
-| Second | `s` | 0 1 ... 58 59 |
-| | `ss` | 00 01 ... 58 59 |
-| AM/PM | `a` | am pm |
-| | `A` | AM PM |
-| Timezone | `X` | -07 -06 ... +06 +07 |
-| | `XX` | -0700 -0600 ... +0600 +0700 |
-| | `XXX` | -07:00 -06:00 ... +06:00 +07:00 |
-
-
-
-### 7. Remove `is-inline` prop
-
-`v-date-picker` now automatically displays pickers inline if no default slot is provided. This allows for the removal of the `is-inline` prop.
-
-
-
-```html
-
-```
-
-```js
-data() {
- return {
- date: new Date()
- }
-}
-```
-
-
-
-### 8. Update custom `input` slot bindings
-
-Any default slot provided to `v-date-picker` will display the picker as a popover. There are 2 primary updates needed for binding your own `input` elements.
-
-#### 1. `inputProps` deprecated
-
-Since `v-date-picker` no longer provides its own `input` as a default slot, the `inputProps` prop has been deprecated. Instead, when you provide your own input slot, be sure to bind the `input`'s value to the `inputValue` slot prop.
-
-
-
-```html
-
-
-
-
-
-```
-
-For date ranges, `inputValue` and `inputEvents` will provide their bindings within `start` and `end` sub-properties.
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- range: {
- start: new Date(2020, 9, 12),
- end: new Date(2020, 9, 16),
- },
- };
- },
-};
-```
-
-[Read more abount providing custom `input` elements.](/datepicker.html#input)
-
-## v2.0.1
-
-### Enhancements
-
-Time picker styling improvements.
-Display non-matched `minute` options when using `minute-interval`
-
-## v2.0.2
-
-### Enhancements
-
-Adds `footer` slot support for date pickers
-Adds `popover.transition` option (`slide`, `slide-fade`, `none` or ``)
-Uses passive touch handlers to prevent Chrome warning
-
-### Bug Fixes
-
-Fixes single use of `highlight.contentStyle` or `highlight.contentClass`
-
-## v2.1.0 (Draft)
-
-### Enhancements
-
-* Adds `trim-weeks` prop for both calendars and date pickers
-* Adds `force` options to `move` and `focusDate` methods
-* Adds `move` and `focusDate` method wrappers to date picker
-* Adds `showDelay` and `hideDelay` options for date picker popover
-* Adds `showDelay`, `hideDelay` and `transition` options for attribute popovers
\ No newline at end of file
diff --git a/docs/colors-dark-mode.md b/docs/colors-dark-mode.md
deleted file mode 100644
index a4885fe77..000000000
--- a/docs/colors-dark-mode.md
+++ /dev/null
@@ -1,27 +0,0 @@
-### Colors & Dark Mode
-
-You can apply a color or dark mode by using the `color` and `is-dark` props.
-
-:::tip
-The following colors are provided out of the box: **gray**, **red**, **orange**, **yellow**, **green**, **teal**, **blue**, **indigo**, **purple**, **pink**.
-:::
-
-
-
-
-
-
-
-```html
-
-```
\ No newline at end of file
diff --git a/docs/custom-defaults.md b/docs/custom-defaults.md
deleted file mode 100644
index 288c61057..000000000
--- a/docs/custom-defaults.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: 'Custom Defaults'
-sidebarDepth: 1
----
-
-### Custom Defaults
-
-Custom defaults can be provided on initialization. Note that almost all of these defaults can be overridden by props on `v-calendar` or `v-date-picker` components.
-
-```js
-Vue.use(VCalendar, {
- componentPrefix: 'vc', // Now use vc-calendar and vc-date-picker
- ...
-})
-```
-
-[Click here to see all defaults.](../api/v2.0/defaults.md)
\ No newline at end of file
diff --git a/docs/data.md b/docs/data.md
deleted file mode 100644
index a78d71009..000000000
--- a/docs/data.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# Working With Data
-
-In this section, we'll try to put it all together and walk through a real scenario of using some custom data to display attributes and handle events as the user interacts with the calendar. The hope is that you'll become more comfortable with how to make `v-calendar` work for you and your application needs.
-
-For this simple example, we'll be working with a local array of todos (obviously), but we could easily fetch these todos from an API on `mounted()` or via `Vuex`.
-
-## Step 1: Converting Data to Attributes
-
-The first step is finding an efficient, intuitive way to convert our custom data elements into attributes for the calendar to display. The general approach here is that we'll store our todos as an array in our local state. We'll then use a computed property to recompute the attributes any time the state of our todos array changes.
-
-```html
-
-
-```
-
-```javascript
-export default {
- data() {
- return {
- todos: [
- {
- id: 1,
- description: 'Clean the house.',
- date: new Date(2018, 0, 15),
- isCompleted: false,
- color: 'red'
- },
- ],
- };
- },
- computed: {
- attributes() {
- return this.todos.map(t => ({
- key: `todo.${t.id}`,
- dot: {
- backgroundColor: t.color,
- },
- dates: t.date,
- customData: t,
- }));
- },
- }
-};
-```
-
-
-
-Here are a few things to note from the code above:
-
- 1. We use the [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) array function to convert the todos into attributes. This will be a common pattern when converting custom data into attributes.
- 2. We assign a key derived from our original todo's id
- 3. We make sure to assign the todo element to the attribute's `customData` property. We may need a way to later access the original todo.
-
-## Step 2: Handling Events
-
-Once we have figured out a way to convert our data into attributes that `v-calendar` can understand, we need to react to the user's actions like clicking on calendar days. For our application, we would just like to display the day that the user clicked, along with a list of the todos that exist for that day (if any). For that, we can handle the `dayclick` event.
-
-```html
-
-
-
-
-```
-```javascript
-export default {
- data() {
- return {
- selectedDay: null, // Add state to store selected day
- todos: [
- {
- id: 1,
- description: 'Clean the house.',
- date: new Date(2018, 0, 15),
- isCompleted: false,
- color: 'red'
- },
- ],
- };
- },
- computed: {
- attributes() {
- return this.todos.map(t => ({
- key: `todo.${t.id}`,
- dot: {
- backgroundColor: t.color,
- },
- dates: t.date,
- customData: t,
- }));
- },
- },
- methods: {
- dayClicked(day) {
- this.selectedDay = day;
- },
- },
-};
-```
-```css
-#app {
- display: flex;
-}
-
-.selected-day {
- margin-left: 10px;
-}
-```
-
-Handling the `dayclick` event is as simple as storing the [`day`](/api/day-object.md) event object. With this object, we get access to all kinds of information about the clicked day, including the attributes that lie on that day. We can access these attributes in one of two ways.
-
- * `day.attributes`: An array containing all the day's attributes.
- * `day.attributesMap`: An object containing all the day's attributes as values matched to their respective `key` property
-
-The attributes in the `attributes` list or `attributesMap` object look much the same as the attributes originally passed in as a prop, except that these attributes are super-charged with the following properties:
-
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| `intersectsDate(*date*)` | Function | Accepts a date expression (`Date` object, range or pattern) and returns the first `DateInfo` object belonging to the attribute that partially intersects the given date, if any. Returns `false` otherwise. |
-| `includesDate(*date*)` | Function | Accepts a date expression (`Date` object, range or pattern) and returns the first `DateInfo` object belonging to the attribute that completely includes (or contains) the given date, if any. Returns `false` otherwise. |
-| `targetDate` | `DateInfo` | Object with information about the date used by the attribute to display on the current day. |
-
-So...back to the example, now that we have saved the [`day`](/api/day-object.md) to the local state variable `selectedDay`, we can then add a new column to display information about the day and all of its attributes.
-
-```html
-
-
-
-
-
-
{{ selectedDay.date.toDateString() }}
-
-
- {{ attr.customData.description }}
-
-
-
-
-```
-
-## `DateInfo` & Attributes Lifecycle
-
-The previous example introduced the `DateInfo` object, so we should discuss exactly what this is. As discussed earlier, there are multiple kinds of date expressions allowed for attributes: native dates or date-like objects (any valid expression using `new Date(*expression*)`), date ranges with optional `start` and `end` dates, and date patterns using [valid pattern expressions](/api/date-patterns).
-
-Ultimately, `v-calendar` creates its own wrapper object for all of these objects, the `DateInfo` object. This object is used to conveniently treat all dates the same from an API perspective as well as super-charge the dates with the ability to test if they:
- * intersects other dates or `DateInfo` objects
- * include (or contain) other dates or `DateInfo` objects
-
-Here is the full structure of the `DateInfo` object:
-
-| Property | Type | Description | Assigned For |
-| -------- | ---- | ----------- | ------------ |
-| `type` | String | Description of wrapped date (`"date"`, `"range"`). | Date, Range |
-| `isDate` | Boolean | Wrapped date is a native `Date` object (`type === "date"`). | Date, Range |
-| `isRange` | Boolean | Wrapped date is a date range with or without patterns included (`type === "range"`). | Date, Range |
-| `date` | Date | The wrapped native `Date` object. | Date |
-| `dateTime` | Number | Result of calling `date.getTime()`. | Date |
-| `start` | Date | Start date of the range. | Range |
-| `startTime` | Number | Result of calling `start.getTime()`. | Range |
-| `end` | Date | End date of the range. | Range |
-| `endTime` | Number | Result of calling `end.getTime()`. | Range |
-| `daySpan` | Number | Number of days between the `start` and `end` dates. | Range |
-| `weekSpan` | Number | Number of weeks between the `start` and `end` dates. | Range |
-| `monthSpan` | Number | Number of months between the `start` and `end` dates. | Range |
-| `yearSpan` | Number | Number of years between the `start` and `end` dates. | Range |
-| `isComplex` | Boolean | Date range includes patterns. | Range |
-| `intersectsDate(Date)` | Function | Accepts a date expression (`Date` object, range or pattern) and returns `true` if it partially intersects the given date. Returns `false` otherwise. | Date, Range |
-| `includesDate(Date)` | Function | Accepts a date expression (`Date` object, range or pattern) and returns `true` if it completely includes (or contains) the given date. Returns `false` otherwise. | Date, Range |
-
-As mentioned before, these objects are accessed via the `attribute.targetDate` property when attributes are passed in events. To further understand what role `DateInfo` objects play and how they can be used by the client, let's review the lifecycle of attributes from the moment they are passed into `v-calendar` until the time they are exposed back to you as the developer via day related events.
-
-
-
-The following is a written walkthrough of the diagram.
-1. The client passes an array of attributes into `v-calendar`.
-2. `v-calendar` creates an `AttributeStore` object that accepts these attributes and creates a new array of custom `Attribute` objects (calling `Attribute(*attribute)` factory method).
-3. Each `Attribute` object configures itself using the client attribute.
- 1. It converts each client date object into a new `DateInfo` object (calling `DateInfo(*date*)` factory method).
- 2. It exposes methods to testing if it includes dates (simple dates, ranges, and patterns). These methods simply delegate the testing to its array of `DateInfo` objects.
-4. On initial render, any time time new attributes are provided, or any time the user navigates to a different page, `v-calendar` queries the `AttributeStore` for each day's attributes. It delegates the day inclusion test to the child `Attribute` objects which ensure the day matches at least one of its `DateInfo` objects, and makes sure it isn't excluded via `excudeDates`.
-5. The `AttributeStore` makes copies of the filtered `Attribute` objects and assigns the matching `DateInfo` object to each `Attribute`'s `targetDate` property.
-6. `v-calendar` caches the attributes for each day until it needs to refetch. On day events (`dayclick`, `daymouseenter`, `daymouseleave`) the days attributes are sent in the [`day`](/api/day-object.md) event object.
\ No newline at end of file
diff --git a/docs/datepicker.md b/docs/datepicker.md
deleted file mode 100644
index 335ba1e6b..000000000
--- a/docs/datepicker.md
+++ /dev/null
@@ -1,724 +0,0 @@
----
-title: 'Date & Time Picker :tada:'
-sidebarDepth: 2
----
-
-# Date Picker
-
-:::warning
-`v2.0.0` has introduced a significant number of breaking changes.
-
-[Read the upgrade guide for details.](/changelog/v2.0.html)
-:::
-
-`v-date-picker` is a feature-rich date picker implemented as a wrapper for `v-calendar`. That means that, out of the box, it accepts all props and emits all of the same events.
-
-## Single Dates
-
-`v-date-picker` can bind to single dates using the `v-model` directive.
-
-
-
-```html
-
-```
-
-```js
-data() {
- return {
- date: new Date(),
- }
-}
-```
-
-## Date Ranges
-
-Binding to date ranges is also supported by setting the `is-range` prop.
-
-
-
-```html
-
-```
-
-```js
-data() {
- return {
- range: {
- start: new Date(2020, 0, 1),
- end: new Date(2020, 0, 5)
- }
- }
-}
-```
-
-## Selection Modes :tada:
-
-*Introduced in **`v2.0.0`***
-
-Use the `mode` prop to switch between 3 different date selection modes: `date`, `dateTime` and `time`.
-
-:::warning
-Previous to `v2.0.0`, the `mode` prop was used to switch between `date`, `range` and `multiple` date selections. As of `v2.0.0`, the `mode` prop has been repurposed for the date and time options. To get the previous `range` mode behavior, use the new `is-range` prop. To get the previous `multiple` mode behavior, [here](./examples/datepickers#multiple-dates-legacy) is an example of how to do that.
-:::
-
-### Date
-
-To limit user selection to only date components (month, day, year), use `mode: 'date'`. This is the default prop value, so it isn't explicitly required.
-
-
-
-```html
-
-```
-
-### Date & Time
-
-To allow user selection of date and time components, use `mode: 'dateTime'`. A time picker now appears below the calendar.
-
-:::tip
-Time components are set using the current timezone setting set by the `timezone` prop. By default, this value is `null`, which specifies the local timezone.
-:::
-
-
-
-```html
-
-
-
-
-
-
-
-```
-
-```js
-data() {
- return {
- date: new Date(),
- timezone: '',
- }
-}
-```
-
-#### 24-hr Mode
-
-Use the `is24hr` prop to adjust the hour `select` element and default input format for 24-hr mode.
-
-
-
-```html
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- date: new Date(),
- };
- },
-};
-```
-
-#### Minute Increments
-
-Use the `minute-increment` prop to set custom intervals for the minute `select` options.
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- let date = new Date();
- date.setMinutes(0, 0, 0);
- return {
- date,
- };
- },
-};
-```
-
-:::warning
-If the bound date does not match of the the minute options derived by the `minute-increment` amount, the accurate `minute` amount will be displayed, but this option will be disabled.
-:::
-
-### Time
-
-To limit user selction to only time components (hours, minutes, seconds), use `mode: 'time'`.
-
-
-
-```html
-
-
-
-
-
-
-
- Date (ISO):
- {{ date.toISOString() }}
-
-
-```
-
-```js
-export default {
- data() {
- return {
- date: new Date(),
- timezone: '',
- };
- },
-}
-```
-
-## Model Config :tada:
-
-*Introduced in **`v2.0.0`***
-
-The `model-config` prop is used to provide information about the date bound to `v-date-picker`. For example, if the date you provide is stored in a database as a string, this string value can be bound to `v-date-picker` directly, without any extra conversion logic required by your application.
-
-In short, the `model-config` and `timezone` props help provide a no-hassle approach to working with your data.
-
-### Strings
-
-To bind to a string value, provide a `model-config` with the necessary `type: 'string'` and `mask` properties.
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- customer: {
- name: 'Nathan Reyes',
- birthday: '1983-01-21',
- },
- modelConfig: {
- type: 'string',
- mask: 'YYYY-MM-DD', // Uses 'iso' if missing
- },
- }
- }
-};
-```
-
-### Numbers
-
-To bind to a number value, provide a `model-config` with the necessary `type: 'number'` property.
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- customer: {
- name: 'Nathan Reyes',
- birthday: 411976800000, // Milliseconds since 1 January 1970
- },
- modelConfig: {
- type: 'number',
- },
- }
- }
-};
-```
-
-### Time Adjust
-
-By default, when the user selects a new date, it leaves the existing time value. To auto-adjust the time for selected dates, provide a `model-config` with the desired `timeAdjust` setting in `HH:mm:ss` format. All times use the specified `timezone`, or local timezone if none is provided.
-
-This example assigns the time of selected dates to noon in the browser's local timezone.
-
-
-
-```html
-
-```
-
-```js
-data() {
- return {
- customer: {
- name: 'Nathan Reyes',
- birthday: '1983-01-21T02:30:00-5:00',
- },
- modelConfig: {
- type: 'string',
- mask: 'YYYY-MM-DDTHH:mm:ssXXX',
- timeAdjust: '12:00:00',
- },
- }
-}
-```
-
-| Time Setting | Description |
-| --- | --- |
-| *`HH:MM:SS`* | Custom time in `HH:MM:SS` format |
-| `now` | Assign to the instant of date selection. |
-
-#### Adjust Date Range Times
-
-When used with date ranges, the `modelConfig` may be specified as an object with `start` and `end` properties. For example, when the users selects a date range, we might want to set the selected range to start at the very beginning of the first day until the end of the last day.
-
-
-
-```html
-
-```
-
-```js
-data() {
- return {
- range: {
- start: new Date(2020, 0, 6),
- end: new Date(2020, 0, 9),
- },
- modelConfig: {
- start: {
- timeAdjust: '00:00:00',
- },
- end: {
- timeAdjust: '23:59:59',
- },
- },
- }
-}
-```
-
-## Popovers
-
-To display the picker as a popover, provide your own content as the default slot. Most often this will be an `input` element.
-
-:::warning
-As of `v2.0.0`, `v-date-picker` no longer provides an `input` element as the default slot. This slot **must** be provided by the developer. Additionally, the `inputProps` prop as been deprecated in favor of simply binding the input value to the `inputValue` slot prop.
-:::
-
-### Input
-
-To allow for user date text entry, provide a custom `input` element as the default slot. `v-date-picker` provides formatting, parsing and event handling out of the box via the following slot props:
-
-- `inputValue`: The is the value you should bind to your input. This value will update as new dates are assigned and validated by the component.
-- `inputEvents`: These events include handlers for events that ultimately assign new dates and manage the appearance of the popover (as specified via the `popover` prop).
-
-
-
-```html
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- date: new Date(),
- };
- },
-};
-```
-
-### Range Inputs
-
-When binding to a date range and providing custom `input` elements, the `inputValue` and `inputEvents` are split into separate `start` and `end` sub-properties.
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- range: {
- start: new Date(2020, 9, 12),
- end: new Date(2020, 9, 16),
- },
- };
- },
-};
-```
-
-### Debounce
-
-Use the `input-debounce` prop (in milliseconds) to set a custom debounce duration. This example makes the input a little more responsive to text input by using a debounce of `500ms` rather than the default `1000ms`.
-
-
-
-```html
-
-
-
-
-
-```
-
-```javascript
-export default {
- data() {
- return {
- date: new Date(),
- };
- },
-};
-```
-
-### Disable Update On Input
-
-To completely disable value updates as the user types, set the `update-on-input` prop to false. This will defer updates until the input's `change` event occurs.
-
-
-
-```html
-
-
-
-
-
-```
-
-```javascript
-export default {
- data() {
- return {
- date: new Date(),
- };
- },
-};
-```
-
-### Format & Parse
-
-By default, the localized format will be used to format and parse the input text.
-
-Just like the `v-calendar` component, `v-date-picker` accepts an explicit `locale` prop. This might be preferred if you store your user's locale in a database or want to force all user's to a specific locale.
-
-
-
-```html
-
-
-
-
-
-```
-
-```js
-data() {
- return {
- date: new Date(),
- locale: null,
- };
-},
-created() {
- // Fetch user's locale using custom API (eg. 'en-ZA')
- this.locale = await api.getUserLocale();
-}
-```
-
-To use a custom mask that overrides the `locale`, assign the `masks.input` prop.
-
-
-
-```html
-
-
-
-
-
-```
-
-```js
-data() {
- return {
- date: new Date(),
- masks: {
- input: 'YYYY-MM-DD',
- },
- };
-},
-```
-
-Please reference the [formatting & parsing section](./i18n.md#formatting-parsing-dates) for a complete list of available mask tokens.
-
-### Form Example
-
-Here is a more complex example using a custom input with a validation message and **Clear** button to clear out the date.
-
-
-
-```html
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- date: null,
- };
- },
- computed: {
- errorMessage() {
- if (!this.date) return 'Date is required.';
- return '';
- },
- },
-};
-```
-
-### Advanced Slots
-
-Besides `input`s, other elements may be effectively used as the default slot. When doing so, there are other slot variables that you may use to further customize date selection behavior.
-
-:::tip
-See the [date picker examples](/examples/datepickers.html) for more guidance on using these slot variables.
-:::
-
-Here is a comprehensive list of the available slot props.
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `inputValue` | Object | Input text value. |
-| `inputEvents` | Object | Events that are configured based on the props provided to `v-date-picker`, including `input`, `change` and `keyup`. Props like `update-on-input` and `input-debounce` are handled appropriately. |
-| `isDragging` | Boolean | Set when the user is dragging a new range selection. |
-| `updateValue` | Function | Call to update the value at the time of your choosing. |
-| `showPopover` | Function | Call to manually show the popover. |
-| `hidePopover` | Function | Call to manually hide the popover. |
-| `togglePopover` | Function | Call to show/hide the popover. |
-| `getPopoverTriggerEvents` | Function | Call to get the bindable events for a given display mode. |
-
-#### `updateValue()`
-
-Call `updateValue(value, opts)` to manually update the date value with some side-effect options. All side-effects assume that the provided value is valid.
-
-::: tip
-Values passed to `updateValue()` are validated against `disabled-dates`, `available-dates`, `min-date` and `max-date` props.
-:::
-
-| Parameter | Type | Description | Default Value |
-| --------- | ---- | ----------- | ------------- |
-| `value` | `Date`, `String`, `Number` | New date value | `undefined` |
-| `opts.formatInput` | `Boolean` | Reformat the `inputValue`. | `true` |
-| `opts.hidePopover` | `Boolean` | Hide the popover. | `false` |
-| `opts.debounce` | `Number` | Debounce rate (ms) for which the value is assigned. | `undefined` |
-| `opts.adjustPageRange` | `Boolean` | Adjust the `from-page` in order to properly display the value. | `undefined` |
-
-## Disable Dates
-
-Refer to the [disabling dates section](./dates.md#disabling-dates).
-
-## Require Selected Date
-
-There are 3 ways to clear a selected date (`value = null`).
-
-1. Assign `null` to `value` prop or to local state variable that is bound to using `v-model`
-2. User toggles selected dates by clicking them on the calendar (only valid when `mode` is `"single"` or `"multiple"`)
-3. User clears the input element text and commits the change by pressing the `enter` key or changing focus (`blur` event)
-
-You can prevent methods 2 and 3 by setting the `is-required` prop to `true`.
-
-::: warning
-This effectively prevents the _user_ from clearing the value. The developer can still clear it via method 1.
-:::
-
-## Customize Attributes
-
-`v-date-picker` uses the following props to display date selections:
-
-| Attribute | Description |
-| --------- | ----------- |
-| `select-attribute` | Attribute used to represent the selected value. |
-| `drag-attribute` | Attribute used to represent the dragged value. Valid only when `mode === "range"`. |
-
-To customize these attributes, we just need to provide our own custom attributes objects. Any attributes we provide will replace the default ones.
-
-::: tip
-Both attributes are assigned a key of `"select-drag"`.
-:::
-
-For example, say we want to use a `dot` instead of a `highlight` to denote the selected date. All we would need to do is pass a new `select-attribute`:
-
-
-
-```html
-
-```
-
-```javascript
-export default {
- data() {
- return {
- date: new Date(),
- selectAttribute: {
- dot: true,
- },
- };
- },
-};
-```
-
-### Selection Popover
-
-Finally, let's look at an example of adding a simple popover to the dragged and selected date ranges. Note that here we include the `day-popover` slot, and make sure to assign a truthy value to the `popover` property of the attribute.
-
-We'll first try to display the dragged range, then fall back to the selected range.
-
-
-
-```html
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- dragValue: null,
- range: {
- start: new Date(2018, 0, 8),
- end: new Date(2018, 0, 12),
- },
- };
- },
- computed: {
- selectDragAttribute() {
- return {
- popover: {
- visibility: 'hover',
- isInteractive: false, // Defaults to true when using slot
- },
- };
- },
- },
-};
-```
-
-
diff --git a/docs/datepicker/api.md b/docs/datepicker/api.md
new file mode 100644
index 000000000..df8667e13
--- /dev/null
+++ b/docs/datepicker/api.md
@@ -0,0 +1,122 @@
+---
+title: 'API'
+---
+
+# API
+
+## Props
+
+
+
+`VDatePicker` accepts all the same props as [VCalendar](/calendar/api#props).
+
+
+| Name | Type | Default |
+| --- | --- | --- |
+| **mode** | 'date' \| 'dateTime' \| 'time' | 'date' |
+| **model-value** | [DatePickerDate](#datepickerdate) | null |
+| **rules** | 'auto' \| [DatePartsRules](#datepartsrules) | *undefined* |
+| **is-required** | boolean | false |
+| **is24hr** | boolean | true |
+| **hide-time-header** | boolean | false |
+| **time-accuracy** | number | 2 |
+| **update-on-input** | boolean | true |
+| **input-debounce** | number | 1000 |
+| **popover** | true \| Partial<[PopoverOptions](#popoveroptions)> | [true](/datepicker/slot-content#default-behavior) |
+| **drag-attribute** | [AttributeConfig](/calendar/api#attributeconfig) | *undefined* |
+| **select-attribute** | [AttibuteConfig](/calendar/api#attributeconfig) | *undefined* |
+
+## Events
+
+
+
+`VDatePicker` emits all the same events as [Calendar](/calendar/api#events).
+
+
+| Event | Parameter Type |
+| --- | --- |
+| **update:modelValue** | [DatePickerDate](#datepickerdate) |
+| **drag** | [SimpleDateRange](#simpledaterange) \| null |
+| **popover-will-show** | [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |
+| **popover-did-show** | [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |
+| **popover-will-hide** | [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |
+| **popover-did-hide** | [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |
+
+## Slots
+
+
+
+`VDatePicker` supports all the same slots as [Calendar](/calendar/api#slots).
+
+
+| Name | Props |
+| --- | --- |
+| **_default_** | DatePickerContext |
+| **time-header** | |
+
+## Types
+
+### DatePickerDate
+
+```ts
+type DatePickerDate = number | string | Date | null | {
+ start?: number | string | Date | null,
+ end?: number | string | Date | null
+}
+```
+
+### SimpleDateRange
+
+```ts
+{
+ start: Date;
+ end: Date;
+}
+```
+
+### ModelModifiers
+
+```ts
+interface ModelModifiers {
+ number?: boolean;
+ string?: boolean;
+ range?: boolean;
+}
+```
+
+### DatePartsRules
+
+```ts
+interface DatePartsRules {
+ hours?: DatePartsRule;
+ minutes?: DatePartsRule;
+ seconds?: DatePartsRule;
+ milliseconds?: DatePartsRule;
+}
+
+type DatePartsRule =
+ | number
+ | Array
+ | NumberRuleConfig
+ | DatePartsRuleFunction;
+
+interface NumberRuleConfig {
+ min?: number;
+ max?: number;
+ interval?: number;
+}
+```
+
+### PopoverOptions
+
+```ts
+interface PopoverOptions {
+ visibility: PopoverVisibility; // When the popover appears
+ placement: Placement; // Where the popover appears
+ autoHide: boolean; // Auto-hide popover based on visibility
+ showDelay: number; // Delay (ms) before popover is shown
+ hideDelay: number; // Delay (ms) before popover is hidden
+}
+
+type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';
+```
\ No newline at end of file
diff --git a/docs/datepicker/basics.md b/docs/datepicker/basics.md
new file mode 100644
index 000000000..d20597f4a
--- /dev/null
+++ b/docs/datepicker/basics.md
@@ -0,0 +1,264 @@
+---
+title: Date Picker | Basics
+---
+
+# Basics
+
+`VDatePicker` is a feature-rich date picker component implemented as a wrapper for `VCalendar`. Thus, it accepts all same props and emits all of the same events.
+
+It supports binding to both single dates and dates ranges. It can be configured for date and time selection modes, and can bind to various date types including dates, strings, numbers and even object date configurations.
+
+In short, it was built build to handle most date picker needs.
+
+## Selection modes
+
+`VDatePicker` can be configured to allow the user to select a date, date and time, or only time values via the `mode` prop.
+
+### Date Mode
+
+
+To limit user selection to only date components (month, day, year), use `mode: 'date'`. This is the default prop value, so it isn't explicitly required.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Date Time Mode
+
+To allow user selection of date and time components, use `mode: 'dateTime'`. A time picker now appears below the calendar.
+
+
+
+ Time components are set using the current timezone setting set by the `timezone` prop. By default, this value is `undefined`, which defaults to the local timezone.
+
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Time Mode
+
+To limit user selection to only time components (hours, minutes, seconds), use `mode: 'time'`.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Required date
+
+When selecting dates, the default behavior is to allow the user to reset the date value to `null` after re-selecting the same date.
+
+To prevent this, set the `is-required` prop.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Model modifiers
+
+### String dates
+
+To bind to a string value, set the `string` model modifier. In this example, the date is provided in ISO-8601 format with the Z designator (zero UTC offset).
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+#### Custom mask
+
+If an alternate model format is needed, set the `masks.modelValue` property with the desired format.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Number dates
+
+To bind to a number value, set the `number` modifier. The model value should be an integer value representing the number of milliseconds since January 1, 1970, 00:00:00 UTC (the ECMAScript epoch, equivalent to the UNIX epoch).
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Date ranges
+
+To bind to a date range with `start` and `end` dates, set the `range` modifier.
+
+
+
+The `is-range` prop will continue to be supported, but may be deprecated in a future release.
+
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Combine modifiers
+
+Modifiers may be combined. For example, we could bind to a date range with number dates.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Disable dates
+
+Use `disabled-dates` to prevent selection of dates that intersect the disabled dates. Any dates specified will disable date and time selection for the the full day.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+### Date ranges
+
+Similarly, `disabled-dates` will prevent dragging over secified dates for date ranges.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/datepicker/custom-attributes.md b/docs/datepicker/custom-attributes.md
new file mode 100644
index 000000000..22b1c88eb
--- /dev/null
+++ b/docs/datepicker/custom-attributes.md
@@ -0,0 +1,82 @@
+---
+title: Date Picker | Custom Attributes
+---
+
+# Custom Attributes
+
+`VDatePicker` uses the following props to display date selections:
+
+## Select Attribute
+
+| Attribute | Description |
+| --------- | ----------- |
+| `select-attribute` | Attribute used to represent the selected value. |
+| `drag-attribute` | Attribute used to represent the dragged value. Valid only when `mode === "range"`. |
+
+To customize these attributes, we just need to provide our own custom attributes objects. Any attributes we provide will replace the default ones.
+
+For example, we can use a `dot` instead of a `highlight` to denote the selected date. All we would need to do is pass a new `select-attribute`:
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Selection Popover
+
+Finally, let's customize the `select-attribute` and `drag-attribute` to add a popover as the user is selecting a new range.
+
+To accomplish this, we also need to include the `day-popover` slot, and configure the `popover` in the attribute.
+
+We'll first try to display the dragged range, then fall back to the selected range.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/datepicker/slot-content.md b/docs/datepicker/slot-content.md
new file mode 100644
index 000000000..3425c54a8
--- /dev/null
+++ b/docs/datepicker/slot-content.md
@@ -0,0 +1,342 @@
+# Slot Content
+
+## Default slot
+
+When a default slot is used with `VDatePicker`, that content will display instead of the calendar picker.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+In this simple example, we display a `` as the default slot, and use one of the slot props provided to toggle the calendar popover.
+
+## Slot props
+
+The full date picker context is bound to the default slot. Here are a few props that might be useful for you.
+
+```ts
+interface DatePickerContext {
+ // Value to bind to input element(s)
+ inputValue: string | { start: string; end: string };
+ // Events to bind to input element(s)
+ inputEvents: object;
+ // Popover show/hide methods
+ showPopover: (opts?: Partial) => void;
+ hidePopover: (opts?: Partial) => void;
+ togglePopover: (opts: Partial) => void;
+ // ...,
+}
+```
+
+## Input element
+
+To support date text entry, provide a custom `input` element as the default slot. `VDatePicker` provides formatting, parsing and event handling out of the box via the following slot props:
+
+- `inputValue`: The is the value you should bind to your input. This value will update as new dates are assigned and validated by the component.
+- `inputEvents`: These events include handlers for events that manage debounce, value updates and showing/hiding the popover (as specified via the `popover` prop).
+
+
+
+To exclude popover events from `inputEvents`, assign a falsy value to the `popover` prop.
+
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+### Range Inputs
+
+When binding to a date range and providing custom `input` elements, the `inputValue` and `inputEvents` are split into separate `start` and `end` sub-properties.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Debounce
+
+Use the `input-debounce` prop (in milliseconds) to set a custom debounce duration. This example makes the input a little more responsive to text input by using a debounce of `500ms` rather than the default `1000ms`.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+### Disable Update On Input
+
+To completely disable value updates as the user types, set the `update-on-input` prop to false. This will defer updates until the input's `change` event occurs.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+### Input Format
+
+#### Locale
+
+By default, the browser's detected locale will be used to format and parse the input text.
+
+However, a `locale` prop can be provided to override this setting. This could be helpful if you store your user's locale in a database or want to force all user's to a specific locale.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+#### Mask
+
+Alternatively, if you wish to keep the locale, but just override the locale's input format, provide a custom mask via the `masks.input` prop.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+Please reference the [masks section](../i18n/masks#mask-tokens) for a complete list of available mask tokens.
+
+## Popover
+
+
+The `popover` prop determines how popover events are generated in the `inputEvents` slot prop.
+
+```ts
+type PopoverProp = boolean | Partial;
+
+interface PopoverOptions {
+ visibility: PopoverVisibility; // When the popover appears
+ placement: Placement; // Where the popover appears
+ autoHide: boolean; // Auto-hide popover based on visibility
+ showDelay: number; // Delay (ms) before popover is shown
+ hideDelay: number; // Delay (ms) before popover is hidden
+}
+
+type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';
+```
+
+### Default behavior
+
+The `popover` prop is `true` by default, which means that the events will use the following default settings.
+
+```json
+{
+ visibility: 'hover-focus',
+ autoHide: true,
+ placement: 'bottom-start',
+ showDelay: 0,
+ hideDelay: 110,
+}
+```
+
+Now, if the `inputEvents` have been properly bound to an `input` element, then the popover will display as the user interacts with the input popover.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+### Custom behavior
+
+To customize this behavior, provide a custom `PopoverOptions` object.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+### Manual Control
+
+You may choose to not bind popover behavior to the `inputEvents`, or you may not be using an `input` element at all. In that case, you can manually show/hide the popover by using the provided slot prop functions.
+
+1. Assign a falsy value to the `popover` prop to unbind popover events from `inputEvents`.
+2. Extract the relevant popover methods needed (`togglePopover`, `showPopover`, `hidePopover`) to show/hide the popover manually.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+See the [date picker examples](/examples/date-picker-popovers) for more guidance on using these slot variables.
+
\ No newline at end of file
diff --git a/docs/datepicker/test.md b/docs/datepicker/test.md
new file mode 100644
index 000000000..172394aad
--- /dev/null
+++ b/docs/datepicker/test.md
@@ -0,0 +1 @@
+
diff --git a/docs/datepicker/time-picker.md b/docs/datepicker/time-picker.md
new file mode 100644
index 000000000..45629fe6b
--- /dev/null
+++ b/docs/datepicker/time-picker.md
@@ -0,0 +1,67 @@
+---
+title: Date Picker | Time Picker
+---
+
+# Time Picker
+
+## 24-hr
+
+When `mode` is `dateTime` or `time`, use the `is24hr` prop to use 24-hr selections.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Hide Header
+
+The time header may be hidden via the `hide-time-header` prop.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Accuracy
+
+The `time-accuracy` prop can be used to limit what components are allowed for selection.
+
+The time accuracy is a number mapping to the most accurate time component allowed (`1`: hours, `2`: minutes, `3`: seconds, `4`: milliseconds). The default value is `2`: minutes.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```
diff --git a/docs/datepicker/time-rules.md b/docs/datepicker/time-rules.md
new file mode 100644
index 000000000..a420b1b68
--- /dev/null
+++ b/docs/datepicker/time-rules.md
@@ -0,0 +1,325 @@
+---
+title: Date Picker | Time Rules
+---
+
+# Time Rules
+
+## Introduction
+
+Rules can be defined for time components, including `hours`, `minutes`, `seconds` and `milliseconds`. They can be used for all selection mode types (`date`, `dateTime` and `time`) and both 12 and 24-hour modes.
+
+### Default bahavior
+
+First, it's important to note that, with no rules present, `VDatePicker` will **not** apply any time modifications to a bound date during the mounting phase. This ensures data consistency throughout your web application.
+
+After initial mount, if the user selects new dates in the calendar, only the year, month and day components are updated. If the user selects a new time component in the time picker, only those components are updated, respectively.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Date Example
+
+Let's start with a simple example to show how rules work. We can zero-out time components by setting a `rules` prop object with hard-coded values for the time component keys.
+
+Note how the **Value** displayed below shows the zero-ed out time components. A date was passed in (`new Date()`) and `VDatePicker` applied the rules on mount and re-emitted the new date value.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+Rules are applied to date values on initial mount **and** future updates.
+
+
+
+
+Rules are applied using the calendar's configured timezone (defaults to browser's timezone), unless the `timezone` prop is explicitly provided.
+
+
+
+Rules limit what time component selections are available in the time picker.
+
+
+## Date Range Selection
+
+For date ranges, we can normalize the start time to the start of day and the end time to the end of day. Pass an array of rule objects (`[startRules, endRules]`) to target start and end dates.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+Now that we've briefly been introduced to a few simple rules, we can explore what kind of rules can be defined.
+
+## Rules Definition
+
+The `rules` prop is defined as an object with optional rules specified for each time component key.
+
+```ts
+interface DatePartsRules {
+ hours?: DatePartsRule;
+ minutes?: DatePartsRule;
+ seconds?: DatePartsRule;
+ milliseconds?: DatePartsRule;
+}
+
+type DatePartsRule =
+ | number
+ | Array
+ | NumberRuleConfig
+ | DatePartsRuleFunction;
+```
+
+## Number Rules
+
+A rule with a single number will limit selection to that value. For example, maybe you'd like to limit time selection within a specific hour.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Number List Rules
+
+A rule with an array of numbers will limit selection to values in the list.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+For this example, we are limiting hours and using `is24hr` to enable 24-hour mode. We could similarly use non-24hr mode (am/pm) using the same rules and they would be enforced similarly. In short, you don't need to worry about special handling for non-24hr mode.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Object Rules
+
+A rule may be an object with the following definition.
+
+```ts
+interface NumberRuleConfig {
+ min?: number;
+ max?: number;
+ interval?: number;
+}
+```
+
+All of the properties are optional and may be used in any combination. For example, we could limit selection to afternoon hours and 5-minute increments.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Function Rules
+
+Finally, a rule may be defined as a function that accepts the time component value along with a `DateParts` object and returns a boolean.
+
+```ts
+type DatePartsRuleFunction = (component: number, parts: DateParts) => boolean;
+
+export interface DateParts {
+ dayIndex: number;
+ day: number;
+ dayFromEnd: number;
+ weekday: number;
+ weekdayOrdinal: number;
+ weekdayOrdinalFromEnd: number;
+ week: number;
+ weekFromEnd: number;
+ weeknumber: number;
+ month: number;
+ year: number;
+ date: Date;
+ milliseconds: number;
+ seconds: number;
+ minutes: number;
+ hours: number;
+ time: number;
+ dateTime: number;
+ isValid: boolean;
+ timezoneOffset: number;
+ isPm?: boolean;
+}
+```
+
+These are the most flexible type of rules. For example, we could limit time selection to morning hours on weekends.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Auto Rules
+
+`VDatePicker` can make a "best guess" for what rules to apply based on the current date `mode` and `time-accuracy` props.
+
+For example, using `mode: 'date'` will zero-out hours, minutes, seconds and milliseconds. Otherwise, the `time-accuracy` prop will only zero-out components more accurate than the current setting. Finally, more adjustments could be made when using the `range` modifier.
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/dates.md b/docs/dates.md
deleted file mode 100644
index 5d26b85db..000000000
--- a/docs/dates.md
+++ /dev/null
@@ -1,342 +0,0 @@
----
-sidebarDepth: 2
----
-
-# Working with dates
-
-Understanding how to configure date expressions is a critical part to using VCalendar. Specifically, they are used for the following purposes:
-
-- Determining where and how attributes are displayed
-- Disabling date selection by the user
-- Setting the selected date(s) for `v-date-picker`
-
-In this guide, a **date expression** may be used to denote any of the following:
-
-* Single Dates
-* Date Ranges
-* Date Patterns
-* Collection of any of the above
-
-## Single Dates
-
-The first type of date expression is a simple native Javascript date object.
-
-Here is an example of using a date to display a simple attribute. We'll get into how to configure attributes in more detail later, but for now we can just focus on the `dates` expression below:
-
-
-
-```js{8}
-...
-data() {
- return {
- attributes: [
- {
- key: 'today',
- highlight: true,
- dates: new Date()
- }
- ]
- }
-}
-```
-
-:::tip
-The `dates` key implies that an array should be used. While arrays are allowed, if you pass a single date object, it will get wrapped in an array for you.
-:::
-
-## Date Ranges
-
-Date ranges define a range of contiguous dates. They are expressed as a simple object with the following properties:
-
-| Property | Description |
-| --- | --- |
-| `start` | Start of the date range |
-| `end` | End of the date range (optional) |
-|`span` | Number of days to extend the range after the start date (optional). This may be used instead of the `end` date. |
-
-
-
-```js
- ...
- dates: [
- { start: new Date(2018, 0, 1), end: new Date(2018, 0, 5) },
- { start: new Date(2018, 0, 15), span: 5 } // # of days
- ]
- ...
-```
-
-A `null` value denotes an infinite start or end date.
-
-
-
-```js
- ...
- dates: {
- start: null, // From the beginning of time
- end: new Date() // Until today
- }
- ...
-```
-
-Optionally, if using `null` dates, you can omit them entirely.
-
-```js
-...
-dates: {
- end: new Date() // Same as before
-}
-...
-```
-
-Thus, an empty object is a valid date expression...
-
-
-
-```js
- ...
- // From the beginning of time until the end of time
- dates: {},
- ...
-```
-
-## Date Patterns
-
-Date patterns are an extension of date ranges. They can target dates that would be incredibly difficult, if not impossible, to do otherwise with simple dates or date ranges. To configure a date pattern, let's first start with a simple date range.
-
-```js
- ...
- dates: {
- start: new Date(2018, 0, 1), // Jan 1st, 2018
- end: new Date(2019, 0, 1) // Jan 1st, 2019
- },
- ...
-```
-
-The only thing we need to do to convert this date range into a date pattern is to start adding patterns to it. For this example, we'll just target the weekends.
-
-
-
-```js
- ...
- dates: {
- start: new Date(2018, 0, 1), // Jan 1st, 2018
- end: new Date(2019, 0, 1), // Jan 1st, 2019
- weekdays: [1, 7] // ...on Sundays and Saturdays
- },
- ...
-```
-
-We can also target other specific day properties, like `days: [6, 15]` for the 6th and 15th of the month, `weeks: [-1]` for the last week of the month and even `ordinalWeekdays: { [-1]: 1 }` for the last Sunday of the month.
-
-For the next example, let's display dot indicators on the last Friday of every other month, starting on January 1st of 2018.
-
-
-
-```js
-...
- attrs: [
- {
- dot: 'red',
- dates: {
- start: new Date('1/1/2018'),
- monthlyInterval: 2, // Every other month
- ordinalWeekdays: { [-1]: 6 } // ...on the last Friday
- }
- }
- ]
-...
-```
-
-*Pretty cool!!* :ok_hand:
-
-Now, for some reason, we also want to target the 15th of every other month (in addition to the last Friday), so this might be our first attempt:
-
-```js{6}
-...
-dates: {
- start: new Date('1/1/2018'),
- monthlyInterval: 2, // Every other month
- ordinalWeekdays: { [-1]: 6 }, // ...on the last Friday
- days: 15 // ...and on the 15th? (WRONG!)
-},
-...
-```
-
-But this would be **wrong**, because all component specifiers are conditionally *anded* with each other. In other words, this would only target the last Friday of every other month that also happened to be on the 15th of the month (which would never occur).
-
-To evaluate a set of conditions *or* another set, we can break the sets of conditions out into an array assigned to the `on` property.
-
-```js{5-8}
-...
-dates: {
- start: new Date('1/1/2018'),
- monthlyInterval: 2, // Every other month
- on: [ // ...on...
- { ordinalWeekdays: { [-1]: 6 } }, // ...the last Friday
- { days: 15 } // ...or the 15th of the month
- ]
-}
-...
-```
-
-Note how we kept the `monthlyInterval` condition outside of the array. Any conditions that should be **anded** with all the others can be extracted out of the array. This prevents unnecessary duplication of conditions within the array.
-
-Here is a complete reference of date component specifiers available.
-
-| Property | Type | Description | Range |
-| --- | --- | --- | --- |
-| `days` | Number, Array | Day number from the start or end of the month. | 1 to 31, -1 to -31 |
-| `weekdays` | Number, Array | Day of the week. | 1: Sun to 7: Sat |
-| `ordinalWeekdays` | Object (key: Number / value: Number, Array) | Weekday ordinal position from the start or end of the month. | key: 1 to 6, -1 to -6 / value: 1: Sun to 7: Sat |
-| `weeks` | Number, Array | Week number from the start or end of the month. | 1 to 6, -1 to -6 |
-| `months` | Number, Array | Months of the year. | 1 to 12 |
-| `years` | Number, Array | Year numbers. | 4-digit integer |
-| `dailyInterval` | Number | Interval number of days from the start date (or today when no start date provided). | n > 0 |
-| `weeklyInterval` | Number | Interval number of weeks from the start date (or today). | n > 0 |
-| `monthlyInterval` | Number | Interval number of months from the start date (or today). | n > 0 |
-| `yearlyInterval` | Number | Interval number of years from the start date (or today). | n > 0 |
-
-## Collections
-
-Any of the previously mentioned singular date expressions may be combined using an array.
-
-
-
-```js
- ...
- dates: [
- new Date(2018, 0, 1),
- {
- start: new Date(2018, 0, 10),
- end: new Date(2018, 0, 12)
- },
- new Date(2018, 0, 15),
- ],
- ...
-```
-
-## Disabling Dates
-
-:::tip
-In pre-v1 versions, dates could only be disabled for `v-date-picker`. Disabling dates are now supported for `v-calendar` as well.
-:::
-
-As mentioned earlier, date expressions are not only used to define attributes. They can also be used to "disable" calendar days. Disabled dates have the following effects:
-
-* Day text color has less contrast than normal day cells
-* If using `min-date` navigation is disabled for months before specified date
-* If using `max-date` navigation is disabled for months after specified date
-* Hover, focus and click events are still active for disabled dates
-
-::: tip
-Use the `dayContentDisabled` and `dayDisabled` theme settings to customize how disabled days look and behave. For example, a class applied with `pointer-events: none` could disable interaction with disabled dates.
-:::
-
-You can disable dates, date ranges and date patterns using the following methods:
-
-### 1. Explicitly via `min-date`
-
-
-
-```html
-
-```
-
-:::tip
-When using `min-date`, this also prevents the user from navigating to pages before the date specified.
-:::
-
-### 2. Explicitly via `max-date`
-
-
-
-```html
-
-```
-
-:::tip
-When using `max-date`, this also prevents the user from navigating to pages after the date specified.
-:::
-
-### 3. Explicitly via `disabled-dates`
-
-When using `disabled-dates`, you can use a full date expression to specify a set of disabled dates. That is, a date object, date range object, date pattern or an array of either of these may be used.
-
-:::tip
-`disabled-dates` may be used in combination with the `min-date` and `max-date` props.
-:::
-
-
-
-```html
-
-
-```
-
-### 4. Implicitly via `available-dates`.
-
-Any dates not included in `available-dates` are disabled.
-
-
-
-```html
-
-```
-
-::: warning
-When using `disabled-dates` and `available-dates`, `v-calendar` will not automatically disable page navigation for you, whereas using `min-date` and `max-date` will disable pages that are before `min-date` and after `max-date`.
-
-Use the `min-date`, `min-page`, `max-date` or `max-page` props to manually assign the page bounds when using `disabled-dates` or `available-dates`.
-:::
-
-## Include vs Exclude Dates
-
-Currently, there are four places where date expressions are used:
-* [`attribute.dates`](/api/attribute.md#dates): Date(s) to display attributes .
-* [`attribute.excludeDates`](/api/attribute.html#exclude-dates): Date(s) to NOT display attributes. All other dates are displayed.
-* [`disabled-dates`](/api/datepicker.html#disabled-dates) Date(s) to disable for `v-calendar` & `v-date-picker`.
-* [`available-dates`](/api/datepicker.html#available-dates) Date(s) to enable for `v-calendar` & `v-date-picker`. All other dates are disabled.
-
-In all places where date expressions are used, you'll notice that they come in pairs. One expression is for the explicit form (`dates`, `disabled-dates`), and the other expression is for the implicit form (`excludeDates`, `available-dates`).
-
-The explicit form is the most direct form of expressing what dates to target.
-
-However, it might be more efficient to express what dates you would like to exclude, or avoid. For example, in `v-date-picker`, if you only want to allow date selections in the month of January of 2018, both of these expressions would work just fine:
-
-```html
-
-```
-
-```html
-
-```
-
-The second expression is more terse and declarative than the first. It even performs slighly better. The point is, just take a second to consider which method is best suited for your application.
\ No newline at end of file
diff --git a/docs/event-calendar/introduction.md b/docs/event-calendar/introduction.md
new file mode 100644
index 000000000..ce9484790
--- /dev/null
+++ b/docs/event-calendar/introduction.md
@@ -0,0 +1,5 @@
+---
+title: Introduction
+---
+
+# Introduction
\ No newline at end of file
diff --git a/docs/examples/date-picker-footer.md b/docs/examples/date-picker-footer.md
new file mode 100644
index 000000000..a811cacf3
--- /dev/null
+++ b/docs/examples/date-picker-footer.md
@@ -0,0 +1,31 @@
+# Footer content
+
+## Select today button
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/examples/date-picker-popovers.md b/docs/examples/date-picker-popovers.md
new file mode 100644
index 000000000..0975c2c0b
--- /dev/null
+++ b/docs/examples/date-picker-popovers.md
@@ -0,0 +1,14 @@
+---
+title: Date Picker | Popovers
+---
+
+# Popovers
+
+## Form Example
+
+Here is a more complex example using a custom input with a validation message and **Clear** button to clear out the date.
+
+
+
+```vue
+```
diff --git a/docs/examples/date-picker-time-rules.md b/docs/examples/date-picker-time-rules.md
new file mode 100644
index 000000000..3ad51a55c
--- /dev/null
+++ b/docs/examples/date-picker-time-rules.md
@@ -0,0 +1,51 @@
+# Time Rules
+
+## Date with rules
+
+
+
+
+
+```vue
+
+
+
+
+
+```
+
+## Date range with rules
+
+
+
+
+
+```vue
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/examples/datepickers.md b/docs/examples/datepickers.md
deleted file mode 100644
index 697a7ca67..000000000
--- a/docs/examples/datepickers.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: 'Date Pickers'
-sidebarDepth: 2
----
-
-## Multiple Dates
-
-### Legacy Multiple Mode
-
-In `2.0`, the `mode: "multiple"` option was deprecated. However, you can still use the native `attributes` prop and `dayclick` event to re-create the save behavior.
-
-
-
-```html
-
-```
-
-```js
-export default {
- data() {
- return {
- days: [],
- };
- },
- computed: {
- dates() {
- return this.days.map(day => day.date);
- },
- attributes() {
- return this.dates.map(date => ({
- highlight: true,
- dates: date,
- }));
- },
- },
- methods: {
- onDayClick(day) {
- const idx = this.days.findIndex(d => d.id === day.id);
- if (idx >= 0) {
- this.days.splice(idx, 1);
- } else {
- this.days.push({
- id: day.id,
- date: day.date,
- });
- }
- },
- },
-};
-```
-
-### Date Buttons
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- dates: [
- {
- date: new Date(),
- },
- ],
- selected: {},
- };
- },
- methods: {
- addDate() {
- this.dates.push({
- date: new Date(),
- });
- this.$nextTick(() => {
- const btn = this.$refs.button[this.$refs.button.length - 1];
- btn.click();
- });
- },
- removeDate(date, hide) {
- this.dates = this.dates.filter((d) => d !== date);
- hide();
- },
- dateSelected(e, date, toggle) {
- this.selected = date;
- toggle({ ref: e.target });
- },
- },
-};
-```
-
-## Date Range
-
-
-
-```html
-
-
-
-```
-
-```js
-export default {
- data() {
- return {
- range: {
- start: new Date(2020, 0, 6),
- end: new Date(2020, 0, 23),
- },
- masks: {
- input: 'YYYY-MM-DD h:mm A',
- },
- };
- },
-};
-```
-
-## Button Dropdown
-
-This examples utilizes a dedicated button for displaying the dropdown picker. Here, the `input` element is readonly, so the user is required to use the picker for date selection.
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-```
-```js
-export default {
- data() {
- return {
- date: new Date(),
- };
- },
-};
-```
\ No newline at end of file
diff --git a/docs/examples/event-calendar.md b/docs/examples/event-calendar.md
new file mode 100644
index 000000000..e79b46d0f
--- /dev/null
+++ b/docs/examples/event-calendar.md
@@ -0,0 +1,6 @@
+---
+title: Event Calendar Examples
+layout: page
+---
+
+
\ No newline at end of file
diff --git a/docs/examples/github.md b/docs/examples/github.md
new file mode 100644
index 000000000..2de253397
--- /dev/null
+++ b/docs/examples/github.md
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/docs/examples/index.md b/docs/examples/index.md
new file mode 100644
index 000000000..1b976a9b7
--- /dev/null
+++ b/docs/examples/index.md
@@ -0,0 +1 @@
+# Examples
\ No newline at end of file
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
new file mode 100644
index 000000000..1f92edec8
--- /dev/null
+++ b/docs/getting-started/installation.md
@@ -0,0 +1,159 @@
+---
+title: 'Installation'
+---
+
+# Installation
+
+
+
+[Vue.js](https://vuejs.org) 3.2+, [Popper.js](https://popper.js.org/docs/v2/) 2.0+ are required.
+
+
+## Install Plugin
+
+::: code-group
+
+```shell [npm]
+npm install v-calendar@next @popperjs/core
+```
+
+```shell [yarn]
+yarn add v-calendar@next @popperjs/core
+```
+
+:::
+
+## Use Plugin
+
+
+
+**As of `v3.0.0-alpha.7`, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.**
+
+
+```js
+import 'v-calendar/style.css';
+```
+
+### Method 1: Use Globally
+
+::: code-group
+
+```js [main.js]
+import VCalendar from 'v-calendar';
+import 'v-calendar/style.css';
+
+// Use plugin with optional defaults
+app.use(VCalendar, {})
+```
+
+```html [MyComponent.vue]
+
+
+
+
+```
+
+:::
+
+### Method 2: Use Components Globally
+
+::: code-group
+
+```js [main.js]
+import { setupCalendar, Calendar, DatePicker } from 'v-calendar';
+import 'v-calendar/style.css';
+
+// Use plugin defaults (optional)
+app.use(setupCalendar, {})
+
+// Use the components
+app.component('VCalendar', Calendar)
+app.component('VDatePicker', DatePicker)
+```
+
+```html [MyComponent.vue]
+
+
+
+
+```
+
+:::
+
+### Method 3: Use Components As Needed
+
+::: code-group
+
+```js [main.js]
+import { setupCalendar } from 'v-calendar';
+
+// Use calendar defaults (optional)
+app.use(setupCalendar, {})
+```
+
+```vue [MyComponent.vue]
+
+
+
+
+
+
+```
+
+:::
+
+### Plugin Defaults
+
+As referenced above, custom defaults can be provided when using the plugin, but still can be overridden by props on `VCalendar` or `VDatePicker` components.
+
+[Reference defaults](/calendar/api#defaults)
+
+## Use from CDN
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/docs/getting-started/upgrade-guide.md b/docs/getting-started/upgrade-guide.md
new file mode 100644
index 000000000..1f4e58360
--- /dev/null
+++ b/docs/getting-started/upgrade-guide.md
@@ -0,0 +1,94 @@
+---
+title: 'Upgrade Guide'
+---
+
+# Upgrade Guide
+
+This document outlines how to upgrade VCalendar from v2 to v3.
+
+Some changes introduced in versions previous to `3.0.0-alpha.9` have also been rolled back. They will be noted with the following warning:
+
+
+
+## Deprecated Screens Mixin
+
+The included screens mixin that supplied the `$screens` function has been removed. Responsive calendar layouts are still possible using a dedicated screen utility plugin like [vue-screen-utils](https://github.com/nathanreyes/vue-screen-utils).
+
+[Read more](/calendar/layouts#responsive-layouts)
+
+## Calendar
+
+### Replace `from-page`, `to-page`, `from-date`, and `to-date` props
+
+Use the `initial-page` and `initial-page-position` props to correctly set the initial months for a calendar.
+
+[Read more](/calendar/api#props)
+
+### Replace `is-expanded` prop
+
+The `expanded` prop should now be used in lieu of `is-expanded` to set full-width calendars.
+
+### Replace Highlight Fill Mode
+
+The `none` option for `attribute.highlight.fillMode` has been deprecated in favor of the more descriptive `outline` option.
+
+[Read more](/calendar/attributes#highlights)
+
+### Repeating dates config
+
+When using repeating dates with date expressions, repeat rules must now be nested within a `repeat` object. This change was made to support repeating date ranges, which was not possible in v2.
+
+Also, the separate repeat interval keys (`dailyInterval`, `weeklyInterval`, `monthlyInterval`, `yearlyInterval`) have been deprecated in favor of the `every` key.
+
+```vue{13-16}
+
+
+
+
+
+```
+
+[Read more](/calendar/dates#repeating-dates)
+
+### Added `moveBy`
+
+Any direct calls of the `move` function on the calendar to move forward and back by *n* number of months should now use `moveBy`.
+
+[Read more](/calendar/navigation#move-by-number-of-pages)
+
+## DatePicker
+
+### Deprecate `modelConfig` prop
+
+Use the `number` and `string` model modifiers in favor of the `modelConfig` prop. Provide the `masks.modelValue` prop if a string mask is needed.
+
+[Read more](/datepicker/basics#model-modifiers)
+
+### Soft-Deprecate `is-range`
+
+Using the `is-range` prop to bind to date ranges is soft-deprecated. To bind to date ranges, use the `range` model modifier.
+
+[Read more](/datepicker/basics#date-ranges).
+
+### Deprecate `minute-increment` and `valid-hours` props
+
+
+
+The `minute-increment` and `valid-hours` props have been deprecated in favor of using the `rules` prop.
+
+[Read more](/datepicker/time-rules)
\ No newline at end of file
diff --git a/docs/github/README.md b/docs/github/README.md
deleted file mode 100644
index 70aa2fe6e..000000000
--- a/docs/github/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 'GitHub Issues'
-layout: TestLayout
----
-
-
\ No newline at end of file
diff --git a/docs/i18n.md b/docs/i18n.md
deleted file mode 100644
index 76673a66f..000000000
--- a/docs/i18n.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: 'i18n'
-sidebarDepth: 2
----
-
-# i18n
-
-VCalendar utilizes the [well supported](https://caniuse.com/#feat=internationalization) Internationalization API to derive month and weekday names and formatting. This helps keep the package size down, as well as supporting multiple locales in the most performant and isomorphic way.
-
-## Locales
-
-A locale includes multiple settings that are typically assigned on a per region basis. This currently includes the following:
-
-| Setting | Description |
-| --- | --- |
-| `firstDayOfWeek` | The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully). |
-| `masks` | Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more. |
-| `dayNames` | Full length identifiers for the days of the week. |
-| `dayNamesShort` | 3-character identifiers for the days of the week. |
-| `dayNamesShorter` | 2-character identifiers for the days of the week. |
-| `dayNamesNarrow` | 1-character identifiers for the days of the week. |
-| `monthNames` | Full length identifiers for the months of the year. |
-| `monthNamesShort` | Abbreviated identifiers for the months of the year. |
-
-There are multiple ways which you can configure the locale for a specific calendar. Locales may be configured globally via the defaults object as well as on a per-calendar basis with the `locale` prop.
-
-#### **No specified locale**
-
-```html
-
-```
-
-With no locale specified, the locale detected by the Internationalization API is used.
-
-#### **No specified locale w/ override props**
-
-```html
-
-```
-
-
-
-
-
-Uses the detected locale with customized `firstDayOfWeek` or `masks` that will override the built-in locale settings. When using a customized `masks` prop, the default masks will supply any masks that are missing, so you are free to provide single overrides.
-
-#### **String Locale**
-
-```html
-
-```
-
-
-
-
-
-With a string locale, the locale with the matching identifier is used. The Internationalization API is used to generate the `dayNames`, `dayNamesShort`, `dayNamesShorter`, `dayNamesNarrow`, `monthNames` and `monthNamesShort` properties. Because the API does not provide common values for the `firstDayOfWeek` or `masks` these are loaded from the plugin defaults (unless specifically provided via props).
-
-#### **Object Locale**
-
-```html
-
-```
-
-
-
-
-
-With an object locale, you can simply provide all the settings you need together in a single object.
-Note that `firstDayOfWeek` and `masks` props will override this object.
-
-#### **Providing default locales for all calendars**
-
-More conveniently, you may override or provide missing locale information via the `locales` property of the defaults object when using VCalendar. This should be an object with the locale identifier as the key and an object with the locale settings.
-
-```js
-import Vue from 'vue'
-import VCalendar from 'v-calendar'
-
-Vue.use(VCalendar, {
- locales: {
- 'pt-PT': {
- firstDayOfWeek: 1,
- masks: {
- L: 'YYYY-MM-DD',
- // ...optional `title`, `weekdays`, `navMonths`, etc
- }
- }
- }
-});
-```
-
-Then, all you need to do is reference your locale when using the calendar component.
-
-```html
-
-```
-
-
-
-
-
-## Formatting & Parsing Dates
-
-As mentioned before, the locale masks are used to properly format and/or parse dates for the following calendar sections:
-
-| Property Name | Target Area | Default Mask |
-| ------------ | ----------- | -------------- |
-| `title` | Calendar header title | `"MMMM YYYY"` |
-| `weekdays` | Weekday headers | `"W"` |
-| `navMonths` | Month labels in navigation dropdown | `"MMM"` |
-| `dayPopover` | Date in day popover when user hovers selected date. | `"WWW, MMM D, YYYY"` |
-| `input` | Input element text when `is-inline === false`. (*`v-date-picker` only*) | `["L", "YYYY-MM-DD", "YYYY/MM/DD"]` |
-| `data` | Parses attribute dates, if needed | `["L", "YYYY-MM-DD", "YYYY/MM/DD"]` |
-
-#### Parsing using multiple masks
-
-You'll notice an array was used to specify the `input` mask for `v-date-picker`. This is because it uses the supplied masks(s) to parse, as well as display, the selected date. The first supplied mask is used to display the date selection, while all masks are used (from first to last) to parse the date string. The first successfully parsed date is used as the selected date. This provides more flexibility for the user when manually typing in dates.
-
-By default, `v-date-picker` will first try and use the localized long date mask to parse the date, but will also try to parse masks that are globally unambiguous (*YYYY-MM-DD* and *YYYY/MM/DD*). Furthermore, because `v-date-picker` uses its own parsing logic ([rather than relying on the browser's inconsistent `Date.parse` function](http://blog.dygraphs.com/2012/03/javascript-and-dates-what-mess.html)), it can properly parse ISO-8601 dates to the user's local time zone instead of converting to UTC. If you plan on targeting browsers from multiple locales, it is probably best to defer to the default mask settings.
-
-### Mask Tokens
-
-Use the following tokens to configure your custom masks:
-
-| | Token | Output |
-| -------- | ----- | ------ |
-| **Month** | `M` | 1, 2, ..., 12 |
-| | `MM` | 01, 02, ..., 12 |
-| | `MMM` | Jan, Feb, ..., Dec |
-| | `MMMM` | January, February, ..., December |
-| **Day of Month** | `D` | 1, 2, ..., 31 |
-| | `DD` | 01, 02, ..., 31 |
-| | `Do` | 1st, 2nd, ..., 31st |
-| **Day of Week** | `d` | 1, 2, ..., 7 |
-| | `d` | 1, 2, ..., 7 |
-| | `dd` | 01, 02, ..., 07 |
-| | `W` | S, M, ..., S |
-| | `WW` | Su, Mo, ..., Sa |
-| | `WWW` | Sun, Mon, ..., Sat |
-| | `WWWW` | Sunday, Monday, ..., Saturday |
-| **Year** | `YY` | 70, 71, ... 69 |
-| | `YYYY` | 1970, 1971, ..., 2069 |
-| **Long Date** | `L` | 01/21/1983 (en-US), 21/01/1983 (en-GB), ..., 1983/01/21 (*civilized*) |
-
-With all of this in mind, it is probably best that you rely on the the plugin's built-in methods for detecting the user's locale. However, if you would like to force a specific locale for all users, you may supply your own [default locale](#custom-defaults) using the [*language-region*](https://lingohub.com/developers/supported-locales/language-designators-with-regions/) format.
\ No newline at end of file
diff --git a/docs/i18n/locales.md b/docs/i18n/locales.md
new file mode 100644
index 000000000..245684b4d
--- /dev/null
+++ b/docs/i18n/locales.md
@@ -0,0 +1,101 @@
+---
+title: 'Locales'
+---
+
+# Locales
+
+A locale includes multiple settings that are typically assigned on a per region basis. This currently includes the following:
+
+| Setting | Description |
+| --- | --- |
+| `firstDayOfWeek` | The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully). |
+| `masks` | Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more. |
+| `dayNames` | Full length identifiers for the days of the week. |
+| `dayNamesShort` | 3-character identifiers for the days of the week. |
+| `dayNamesShorter` | 2-character identifiers for the days of the week. |
+| `dayNamesNarrow` | 1-character identifiers for the days of the week. |
+| `monthNames` | Full length identifiers for the months of the year. |
+| `monthNamesShort` | Abbreviated identifiers for the months of the year. |
+
+There are multiple ways which you can configure the locale for a specific calendar. Locales may be configured globally via the defaults object as well as on a per-calendar basis with the `locale` prop.
+
+
+
+The [well supported](https://caniuse.com/#feat=internationalization) Internationalization API is used to derive month and weekday names and formatting. This helps keep the package size down, as well as supporting multiple locales in the most performant and isomorphic way.
+
+
+## Default Locale
+
+```html
+
+```
+
+With no locale specified, the locale detected by the Internationalization API is used.
+
+## Default w/ Props
+
+```html
+
+```
+
+
+
+
+
+Uses the detected locale with customized `firstDayOfWeek` or `masks` that will override the built-in locale settings. When using a customized `masks` prop, the default masks will supply any masks that are missing, so you are free to provide single overrides.
+
+## String Locale
+
+```html
+
+```
+
+
+
+
+
+With a string locale, the locale with the matching identifier is used. The Internationalization API is used to generate the `dayNames`, `dayNamesShort`, `dayNamesShorter`, `dayNamesNarrow`, `monthNames` and `monthNamesShort` properties. Because the API does not provide common values for the `firstDayOfWeek` or `masks` these are loaded from the plugin defaults (unless specifically provided via props).
+
+## Object Locale
+
+```html
+
+```
+
+
+
+
+
+With an object locale, you can simply provide all the settings you need together in a single object.
+Note that `firstDayOfWeek` and `masks` props will override this object.
+
+## Custom Defaults
+
+More conveniently, you may override or provide missing locale information via the `locales` property of the defaults object when using VCalendar. This should be an object with the locale identifier as the key and an object with the locale settings.
+
+```js
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+Vue.use(VCalendar, {
+ locales: {
+ 'pt-PT': {
+ firstDayOfWeek: 1,
+ masks: {
+ L: 'YYYY-MM-DD',
+ // ...optional `title`, `weekdays`, `navMonths`, etc
+ }
+ }
+ }
+});
+```
+
+Then, all you need to do is reference your locale when using the calendar component.
+
+```html
+
+```
+
+
+
+
\ No newline at end of file
diff --git a/docs/i18n/masks.md b/docs/i18n/masks.md
new file mode 100644
index 000000000..b50bd4bc3
--- /dev/null
+++ b/docs/i18n/masks.md
@@ -0,0 +1,63 @@
+# Masks
+
+## Mask Targets
+
+Masks are used to properly format and/or parse dates for `VCalendar` and `VDatePicker`.
+
+| Property Name | Target Area | Default Mask |
+| ------------ | ----------- | -------------- |
+| `title` | Calendar header title | `"MMMM YYYY"` |
+| `weekdays` | Calendar weekday headers | `"W"` |
+| `navMonths` | Month labels in navigation dropdown | `"MMM"` |
+| `dayPopover` | Date header in day popover when user hovers selected date | `"WWW, MMM D, YYYY"` |
+| `data` | Parses attribute dates, if needed | `["L", "YYYY-MM-DD", "YYYY/MM/DD"]` |
+| `modelValue` | Date picker model value when using `v-model.string` modifier | `"iso"` |
+| `input` | Date picker input element text when `is-inline === false` | `["L", "YYYY-MM-DD", "YYYY/MM/DD"]` |
+
+### Parsing using multiple masks
+
+Note how an array was used to specify the `input` mask for `VDatePicker`. This is because it uses the supplied masks(s) to parse, as well as display, the selected date. The first supplied mask is used to display the date selection, while all masks are used (from first to last) to parse the date string. The first successfully parsed date is used as the selected date. This provides more flexibility for the user when manually typing in dates.
+
+By default, `VDatePicker` will first try and use the localized long date mask to parse the date, but will also try to parse masks that are globally unambiguous (*YYYY-MM-DD* and *YYYY/MM/DD*). Furthermore, because `VDatePicker` uses its own parsing logic ([rather than relying on the browser's inconsistent `Date.parse` function](http://blog.dygraphs.com/2012/03/javascript-and-dates-what-mess.html)), it can properly parse ISO-8601 dates to the user's local time zone instead of converting to UTC.
+
+If you plan on targeting browsers from multiple locales, it is probably best to defer to the default mask settings.
+
+## Mask Tokens
+
+Use the following tokens to configure your custom masks:
+
+| | Token | Output |
+| -------- | ----- | ------ |
+| **Month** | `M` | 1, 2, ..., 12 |
+| | `MM` | 01, 02, ..., 12 |
+| | `MMM` | Jan, Feb, ..., Dec |
+| | `MMMM` | January, February, ..., December |
+| **Month Day** | `D` | 1, 2, ..., 31 |
+| | `DD` | 01, 02, ..., 31 |
+| | `Do` | 1st, 2nd, ..., 31st |
+| **Week Day** | `d` | 1, 2, ..., 7 |
+| | `d` | 1, 2, ..., 7 |
+| | `dd` | 01, 02, ..., 07 |
+| | `W` | S, M, ..., S |
+| | `WW` | Su, Mo, ..., Sa |
+| | `WWW` | Sun, Mon, ..., Sat |
+| | `WWWW` | Sunday, Monday, ..., Saturday |
+| **Year** | `YY` | 70, 71, ... 69 |
+| | `YYYY` | 1970, 1971, ..., 2069 |
+| **Hour** | `h` | 1, 2, ..., 11, 12 |
+| | `hh` | 01, 01, ..., 11, 12 |
+| | `H` | 0, 1, ..., 22, 23 |
+| | `HH` | 00, 01, ..., 22, 23 |
+| **Minute** | `m` | 1, 2, ..., 59, 60 |
+| | `mm` | 01, 02, ..., 58, 59 |
+| **Second** | `s` | 1, 2, ..., 58, 59 |
+| | `ss` | 01, 02, ..., 58, 59 |
+| **Fractional Second** | `S` | 0, 1, ..., 8, 9 |
+| | `SS` | 0, 1, ..., 98, 99 |
+| | `SSS` | 0, 1, ..., 998, 999 |
+| **AM/PM** | `A` | AM PM |
+| | `a` | am pm |
+| **Timezone** | `ZZ` | -11, -10, ..., +10, +11 |
+| | `ZZZ` | -1100, -1000, ..., +1000, +1100 |
+| | `ZZZZ` | -11:00, -10:00, ..., +10:00, +11:00 |
+| **Localized Date** | `L` | 01/21/1983 (en-US), 21/01/1983 (en-GB), ..., 1983/01/21 (*civilized*) |
\ No newline at end of file
diff --git a/docs/i18n/timezones.md b/docs/i18n/timezones.md
new file mode 100644
index 000000000..9c0385a1a
--- /dev/null
+++ b/docs/i18n/timezones.md
@@ -0,0 +1,111 @@
+---
+title: 'Timezones'
+---
+
+# Timezones
+
+To assign a timezone, pass the `timezone: String` prop with the desired timezone setting for either `VDatePicker` or `VCalendar`.
+
+Reference this [stack overflow](https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript) question for guidance on obtaining a base list of available timezones. In addition to the timezones supported, `UTC` may be used for the Coordinated Universal Time setting.
+
+By default, the `timezone` prop is `undefined`, which defaults to using the browser's local timezone.
+
+## Calendar Attributes
+
+The `timezone` prop is used to set the beginning and ending time boundaries for each calendar day. As a result, a calendar attribute that displays for a user in one timezone may display differently in another timezone.
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+## Date Picker
+
+When using the `timezone` prop with `VDatePicker`, the displayed time will reflect the time associated with the date in the specified timezone.
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+## Time Rules
+
+Assigned `rules` will respect the assigned `timezone`, or the local browser's timezone otherwise.
+
+
+
+
+
+```vue
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..dbd9de47c
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,94 @@
+---
+title: Welcome
+---
+
+# VCalendar
+
+Welcome to VCalendar, a calendar a date picker plugin for Vue.js.
+
+Version 3 brings a host of feature improvements and bug fixes, including [weekly views](/calendar/layouts.html#weekly-view), a [simplified time picker](/datepicker/time-picker), [repeating date ranges](/calendar/dates.html#repeating-dates), [time rules](/datepicker/time-rules), and performance improvements.
+
+If upgrading from version 2.0, be sure to view the [upgrade guide](/getting-started/upgrade-guide) for breaking changes.
+
+
+
+ Get Started
+
+
+
+ View 2.0 Documentation
+
+
+
+
+## Theme
+
+VCalendar provides attractive default styling based on simple colors and dark mode.
+
+
+
+
+
+Custom styling with class overrides and css variables are also available.
+
+[Read more](/calendar/theme)
+
+## Layouts
+
+Calendars may be configured to adapt for multiple layouts. For example, weekly calendars can be used in constrained environments.
+
+
+
+
+
+Also, calendars can also be configured for multi-row and multi-column layouts.
+
+
+
+
+
+[Read more](/calendar/layouts)
+
+## Attributes
+
+Decorate calendars with attributes on specified dates or date ranges. They can even be displayed for repeating date patterns.
+
+
+
+
+
+[Read more](/calendar/attributes)
+
+## Date Picker
+
+`VDatePicker` is a feature-rich date picker component implemented as a wrapper for `VCalendar`, which can easily bind to a variety of date formats.
+
+
+
+
+
+[Read more](/datepicker/basics)
+
+Even date ranges are supported
+
+
+
+
+
+[Read more](/datepicker/basics#date-ranges)
+
+Time selection is also supported with configurable hour, minute, second and millisecond accuracy.
+
+
+
+
+
+[Read more](/datepicker/time-picker)
+
+Flexible rules can also be easily configured to dynamically limit time selection, like afternoon hours and 5-minute increments.
+
+
+
+
+
+[Read more](/datepicker/time-rules)
diff --git a/docs/installation.md b/docs/installation.md
deleted file mode 100644
index c62239961..000000000
--- a/docs/installation.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: 'Installation'
----
-
-:::tip
-[Vue.js](https://vuejs.org) version 2.5+ is required.
-:::
-
-## NPM
-
-### 1. Install via npm
-
-```bash
-npm install v-calendar
-```
-
-### 2. Import and use VCalendar
-#### *2A. Plugin Method (Recommended)*
-
-This is the most common use case.
-
-```js
-import Vue from 'vue';
-import VCalendar from 'v-calendar';
-
-// Use v-calendar & v-date-picker components
-Vue.use(VCalendar, {
- componentPrefix: 'vc', // Use instead of
- ..., // ...other defaults
-});
-
-```
-
-#### *2B. Components Method*
-
-You can also just import components separately.
-
-```js
-import Calendar from 'v-calendar/lib/components/calendar.umd'
-import DatePicker from 'v-calendar/lib/components/date-picker.umd'
-
-// Register components in your 'main.js'
-Vue.component('calendar', Calendar)
-Vue.component('date-picker', DatePicker)
-
-// Or just use in separate component
-export default {
- components: {
- Calendar,
- DatePicker
- }
- ...
-}
-```
-
-If you would still like to provide [plugin defaults](../api/defaults.md), call `setupCalendar` before using any components.
-
-```js
-import { setupCalendar} from 'v-calendar'
-
-// main.js
-setupCalendar({
- componentPrefix: 'vc',
- ...,
-});
-```
-
-## CDN
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
diff --git a/docs/layouts.md b/docs/layouts.md
deleted file mode 100644
index cc9889f72..000000000
--- a/docs/layouts.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: 'Layouts'
-sidebarDepth: 2
----
-
-
-
-## Full Width
-
-To expand the component to the full width of its container, set the `is-expanded` prop.
-
-
-
-```html
-
-```
-
-## Title Positioning
-
-To make the title header left or right aligned, use the `title-position` prop.
-
-### Left Aligned
-
-
-
-```html
-
-```
-
-### Right Aligned
-
-
-
-```html
-
-```
-
-## Trim Weeks
-
-By default, calendar panes always displays the maximum number of weeks in a month, even if the max week does not contain any days in the current month displayed.
-
-This is to ensure user interface consistency and prevents the calendar height from always changing as the user navigates months.
-
-However, these empty weeks can be 'trimmed' by setting the `trim-weeks` prop.
-
-
-
-```html
-
-```
-
-## Multiple Rows & Columns
-
-Use the `rows` and `columns` props to create multi-row and multi-column static layouts.
-
-
-
-```html
-
-```
-
-## Responsive Layouts
-
-V-Calendar allows you build responsive designs for multiple screen sizes.
-
-The basic approach can be described in two steps:
-
-1. Specify a few screen sizes to monitor by providing a set of breakpoints (`sm`, `md`, `lg` and `xl`). [The screen size names and dimensions are configurable](#screen-sizes).
-
-2. Call the `$screens` function to assign props or create computed properties based on the current screen size. This function automatically re-evaluates behind the scenes any time the window crosses a breakpoint border.
-
-V-Calendar takes a mobile-first approach, where each screen represents a minimum viewport width. Any values you assign at smaller screen sizes are also applied to larger sizes, unless explicity overridden.
-
-For example, suppose we wish to display a single column on mobile. Then, at the large size, we wish to expand the calendar to two columns.
-
-
-
-```html
-
-```
-
-When calling the `$screens` function to target multiple screens, pass an object to specify the screen-to-value relationships with target screen sizes as the key. Use the `default` key to target the default mobile layout.
-
-Alternatively, we can pass the default value as a second parameter to the `$screens` function.
-
-```html
-
-
-```
-
-Let's add to the previous example so that a new row is added for large screens. Also, we would also like to expand the pane width to fill its container on mobile when only one column and row is displayed.
-
-
-
-```html
-
-```
-
-We could rework the previous example to make it a bit more intuitive by creating a comprehensive `layout` computed property that just calls the `$screens` function once.
-
-```html
-
-```
-
-```js
-export default {
- computed: {
- layout() {
- return this.$screens(
- {
- // Default layout for mobile
- default: {
- columns: 1,
- rows: 1,
- isExpanded: true,
- },
- // Override for large screens
- lg: {
- columns: 2,
- rows: 2,
- isExpanded: false,
- },
- },
- );
- }
- }
-}
-```
-
-:::tip
-The `$screens` function is included as a lightweight mixin for all components. It can be used to make any of your props or computed properties responsive in any of your own components.
-:::
-
-### Screen Sizes
-
-There are 4 screen sizes provided by default:
-```js
-{
- "sm": "640px", // (min-width: 640px)
- "md": "768px", // (min-width: 768px)
- "lg": "1024px", // (min-width: 1024px)
- "xl": "1280px" // (min-width: 1280px)
-}
-```
-
-You may use any number of custom named screens. Just pass the your own custom `screens` object as part of the defaults when using VCalendar.
-
-```js
-import VCalendar from 'v-calendar';
-
-Vue.use(VCalendar, {
- // ...some defaults
- screens: {
- tablet: '576px',
- laptop: '992px',
- desktop: '1200px',
- },
- // ...other defaults
-})
-```
-
-Then, reference your custom screens when calling the `$screens` function.
-
-```html
-
-```
\ No newline at end of file
diff --git a/docs/navigation.md b/docs/navigation.md
deleted file mode 100644
index ecac775c7..000000000
--- a/docs/navigation.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: 'Navigation'
-sidebarDepth: 2
----
-
-## User Interface
-
-### Header
-
-There are 2 primary methods for navigating the calendar within the header.
-
-1. Navigation arrows to move forwards and backwards by a given [`step`](#month-steps) amount.
-2. Navigation popover to more easily skip to a specific month/year.
-
-
-
-
-
-```html
-
-```
-
-### Month Steps
-
-By default, the calendar will navigate to the month following the last current displayed month when navigating forwards. Conversely, it will navigate to the month preceding the first month when navigating backwards.
-
-This default step amount is equal to the number of rows multiplied by the number of columns in a given layout (2 rows x 1 column = 2).
-
-
-
-
-
-However, the `step` prop can be used to configure a custom month interval.
-
-For example, instead of moving forward by 2 months in the previous example, we can instead force it move by 1 month.
-
-
-
-
-
-```html
-
-```
-
-### Min & Max Dates
-
-If `min-date` or `max-date` props are assigned, this will disable navigation for the user beyond the dates provided.
-
-#### Min Date
-
-
-
-
-
-```html
-
-```
-
-#### Max Date
-
-
-
-
-
-```html
-
-```
-
-## Key Commands
-
-Both `v-calendar` and `v-date-picker` now support the following key commands for navigation:
-
-| Command | Action |
-| --- | --- |
-| **Left** | Move to the previous day |
-| **Right** | Move to the next day |
-| **Up** | Move to the previous week |
-| **Down** | Move to the next week |
-| **Home** | Move to the start of the current week |
-| **End** | Move to the end of the current week |
-| **PgUp** | Move to the same day of the previous month |
-| **PgDown** | Move to the same day of the next month |
-| ***Alt*** + **PgUp** | Move to the same month and day of the previous year |
-| ***Alt*** + **PgDown** | Move to the same month and day of the next year |
-
-::: tip
-A calendar day must be in focus in order for commands to be recognized
-:::
-
-## *Move* Method
-
-The base calendar component contains a `move` method that provides more flexible options not provided by the user interface or keyboard navigation. This method is asynchronous which can be `await`ed when a transition is specified.
-
-```js
-async move(arg, opts) => Promise
-```
-
-#### Parameters
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| **arg** | **Number*, *Date*, *String* or Page *Object* | Target month criteria |
-| **opts** | *Object* | Set of navigation options |
-| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. |
-| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. |
-| **opts.force** | *Boolean* | Force navigation even if the target months(s) are disabled |
-
-#### Returns
-
-A **Promise** that *resolves* when the transition to the new set of month(s) is complete or *rejects* if target month(s) are disabled.
-
-### Move by number of months
-
-Moves a given number of months forwards or backwards.
-
-Calling `move(num)` with a **positive** number will move **forwards** by a given number of months.
-
-Calling `move(num)` with a **negative** number will move **backwards** by a given number of months.
-
-```html
-
-```
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Move forwards 5 months (wait for transition)
-await calendar.move(5)
-
-// Move backwards 5 months (wait for transition)
-await calendar.move(-5)
-```
-
-### Move to month
-
-Moves to a given month by calling `move(page)` with a page object with `month` and `year` keys.
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Moves to January, 1983
-await calendar.move({ month: 1, year: 1983 })
-```
-
-### Move to a date
-
-Moves to a specified date.
-
-Calling `move(date)` with a **Date** object will move to that date.
-
-Calling `move(date)` with a **String** will move to the converted date.
-
-```js
-// Get the calendar ref
-const calendar = this.$refs.calendar
-
-// Moves to today's date
-await calendar.move(new Date())
-
-// Moves to my birthday
-await calendar.move(`1983-01-21`)
-```
-
-::: warning
-Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead.
-:::
-
-
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 000000000..fb63b75a5
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "docs-vite",
+ "version": "1.0.0",
+ "main": "index.js",
+ "license": "MIT",
+ "scripts": {
+ "dev": "vitepress dev",
+ "build": "NODE_OPTIONS='--experimental-specifier-resolution=node' vitepress build",
+ "preview": "vitepress preview",
+ "serve": "vitepress serve"
+ },
+ "dependencies": {
+ "@popperjs/core": "^2.11.6",
+ "lodash": "^4.17.21",
+ "short-uuid": "^4.2.0",
+ "vue-screen-utils": "^1.0.0-beta.13"
+ },
+ "devDependencies": {
+ "@tailwindcss/forms": "^0.5.2",
+ "@tailwindcss/typography": "^0.5.4",
+ "autoprefixer": "^10.4.8",
+ "postcss": "^8.4.16",
+ "tailwindcss": "^3.1.8",
+ "vitepress": "^1.0.0-alpha.59",
+ "vue": "^3.2.37"
+ }
+}
diff --git a/docs/postcss.config.js b/docs/postcss.config.js
new file mode 100644
index 000000000..cdbe50f3a
--- /dev/null
+++ b/docs/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+ plugins: {
+ 'tailwindcss/nesting': {},
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/docs/.vuepress/public/favicon.png b/docs/public/favicon.png
similarity index 100%
rename from docs/.vuepress/public/favicon.png
rename to docs/public/favicon.png
diff --git a/docs/.vuepress/public/hero.png b/docs/public/logo.png
similarity index 100%
rename from docs/.vuepress/public/hero.png
rename to docs/public/logo.png
diff --git a/docs/quick-start.md b/docs/quick-start.md
deleted file mode 100644
index 0eb8d1bee..000000000
--- a/docs/quick-start.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: 'Quick Start'
-sidebarDepth: 1
-pageClass: quick-start
----
-
-
-
-# V-Calendar
-
-V-Calendar is a modern and flexible plugin for displaying simple, attributed calendars in Vue.js. It uses attributes to decorate the calendar with various visual indicators including highlighted date regions, dots, bars, content classes and even popovers for simple tooltips or custom slot content.
-
-
-
-Any of these indicators can be displayed for single dates, date ranges and even complex date patterns like the following:
-* Every other Friday
-* 15th of every month
-* Last Friday of every other month.
-
-A date picker is included out of the box with single date, multiple date and date range selection modes. Also, because `v-date-picker` is simply a wrapper for `v-calendar`, it supports the same props, slots and custom custom theme support,
-
-And of course, V-Calendar is responsive and mobile friendly.
-
-#### Calendar
-
-`v-calendar` is the core component. By default, it has a neutral design that should blend nicely within any web application, with various layout configuration options:
- * Responsive multi-row and multi-column layouts
- * Slot support for custom header and day content
- * Semantic-inspired navigation popover
- * Navigation transitions (horizontal slide, vertical slide, fade)
-
-
-
-```html
-
-```
\ No newline at end of file
diff --git a/docs/showcase/README.md b/docs/showcase/README.md
deleted file mode 100644
index 73e8378e6..000000000
--- a/docs/showcase/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Showcase
-sidebarDepth: 2
----
-
-
\ No newline at end of file
diff --git a/docs/showcase/github.md b/docs/showcase/github.md
deleted file mode 100644
index 94ca821cf..000000000
--- a/docs/showcase/github.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: GitHub Issues
-sidebarDepth: 2
-pageClass: docs-page
----
-
-## Issue #140
-
-
-
\ No newline at end of file
diff --git a/docs/sponsors.md b/docs/sponsors.md
deleted file mode 100644
index 64db4e552..000000000
--- a/docs/sponsors.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: 'Sponsors'
-sidebarDepth: 2
----
-
-### Our Sponsors
-
-
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
new file mode 100644
index 000000000..67a38ec73
--- /dev/null
+++ b/docs/tailwind.config.js
@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
+
+delete colors.lightBlue;
+
+module.exports = {
+ content: ['./.vitepress/**/*.{js,ts,vue}', './**/*.md'],
+ darkMode: 'class',
+ theme: {
+ fontFamily: {
+ display: ['Lexend', 'sans-serif'],
+ sans: ['Inter', 'sans-serif'],
+ },
+ extend: {
+ colors: {
+ accent: colors.indigo,
+ },
+ },
+ },
+ plugins: [require('@tailwindcss/typography', '@tailwindcss/forms')],
+};
diff --git a/docs/tests/README.md b/docs/tests/README.md
deleted file mode 100644
index 29aa1cc70..000000000
--- a/docs/tests/README.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: 'Tests'
-layout: TestLayout
----
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/timezones.md b/docs/timezones.md
deleted file mode 100644
index e96efeca3..000000000
--- a/docs/timezones.md
+++ /dev/null
@@ -1,221 +0,0 @@
----
-title: 'Timezones (Beta) :tada:'
-sidebarDepth: 2
----
-
-# Timezones (Beta)
-
-:::warning
-While multiple tests have been written for timezone support, it still may be supported differently across different browsers.
-:::
-
-Timezones are supported for both `v-date-picker` and `v-calendar` via the [Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). To assign a timezone, pass the `timezone: String` prop with the desired timezone setting. Reference this [stack overflow](https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript) question for a base list of available timezones.
-
-By default, the `timezone` prop is `undefined`, which defaults to using the browser's local timezone.
-
-## UTC
-
-In addition to the timezones supported, `UTC` may be used for the Coordinated Universal Time setting.
-
-## Calendar Attributes
-
-In `v-calendar`, the timezone is used to set the beginning and ending time boundaries for each calendar day. As a result, a calendar attribute that displays for a user in one timezone may display differently in another timezone.
-
-
-
-```html
-