task(docs): updated markdown

Author: hawkeye64

packages/docs/src/markdown/developing/faq.md

@@ -6,8 +6,20 @@ examples: Faq
 
 Here you will find useful bespoke information on how to use the calendars. These mainly come as a result from question in the issues.
 
+## Month (Sticky Header)
+
+In this example, check out the custom `.my-sticky` css class. This works in conjunction with a parent whose height is horter than the height needed to display the calendar and setting it's style to `overflow: auto`.
+
 <MarkdownExample title="Month (Sticky Header)" file="MonthSticky" no-github no-edit/>
 
+## Month (Show Month)
+
+In this example, it shows how you can display the currently displayed month and year. It uses the browser's `Intl.DateTimeFormat` to do the formatting.
+
 <MarkdownExample title="Month (Show Month)" file="MonthDate" no-github no-edit/>
 
+## Month (Min. Weeks)
+
+In this example, it shows how you can display the minimum number of weeks displayed in a month. The reason form doing this is to make sure the calendar is always the same height.
+
 <MarkdownExample title="Month (Min. Weeks)" file="MonthMinWeeks" no-github no-edit/>

packages/docs/src/markdown/developing/qcalendar-agenda.md

@@ -10,12 +10,20 @@ import QCalendarAgendaApi from '@quasar/quasar-ui-qcalendar/dist/api/QCalendarAg
 
 <MarkdownApi :api="QCalendarAgendaApi" name="QCalendarAgenda"/>
 
+## Dark
+
+This will only make sense if your browser is currently in light mode.
+
 <MarkdownExample title="Dark" file="AgendaDark" no-github no-edit/>
 
+## Alignment
+
 You can use the properties `date-header`, `date-align` and `weekday-align` to manipulate how the header area looks.
 
 <MarkdownExample title="Alignment" file="AgendaAlignment" no-github no-edit/>
 
+## Cell Width
+
 You can specify the `cell-width` property to make your calendar overrun it's horizontal boundaries.
 
 The calendar goes into a special `sticky` mode when this happens so you can scroll vertically and/or horizontally.
@@ -24,22 +32,34 @@ This example also uses the `max-days` property.
 
 <MarkdownExample title="Cell Width" file="AgendaCellWidth" no-github no-edit/>
 
+## Column Count
+
 The `column-count` property allows for a single day to be displayed multiple times.
 
 <MarkdownExample title="Column Count" file="AgendaColumnCount" no-github no-edit/>
 
+## Column Options
+
 The `column-options` property allows you to define additional left or right columns.
 
 <MarkdownExample title="Column Options" file="AgendaColumnOptions" no-github no-edit/>
 
+## Date Type
+
 <MarkdownExample title="Date Type" file="AgendaDateType" no-github no-edit/>
 
+## Day Week - Max. Days
+
 <MarkdownExample title="Day Week - Max Days" file="AgendaDayWeekMaxDays" no-github no-edit/>
 
+## Disabled Before After
+
 All days before and after the current day have been disabled with the properties `disabled-before` and `disabled-after`.
 
 <MarkdownExample title="Disabled Before After" file="AgendaDisabledBeforeAfter" no-github no-edit/>
 
+## Disabled Days
+
 The next 4 days after the current day have been disabled with the `disabled-days` property.
 
 The first example uses an array of dates to disable each specific date.
@@ -48,26 +68,44 @@ The second example uses a range, which is an array within an array of start and
 
 <MarkdownExample title="Disabled Days" file="AgendaDisabledDays" no-github no-edit/>
 
+## Disabled Weekdays
+
 The weekends have been disabled with the `disabled-weekdays` property.
 
 <MarkdownExample title="Disabled Weekdays" file="AgendaDisabledWeekdays" no-github no-edit/>
 
+## First Day Monday
+
 <MarkdownExample title="First Day Monday" file="AgendaFirstDayMonday" no-github no-edit/>
 
+## Five Day Workweek
+
 <MarkdownExample title="Five Day Workweek" file="AgendaFiveDayWorkweek" no-github no-edit/>
 
+## Locale
+
 <MarkdownExample title="Locale" file="AgendaLocale" no-github no-edit/>
 
+## No Active Date
+
 <MarkdownExample title="No Active Date" file="AgendaNoActiveDate" no-github no-edit/>
 
+## Now
+
 The current date has been set to tomorrow via the `now` property.
 
 <MarkdownExample title="Now" file="AgendaNow" no-github no-edit/>
 
+## Theme
+
 <MarkdownExample title="Theme" file="AgendaTheme" no-github no-edit/>
 
+## Transitions
+
 <MarkdownExample title="Transitions" file="AgendaTransitions" no-github no-edit/>
 
+## Planner
+
 This is a rudimentary Planner using QCalendarAgenda.
 
 ::: tip

packages/docs/src/markdown/developing/qcalendar-day-intervals.md

@@ -10,6 +10,10 @@ import QCalendarDayApi from '@quasar/quasar-ui-qcalendar/dist/api/QCalendarDay.j
 
 <MarkdownApi :api="QCalendarDayApi" name="QCalendarDay"/>
 
+## Month Cell Width
+
 <MarkdownExample title="Month Cell Width" file="IntervalsMonthCellWidth" no-github no-edit/>
 
+## Month Navigation
+
 <MarkdownExample title="Month Navigation" file="IntervalsMonthNavigation" no-github no-edit/>

packages/docs/src/markdown/developing/qcalendar-day-week.md

@@ -10,24 +10,38 @@ import QCalendarDayApi from '@quasar/quasar-ui-qcalendar/dist/api/QCalendarDay.j
 
 <MarkdownApi :api="QCalendarDayApi" name="QCalendarDay"/>
 
+## Dark
+
+This will only make sense if your browser is currently in light mode.
+
 <MarkdownExample title="Dark" file="WeekDark" no-github no-edit/>
 
+## Alignment
+
 You can use the properties `date-header`, `date-align` and `weekday-align` to manipulate how the header area looks.
 
 <MarkdownExample title="Alignment" file="WeekAlignment" no-github no-edit/>
 
+## Cell Width
+
 You can specify the `cell-width` property to make your calendar overrun it's horizontal boundaries.
 
 The calendar goes into a special `sticky` mode when this happens so you can scroll vertically and/or horizontally.
 
 <MarkdownExample title="Cell Width" file="WeekCellWidth" no-github no-edit/>
 
+## Date Type
+
 <MarkdownExample title="Date Type" file="WeekDateType" no-github no-edit/>
 
+## Disabled Before After
+
 All days before and after the current day have been disabled with the properties `disabled-before` and `disabled-after`.
 
 <MarkdownExample title="Disabled Before After" file="WeekDisabledBeforeAfter" no-github no-edit/>
 
+## Disabled Days
+
 The next 4 days after the current day have been disabled with the `disabled-days` property.
 
 The first example uses an array of dates to disable each specific date.
@@ -36,10 +50,14 @@ The second example uses a range, which is an array within an array of start and
 
 <MarkdownExample title="Disabled Days" file="WeekDisabledDays" no-github no-edit/>
 
+## Disabled Weekdays
+
 The weekends have been disabled with the `disabled-weekdays` property.
 
 <MarkdownExample title="Disabled Weekdays" file="WeekDisabledWeekdays" no-github no-edit/>
 
+## Drag and Drop
+
 Drag any items in the list to a calendar interval or the top header.
 
 ::: tip
@@ -50,28 +68,48 @@ Instead use `box-shadow` to create an inset like this `box-shadow: inset 0 0 0 1
 
 <MarkdownExample title="Drag and Drop" file="WeekDragAndDrop" no-github no-edit/>
 
+## First Day Monday
+
 <MarkdownExample title="First Day Monday" file="WeekFirstDayMonday" no-github no-edit/>
 
+## Five Day Workweek
+
 <MarkdownExample title="Five Day Workweek" file="WeekFiveDayWorkweek" no-github no-edit/>
 
+## Focusable/Hoverable
+
 ::: tip
 If the property `focus-type` contains `weekday`, you can also use the <kbd>Enter</kbd> or <kbd>Space</kbd> keys for date selection.
 :::
 
 <MarkdownExample title="Focusable/Hoverable" file="WeekFocusableHoverable" no-github no-edit/>
 
+## Interval Count
+
 <MarkdownExample title="Interval Count" file="WeekIntervalCount" no-github no-edit/>
 
+## Interval Height
+
 <MarkdownExample title="Interval Height" file="WeekIntervalHeight" no-github no-edit/>
 
+## Interval Minutes (15)
+
 <MarkdownExample title="Interval Minutes (15)" file="WeekIntervalMinutes15" no-github no-edit/>
 
+## Interval Minutes (30)
+
 <MarkdownExample title="Interval Minutes (30)" file="WeekIntervalMinutes30" no-github no-edit/>
 
+## Interval Start
+
 <MarkdownExample title="Interval Start" file="WeekIntervalStart" no-github no-edit/>
 
+## Locale
+
 <MarkdownExample title="Locale" file="WeekLocale" no-github no-edit/>
 
+## Modify Intervals
+
 Using the proerties `interval-minutes`, `interval-start` and `interval-count`, you can control how the calendar looks in terms of the range of intervals.
 
 This has been a difficult concept for some to grasp.
@@ -82,6 +120,8 @@ Now, we change interval minutes to 15 (for 15 minute segmented intervals). That
 
 <MarkdownExample title="Modify Intervals" file="WeekModifyIntervals" no-github no-edit/>
 
+## Navigation
+
 This example uses the `use-navigation` property along with the `focusable` and `focus-type` properties.
 
 If the calendar has focus you can use the <kbd>&larr;</kbd> and <kbd>&rarr;</kbd> keys on your keyboard for navigation.
@@ -90,10 +130,16 @@ On the intervals, you can use <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd>
 
 <MarkdownExample title="Navigation" file="WeekNavigation" no-github no-edit/>
 
+## No Active Date
+
 <MarkdownExample title="No Active Date" file="WeekNoActiveDate" no-github no-edit/>
 
+## No Header
+
 <MarkdownExample title="No Header" file="WeekNoHeader" no-github no-edit/>
 
+## No Scroll
+
 When the property `no-scroll` is used, you must provide an outter div that has `overflow: auto` to control the scrolling.
 
 ::: tip
@@ -102,12 +148,18 @@ Note that the date header now scrolls with the rest of the calendar.
 
 <MarkdownExample title="No Scroll" file="WeekNoScroll" no-github no-edit/>
 
+## Now
+
 The current date has been set to tomorrow via the `now` property.
 
 <MarkdownExample title="Now" file="WeekNow" no-github no-edit/>
 
+## Selected Intervals
+
 <MarkdownExample title="Selected Intervals" file="WeekSelectedIntervals" no-github no-edit/>
 
+## Selection
+
 The example below uses the `selected-start-end-dates` property in conjunction with mouse events to select interval ranges.
 
 ::: tip
@@ -116,24 +168,40 @@ Try toggling the `Mobile selection` to see how selection can be changed.
 
 <MarkdownExample title="Selection" file="WeekSelection" no-github no-edit/>
 
+## Slot - Column Header
+
 <MarkdownExample title="Slot - Column Header" file="WeekSlotColumnHeader" no-github no-edit/>
 
+## Slot - Day Body
+
 This example uses both the `day-body` and `head-day-event` slots.
 
 You can click the `head-day-event` badges which will call the calendar's `scrolltoTime` method.
 
 <MarkdownExample title="Slot - Day Body" file="WeekSlotDayBody" no-github no-edit/>
 
+## Slot - Day Container (Show Current Time)
+
 <MarkdownExample title="Slot - Day Container (Show Current Time)" file="WeekSlotDayContainerShowCurrentTime" no-github no-edit/>
 
 <MarkdownExample title="Slot - Day Interval" file="WeekSlotDayInterval" no-github no-edit/>
 
+## Slot - Head Day
+
 <MarkdownExample title="Slot - Head Day" file="WeekSlotHeadDay" no-github no-edit/>
 
+## Slot - Head Day (Event)
+
 <MarkdownExample title="Slot - Head Day (Event)" file="WeekSlotHeadDayEvent" no-github no-edit/>
 
+## Slot - Head Intervals
+
 <MarkdownExample title="Slot - Head Intervals" file="WeekSlotHeadIntervals" no-github no-edit/>
 
+## Theme
+
 <MarkdownExample title="Theme" file="WeekTheme" no-github no-edit/>
 
+## Transitions
+
 <MarkdownExample title="Transitions" file="WeekTransitions" no-github no-edit/>