task: update to docs

quasarframework · Jan 13, 2025 · 8283694 · 8283694
1 parent dc366a8
commit 8283694
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 79 deletions.
diff --git a/.github/RELEASE-TEMPLATE.md b/.github/RELEASE-TEMPLATE.md
@@ -1,4 +1,4 @@
-# QCalendar v4.x.x-beta.x
+# QCalendar v4.x.x
 
 ## What's Changed
 
@@ -10,12 +10,12 @@
 
 ## Installing
 
-Use the `next` tag whenever you'd install it normally.
-
 ```
-$ yarn add @quasar/quasar-ui-qcalendar@next
+$ pnpm add @quasar/quasar-ui-qcalendar
+# or
+$ yarn add @quasar/quasar-ui-qcalendar
 # or
-$ quasar ext add @quasar/qcalendar@next
+$ quasar ext add @quasar/qcalendar
 ```
 
 ## Documentation
@@ -27,4 +27,4 @@ $ quasar ext add @quasar/qcalendar@next
 QCalendar is an open-source MIT licensed project that has been made possible due to the **generous contributions** by [sponsors and backers](https://github.com/sponsors/hawkeye64). If you are interested in supporting this project, please consider:
 
 - [Becoming a sponsor on Github](https://github.com/users/hawkeye64/sponsorship)
-- [One-off donation via PayPal](https://paypal.me/hawkeye64)
+- [One-off donation via PayPal](https://paypal.me/hawkeye64)
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # QCalendar (Vue Plugin, UMD and Quasar App Extension)
 
-![@quasar/quasar-ui-qcalendar](https://img.shields.io/npm/v/@quasar/quasar-ui-qcalendar/next?label=@quasar/quasar-ui-qcalendar@next)
-![@quasar/quasar-app-extension-qcalendar](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qcalendar/next?label=@quasar/quasar-app-extension-qcalendar@next)
+![@quasar/quasar-ui-qcalendar](https://img.shields.io/npm/v/@quasar/quasar-ui-qcalendar?label=@quasar/quasar-ui-qcalendar)
+![@quasar/quasar-app-extension-qcalendar](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qcalendar?label=@quasar/quasar-app-extension-qcalendar)
 [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/quasar-ui-qcalendar)]()
 [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/quasar-ui-qcalendar)]()
 [![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qcalendar)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qcalendar)
@@ -21,7 +21,6 @@ QCalendar allows for viewing of **day** (1-6 days), **week**, **monthly**, **sch
 
 v4.0.0
 
-- QCalendar v4.x (alpha/beta) lives in the **next** branch. This will change at some point in the future when v4.0.0 release is available.
 - Be sure to read the [documentation](https://qcalendar.netlify.app/)
 
 ---
@@ -34,39 +33,39 @@ v4.0.0
 
 **Month view with events**
 
-![QCalendar example month view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendarmonth-event-slots.png)
+![QCalendar example month view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendarmonth-event-slots.png)
 
 **Planner example**
 
-![QCalendar example agenda view - planner](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendaragenda-planner.png)
+![QCalendar example agenda view - planner](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendaragenda-planner.png)
 
 **Monthly Mini-mode**
 
-![QCalendar example mini-mode selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendarmonth-minimode-range-selection.png)
+![QCalendar example mini-mode selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendarmonth-minimode-range-selection.png)
 
 **Multi-month selector (mini-mode)**
 
-![QCalendar example multi-month selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-month-view-mini-mode-multi-month-selection.png)
+![QCalendar example multi-month selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-month-view-mini-mode-multi-month-selection.png)
 
 **Agenda view with custom content**
 
-![QCalendar example agenda view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-agenda-view.png)
+![QCalendar example agenda view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-agenda-view.png)
 
 **Day view with events**
 
-![QCalendar example day view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-day-view.png)
+![QCalendar example day view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-day-view.png)
 
 **Resource view with events**
 
-![QCalendar example resource view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-resource-view.png)
+![QCalendar example resource view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-resource-view.png)
 
 **Scheduler view**
 
-![QCalendar example scheduler view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-scheduler-view.png)
+![QCalendar example scheduler view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-scheduler-view.png)
 
 **Task view**
 
-![QCalendar task view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/QCalendarTask.png)
+![QCalendar task view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/QCalendarTask.png)
 
 Including support for locales, optional theming, 1st day Monday, 5-day work weeks, work week numbers, selected days, disabled days, day of year...
 

diff --git a/packages/app-extension/README.md b/packages/app-extension/README.md
@@ -2,7 +2,7 @@
 
 The **QCalendar App Extension** allows you to seamlessly add the [QCalendar](../ui) component into your Quasar application. It manages the boot file file and all other configuration for you.
 
-[![npm](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qcalendar/next?label=@quasar/quasar-app-extension-qcalendar)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qcalendar)
+[![npm](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qcalendar?label=@quasar/quasar-app-extension-qcalendar)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qcalendar)
 [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/quasar-ui-qcalendar)]()
 [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/quasar-ui-qcalendar)]()
 [![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qcalendar)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qcalendar)
@@ -15,16 +15,14 @@ The **QCalendar App Extension** allows you to seamlessly add the [QCalendar](../
 
 QCalendar is a [Quasar](https://quasar.dev) component. It is a powerful calendar that plugs right into your Quasar application and allows for viewing of **day** (1-7 days for a week), **monthly**, **scheduler** and **agenda** views. Painstaking care has been given to make almost every aspect of QCalendar configurable and/or modifiable in some way and control given to the developer.
 
-# QCalendar v4.0.0 Beta
+# QCalendar v4.x
 
-Welcome to the QCalendar v4.0.0 Beta release
+Welcome to the QCalendar v4.x release
 
 ### QCalendar is now converted to use Vue v3
 
 With this update comes a lot of changes, with over 90% of QCalendar being rewritten. Please read below to understand these changes and how they will affect you for upgrading.
 
-> Until the final stable version is released, some aspects of the calendar may change. We're not planning for additional changes, but unforeseen reported issues may require us to do breaking changes (unlikely, but keep this in mind). So please make sure that you read each v4 alpha/beta version's release notes carefully before upgrading.
-
 # Documentation
 
 Go to Netlify which is hosting QCalendar v4.0.0 docs https://qcalendar.netlify.app/.
@@ -35,39 +33,39 @@ Go to Netlify which is hosting QCalendar v4.0.0 docs https://qcalendar.netlify.a
 
 **Month view with events**
 
-![QCalendar example month view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendarmonth-event-slots.png)
+![QCalendar example month view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendarmonth-event-slots.png)
 
 **Planner example**
 
-![QCalendar example agenda view - planner](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendaragenda-planner.png)
+![QCalendar example agenda view - planner](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendaragenda-planner.png)
 
 **Monthly Mini-mode**
 
-![QCalendar example mini-mode selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendarmonth-minimode-range-selection.png)
+![QCalendar example mini-mode selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendarmonth-minimode-range-selection.png)
 
 **Multi-month selector (mini-mode)**
 
-![QCalendar example multi-month selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-month-view-mini-mode-multi-month-selection.png)
+![QCalendar example multi-month selection](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-month-view-mini-mode-multi-month-selection.png)
 
 **Agenda view with custom content**
 
-![QCalendar example agenda view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-agenda-view.png)
+![QCalendar example agenda view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-agenda-view.png)
 
 **Day view with events**
 
-![QCalendar example day view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-day-view.png)
+![QCalendar example day view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-day-view.png)
 
 **Resource view with events**
 
-![QCalendar example resource view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-resource-view.png)
+![QCalendar example resource view - events](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-resource-view.png)
 
 **Scheduler view**
 
-![QCalendar example scheduler view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/qcalendar-scheduler-view.png)
+![QCalendar example scheduler view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/qcalendar-scheduler-view.png)
 
 **Task view**
 
-![QCalendar task view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/next/packages/docs/public/QCalendarTask.png)
+![QCalendar task view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/packages/docs/public/QCalendarTask.png)
 
 Including support for locales, optional theming, 1st day Monday, 5-day work weeks, work week numbers, selected days, disabled days, day of year...
 
@@ -76,7 +74,7 @@ Including support for locales, optional theming, 1st day Monday, 5-day work week
 # Install
 
 ```bash
-quasar ext add @quasar/qcalendar@next
+quasar ext add @quasar/qcalendar
 ```
 
 Quasar CLI will retrieve it from NPM and install the extension.

diff --git a/packages/docs/src/markdown/getting-started/installation.md b/packages/docs/src/markdown/getting-started/installation.md
@@ -7,7 +7,8 @@ related:
   - /contributing/bugs-and-feature-requests
   - /contributing/sponsor
 ---
-First off, it's important to know that QCalendar has many modular components that make up it's entirety. Installing as QCalendar __will install all these components__. However, you may want to install them individually.
+
+First off, it's important to know that QCalendar has many modular components that make up it's entirety. Installing as QCalendar **will install all these components**. However, you may want to install them individually.
 
 The components are:
 
@@ -33,20 +34,22 @@ By using the app extension, you will get **all** QCalendar components installed
 #### Install
 
 To add as an App Extension to your Quasar application, run the following (in your Quasar app folder):
+
 ```
-$ quasar ext add @quasar/qcalendar@next
+$ quasar ext add @quasar/qcalendar
 ```
 
 #### Uninstall
 
 To remove as an App Extension from your Quasar application, run the following (in your Quasar app folder):
+
 ```
 $ quasar ext remove @quasar/qcalendar
 ```
 
 #### Describe
-When installed as an App Extension, you can use `quasar describe QCalendar`. You can replace `QCalendar` with any of the calendar types (ex: `quasar describe QCalendarDay`).
 
+When installed as an App Extension, you can use `quasar describe QCalendar`. You can replace `QCalendar` with any of the calendar types (ex: `quasar describe QCalendarDay`).
 
 ### Or Create and register a boot file
 
@@ -59,9 +62,11 @@ If you plan on importing from `src/` directly, please read the [Migration Guide]
 :::
 
 ```
-$ yarn add @quasar/quasar-ui-qcalendar@next
+$ pnpm add @quasar/quasar-ui-qcalendar
+# or
+$ yarn add @quasar/quasar-ui-qcalendar
 # or
-$ npm install @quasar/quasar-ui-qcalendar@next
+$ npm install @quasar/quasar-ui-qcalendar
 ```
 
 Then
@@ -75,9 +80,11 @@ export default boot(({ app }) => {
   app.use(Plugin)
 })
 ```
+
 Additionally, because you are accessing the sources this way, you will need to make sure your project will transpile the code.
 
 In `quasar.conf.js` update the following:
+
 ```js
 // Note: using ~ tells Quasar the file resides in node_modules
 css: [
@@ -103,13 +110,13 @@ There are several variants for each calendar component, including common, es (mo
 <style src="@quasar/quasar-ui-qcalendar/dist/QCalendarDay.min.css"></style>
 
 <script>
-import { QCalendarDay } from '@quasar/quasar-ui-qcalendar/dist/QCalendarDay.esm.js'
+  import { QCalendarDay } from '@quasar/quasar-ui-qcalendar/dist/QCalendarDay.esm.js'
 
-export default {
-  components: {
-    QCalendarDay
+  export default {
+    components: {
+      QCalendarDay,
+    },
   }
-}
 </script>
 ```
 
@@ -122,8 +129,7 @@ import Plugin from '@quasar/quasar-ui-qcalendar/src/QCalendarDay.js'
 import '@quasar/quasar-ui-qcalendar/src/css/calendar-day.sass'
 import App from './App.vue'
 
-const app = createApp(App)
-  .use(Plugin)
+const app = createApp(App).use(Plugin)
 ```
 
 ### Vue project from dist
@@ -133,8 +139,7 @@ import Plugin from '@quasar/quasar-ui-qcalendar/dist/QCalendarDay.esm.js'
 import '@quasar/quasar-ui-qcalendar/dist/QCalendarDay.min.css'
 import App from './App.vue'
 
-const app = createApp(App)
-  .use(Plugin)
+const app = createApp(App).use(Plugin)
 ```
 
 ### Or component import
@@ -143,13 +148,13 @@ const app = createApp(App)
 <style src="@quasar/quasar-ui-qcalendar/dist/QCalendarDay.min.css"></style>
 
 <script>
-import { QCalendarDay } from '@quasar/quasar-ui-qcalendar/dist/QCalendarDay.esm.js'
+  import { QCalendarDay } from '@quasar/quasar-ui-qcalendar/dist/QCalendarDay.esm.js'
 
-export default {
-  components: {
-    QCalendarDay
+  export default {
+    components: {
+      QCalendarDay,
+    },
   }
-}
 </script>
 ```
 
@@ -164,42 +169,58 @@ Add the following tag(s) after the Quasar ones:
 ```html
 <head>
   <!-- AFTER the Quasar stylesheet tags: -->
-  <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/QCalendarMonth.min.css" rel="stylesheet" type="text/css">
+  <link
+    href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/QCalendarMonth.min.css"
+    rel="stylesheet"
+    type="text/css"
+  />
 </head>
 <body>
   <!-- at end of body, AFTER Quasar script(s): -->
-  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/QCalendarMonth.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/QCalendarMonth.umd.min.js"></script>
 
   <!-- If you need Timestamp functions: -->
-  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/Timestamp.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/Timestamp.umd.min.js"></script>
 </body>
 ```
 
 If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/QCalendarMonth.rtl.min.css" rel="stylesheet" type="text/css">
+<link
+  href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/QCalendarMonth.rtl.min.css"
+  rel="stylesheet"
+  type="text/css"
+/>
 ```
 
 ### Vue install
 
 ```html
 <head>
-  <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/QCalendarMonth.min.css" rel="stylesheet" type="text/css">
+  <link
+    href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/QCalendarMonth.min.css"
+    rel="stylesheet"
+    type="text/css"
+  />
 </head>
 <body>
   <!-- at end of body: -->
-  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/QCalendarMonth.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/QCalendarMonth.umd.min.js"></script>
 
   <!-- If you need Timestamp functions: -->
-  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/Timestamp.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/Timestamp.umd.min.js"></script>
 </body>
 ```
 
 If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@next/dist/QCalendarMonth.rtl.min.css" rel="stylesheet" type="text/css">
+<link
+  href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/QCalendarMonth.rtl.min.css"
+  rel="stylesheet"
+  type="text/css"
+/>
 ```
 
 Your Vue source:
@@ -208,14 +229,13 @@ Your Vue source:
 const app = Vue.createApp({
   setup() {
     // ...your set up methods
-  }
-});
+  },
+})
 
-app.component("QCalendarDay", QCalendarDay.QCalendarDay);
-app.mount("#app");
+app.component('QCalendarDay', QCalendarDay.QCalendarDay)
+app.mount('#app')
 ```
 
-
 ## Testing on Codepen
 
 [QCalendar v4 Collection](https://codepen.io/collection/qOBOEG)
@@ -238,6 +258,6 @@ or
 
 [QCalendarTask UMD Example on Codepen](https://codepen.io/Hawkeye64/pen/RwwwKQL)
 
-
 # Project source
-Can be found [here](https://github.com/quasarframework/quasar-ui-qcalendar/tree/next).
+
+Can be found [here](https://github.com/quasarframework/quasar-ui-qcalendar/tree).