You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs/src/markdown/other/migration-guide.md
+13-3Lines changed: 13 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,9 +20,13 @@ With this update comes a lot of changes, with over 90% of QCalendar being rewrit
20
20
21
21
This means you get better in-editor auto-completion support amongst many other advantages.
22
22
23
+
## QCalendar v4.1.0 rewritten fully in TypeScript
24
+
25
+
Again, this means better in-editor auto-completion support amongst many other advantages.
26
+
23
27
## New calendar component
24
28
25
-
Just quickly, for information purposes, there is a new **QCalendarTask** component for writing timesheets and Gantt-like calendars.
29
+
Just quickly, for information purposes, there is a new **QCalendarTask** component for writing task-oriented calendars, like timesheets and Gantt-like calendars. Use it to track tasks and events.
26
30
27
31
## Calendar types
28
32
@@ -149,7 +153,13 @@ The emitted `change` event has changed. The passed object still contains `start`
149
153
- new (QCalendarDay) `date-header` (default: `stacked`), values `['stacked', 'inline', 'inverted']`. This allows you to have the date-header area displayed inline. When the `inline` value is used, the placement is controlled by the `weekday-align` and `date-align` properties. Using the `inverted` value is the exact opposite of `inline` display for right/left placement.
150
154
This image will explain the QCalendarDay alignment:
- new `use-navigation` property turns on keyboard focus navigation. This takes into account weekday skips (ie: weekdays not being displayed). **TIP**: use with `no-active-date` for better visual UX and `focusable` for visual acuity.
156
+
- new `use-navigation` property turns on keyboard focus navigation. This takes into account weekday skips (ie: weekdays not being displayed).
157
+
::: warning
158
+
Do not use `use-navigation` with more than one calendar at a time.
159
+
:::
160
+
::: tip
161
+
use with `no-active-date` for better visual UX and `focusable` for visual acuity.
162
+
:::
153
163
1. QCalendarMonth: <kbd>left</kbd> navigates to previous day, <kbd>right</kbd> navigates to next day, <kbd>up</kbd> takes you to previous week, <kbd>down</kbd> navigates to next week, <kbd>home</kbd> navigates to start of month, <kbd>end</kbd> navigates to end of month, <kbd>pgUp</kbd> navigates to previous month and <kbd>pgDown</kbd> navigates to next month.
154
164
2. QCalendarDay is a bit more complicated. There is both weekday navigation and interval navigation [wip]. When focused on a weekday:
155
165
- view="day": <kbd>left</kbd> navigates to previous day and <kbd>right</kbd> navigates to next day. <kbd>home</kbd>, <kbd>end</kbd>, <kbd>pgUp</kbd> and <kbd>pgDown</kbd> have no meaning.
@@ -178,6 +188,6 @@ The emitted `change` event has changed. The passed object still contains `start`
178
188
- Functionality has been added for tab (tabindex) support. Users can now use `Tab` and `Shift+Tab` to navigate the calendar. Add the new `focusable` property to have this functionality.
179
189
- Allow calendar date selection via keyboard (Enter or Space keys) when `focusable` property is set.
180
190
- When using `max-days` property (for contiguous days displayed) and clicking on a date, the calendar no longer navigates to the selected date, which previously became first date in the visible days. ie: the calendar is static until a new date that is not visible is selected programmatically, by v-model or prev/next/move methods are used (`max-days` does not apply to constrained `week` and `month` views).
181
-
- QCalendarDay/QCalendarAgenda now has a slot for head days (`head-days-events`) that is a contiguous row for all displayed days. This allows for all-day events that are more than one day to be a singular item. Be sure to create a wrapper div absolute positioning OR relative positioning and add empty events that are transparent to the user to push visible events to their proper positioning. Because absolute positioned div's are outside of the browser's normal flow, you need to set an explicit height on your first child and use the passed in **ref** from the slot data (`<template #head-days-events="{ scope: { days, ref } }">`) and place the ref (`:ref="ref"`) properly for this to work. Also, you probably should not use the `head-days-events` in conjunction with the `head-day-event` slot. The `head-day-event` slot is regulated to that day only and potential overlap may occur that would not be a good UX.
191
+
- QCalendarDay/QCalendarAgenda now has a slot for head days (`head-days-events`) that is a contiguous row for all displayed days. This allows for all-day events that are more than one day to be a singular item. Be sure to create a wrapper div with absolute positioning OR relative positioning and add empty events that are transparent to the user to push visible events to their proper positioning. Because absolute positioned div's are outside of the browser's normal flow, you need to set an explicit height on your first child and use the passed in **ref** from the slot data (`<template #head-days-events="{ scope: { days, ref } }">`) and place the ref (`:ref="ref"`) properly for this to work. Also, you probably should not use the `head-days-events` in conjunction with the `head-day-event` slot. The `head-day-event` slot is regulated to that day only and potential overlap may occur that would not be a good UX.
182
192
- All calendars will automatically auto-switch the weekday length based on the width of the calendar cell.
183
193
- For calendars that show the month on the first day of the month, the text will automatically switch the month length based on width of the calendar cell.
0 commit comments