From cade0e42203de9b728cd8ac565766a080462742a Mon Sep 17 00:00:00 2001 From: TaylorJ76 Date: Wed, 26 Nov 2025 08:22:56 +0000 Subject: [PATCH] chore: docs - adds vue examples to calendar and calendar-event pages --- .../src/lib/calendar-event/VARIATIONS.md | 133 ++++++++++++ libs/components/src/lib/calendar/README.md | 75 +++++++ .../components/src/lib/calendar/VARIATIONS.md | 192 +++++++++++++++++- 3 files changed, 397 insertions(+), 3 deletions(-) diff --git a/libs/components/src/lib/calendar-event/VARIATIONS.md b/libs/components/src/lib/calendar-event/VARIATIONS.md index 35cdaab5a0..dfae707af7 100644 --- a/libs/components/src/lib/calendar-event/VARIATIONS.md +++ b/libs/components/src/lib/calendar-event/VARIATIONS.md @@ -4,6 +4,33 @@ Use the `heading` attribute to give the event a brief title. Use the `description` attribute to give the event a brief description. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -17,12 +44,42 @@ Use the `description` attribute to give the event a brief description. ``` + + + ## Start Time and Duration Use the `start` attribute to set the time the event starts. The time is expressed as a number. Eg. 12.5 is 12:30pm, 18.75 is 6:45pm. Use the `duration` attribute to indicate how long the event will last. Eg. 2 is 2 hours, 0.75 is 45 munites. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -36,12 +93,53 @@ Use the `duration` attribute to indicate how long the event will last. Eg. 2 is ``` + + + ## Appearance and Connotation Use the `appearance` attribute to choose between `filled` (default) and `subtle` appearances. Use the `connotation` attribute to choose between: `information` (default), `accent`, `cta`, `success`, `alert` and `announcement` connotations. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -66,12 +164,44 @@ Use the `connotation` attribute to choose between: `information` (default), `acc ``` + + + ## Overlapping Events Use the `overlap-count` when events overlap each other. The number you provide sets the stacking context of the event. The event you need to be at the bottom (usually the longest event) should have a `overlap-count` of `0`. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -86,3 +216,6 @@ The number you provide sets the stacking context of the event. The event you nee } ``` + + + diff --git a/libs/components/src/lib/calendar/README.md b/libs/components/src/lib/calendar/README.md index 5b04de9faa..6ef266c1d4 100644 --- a/libs/components/src/lib/calendar/README.md +++ b/libs/components/src/lib/calendar/README.md @@ -61,6 +61,39 @@ When using `sticky-mode` (`header`, `column`, or `both`), set the CSS variable ` If not specified, it defaults to `--vvd-color-canvas`. + + + + +```vue preview + + + + + +``` + + + + + ```html preview
@@ -80,12 +113,51 @@ If not specified, it defaults to `--vvd-color-canvas`. ``` + + + ## Slots ### Day[0-6] Slots Each day in the Calendar has a slot assigned to it. Use the Calendar Event component in these slots to arrange events around the weekly view. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -108,6 +180,9 @@ Each day in the Calendar has a slot assigned to it. Use the Calendar Event compo ``` + + + ## API Reference ### Properties diff --git a/libs/components/src/lib/calendar/VARIATIONS.md b/libs/components/src/lib/calendar/VARIATIONS.md index 324600edf1..06317c8a37 100644 --- a/libs/components/src/lib/calendar/VARIATIONS.md +++ b/libs/components/src/lib/calendar/VARIATIONS.md @@ -1,12 +1,62 @@ ## Setting the Displayed Week -By default, the Calendar displays the week based on today’s date. +By default, the Calendar displays the week based on today's date. Use the `datetime` attribute to control which week is shown. This attribute accepts any value supported by the [JavaScript `Date()` constructor](). In the example below, `YYYY-MM-DD` formatted strings are used. The week displayed is the week that includes the provided date. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -54,6 +104,9 @@ The week displayed is the week that includes the provided date. ``` + + + ## Sticky Mode The `sticky-mode` attribute controls which parts of the Calendar remain fixed when scrolling: @@ -66,10 +119,55 @@ The `sticky-mode` attribute controls which parts of the Calendar remain fixed wh - **Sticky behavior** requires the Calendar (or it's container) to have a defined `width` and `height`. Without these, scrolling won’t occur and elements won’t stick. + **Sticky behavior** requires the Calendar (or it's container) to have a defined `width` and `height`. Without these, scrolling won't occur and elements won't stick. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -105,10 +203,38 @@ The `sticky-mode` attribute controls which parts of the Calendar remain fixed wh ``` + + + ## Modifying the Week View's Start Day By default, the week view will start on **Monday**. Using the `start-day` attribute this can be changed to **Sunday** as in the example below. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -120,10 +246,38 @@ By default, the week view will start on **Monday**. Using the `start-day` attrib ``` + + + ## Displaying Times in 12 Hour Format By default times are displayed using a 24 hour format. This can be changed to a 12 hour format using the `hour12` attribute. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -135,14 +289,43 @@ By default times are displayed using a 24 hour format. This can be changed to a ``` + + + ## Locales The `locales` attribute lets you specify a **locale string** or an **array of locale strings** to control the language and regional formatting of the Calendar. - If multiple locales are provided, list them in descending order of priority, with the first being the preferred locale. -- If omitted, the Calendar defaults to the **JavaScript runtime’s locale**. +- If omitted, the Calendar defaults to the **JavaScript runtime's locale**. - Locale strings must conform to [BCP 47](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) standards. Eg. `en-US` or `en-US, he-IL`. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -154,3 +337,6 @@ The `locales` attribute lets you specify a **locale string** or an **array of lo } ``` + + +