1 | QCalendar
|
2 | ===
|
3 |
|
4 | [![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qcalendar.svg?label=@quasar/qcalendar)](https://www.npmjs.com/package/@quasar/quasar-ui-qcalendar)
|
5 | [![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qcalendar.svg)](https://www.npmjs.com/package/@quasar/quasar-ui-qcalendar)
|
6 |
|
7 | 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.
|
8 |
|
9 | ![QCalendar example month view](https://raw.githubusercontent.com/quasarframework/quasar-ui-qcalendar/dev/demo/src/statics/qcalendar-month-view.png)
|
10 |
|
11 | # Examples and Documentation
|
12 | Can be found [here](https://quasarframework.github.io/quasar-ui-qcalendar)
|
13 |
|
14 | # Usage
|
15 |
|
16 | ## Quasar CLI project
|
17 |
|
18 | Install the [App Extension](../app-extension).
|
19 |
|
20 | **OR**:
|
21 |
|
22 | Create and register a boot file:
|
23 |
|
24 | ```js
|
25 | import Vue from 'vue'
|
26 | import Plugin from '@quasar/quasar-ui-qcalendar'
|
27 | import '@quasar/quasar-ui-qcalendar/dist/index.css'
|
28 |
|
29 | Vue.use(Plugin)
|
30 | ```
|
31 |
|
32 | **OR**:
|
33 |
|
34 | ```html
|
35 | <style src="@quasar/quasar-ui-qcalendar/dist/index.css"></style>
|
36 |
|
37 | <script>
|
38 | import { QCalendar } from '@quasar/quasar-ui-qcalendar'
|
39 |
|
40 | export default {
|
41 | components: {
|
42 | QCalendar
|
43 | }
|
44 | }
|
45 | </script>
|
46 | ```
|
47 |
|
48 | ## Vue CLI project
|
49 |
|
50 | ```js
|
51 | import Vue from 'vue'
|
52 | import Plugin from '@quasar/quasar-ui-qcalendar'
|
53 | import '@quasar/quasar-ui-qcalendar/dist/index.css'
|
54 |
|
55 | Vue.use(Plugin)
|
56 | ```
|
57 |
|
58 | **OR**:
|
59 |
|
60 | ```html
|
61 | <style src="@quasar/quasar-ui-qcalendar/dist/index.css"></style>
|
62 |
|
63 | <script>
|
64 | import { QCalendar } from '@quasar/quasar-ui-qcalendar'
|
65 |
|
66 | export default {
|
67 | components: {
|
68 | QCalendar
|
69 | }
|
70 | }
|
71 | </script>
|
72 | ```
|
73 |
|
74 | ## UMD variant
|
75 |
|
76 | Exports `window.QCalendar`.
|
77 |
|
78 | Add the following tag(s) after the Quasar ones:
|
79 |
|
80 | ```html
|
81 | <head>
|
82 | <!-- AFTER the Quasar stylesheet tags: -->
|
83 | <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/index.min.css" rel="stylesheet" type="text/css">
|
84 | </head>
|
85 | <body>
|
86 | <!-- at end of body, AFTER Quasar script(s): -->
|
87 | <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/index.umd.min.js"></script>
|
88 | </body>
|
89 | ```
|
90 | If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
|
91 | ```html
|
92 | <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
|
93 | ```
|
94 |
|
95 | ### UMD Example
|
96 | ```html
|
97 | <!DOCTYPE html>
|
98 | <html lang="en">
|
99 | <head>
|
100 | <meta charset="utf-8">
|
101 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
102 | <meta name="format-detection" content="telephone=no">
|
103 | <meta name="msapplication-tap-highlight" content="no">
|
104 | <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
|
105 |
|
106 | <title>UMD test</title>
|
107 | <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
|
108 | <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
|
109 | <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@^1.0.0/dist/index.css" rel="stylesheet" type="text/css">
|
110 | </head>
|
111 | <body>
|
112 | <div id="q-app">
|
113 | <q-layout view="lHh Lpr fff">
|
114 | <q-header class="glossy bg-primary">
|
115 | <q-toolbar>
|
116 | <q-toolbar-title shrink>
|
117 | QCalendar <span class="text-subtitle2">v{{ version }}</span>
|
118 | </q-toolbar-title>
|
119 |
|
120 | <q-separator vertical></q-separator>
|
121 | <q-btn stretch flat label="Prev" @click="calendarPrev"></q-btn>
|
122 | <q-separator vertical></q-separator>
|
123 | <q-btn stretch flat label="Next" @click="calendarNext"></q-btn>
|
124 | <q-separator vertical></q-separator>
|
125 | <q-space></q-space>
|
126 |
|
127 | <div>Quasar v{{ $q.version }}</div>
|
128 | </q-toolbar>
|
129 | </q-header>
|
130 |
|
131 | <q-page-container>
|
132 | <q-page>
|
133 | <q-calendar ref="calendar" v-model="date"></q-calendar>
|
134 | </q-page>
|
135 | </q-page-container>
|
136 | </q-layout>
|
137 | </div>
|
138 |
|
139 | <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.ie.polyfills.umd.min.js"></script>
|
140 | <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
|
141 | <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.umd.min.js"></script>
|
142 | <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qcalendar@^1.0.0/dist/index.umd.js"></script>
|
143 |
|
144 | <script>
|
145 | new Vue({
|
146 | el: '#q-app',
|
147 |
|
148 | data: function () {
|
149 | return {
|
150 | date: '',
|
151 | version: QCalendar.version
|
152 | }
|
153 | },
|
154 |
|
155 | beforeMount () {
|
156 | const now = new Date()
|
157 | // set initially to today's date (YYYY-mm-dd)
|
158 | this.date = now.getFullYear() + '-' + (this.padNumber(now.getMonth() + 1, 2)) + '-' + this.padNumber(now.getDay(), 2)
|
159 | },
|
160 |
|
161 | methods: {
|
162 | calendarNext () {
|
163 | this.$refs.calendar.next()
|
164 | },
|
165 |
|
166 | calendarPrev () {
|
167 | this.$refs.calendar.prev()
|
168 | },
|
169 |
|
170 | padNumber (num, length) {
|
171 | let padded = String(num)
|
172 | while (padded.length < length) {
|
173 | padded = '0' + padded
|
174 | }
|
175 | return padded
|
176 | }
|
177 | }
|
178 | })
|
179 | </script>
|
180 | </body>
|
181 | </html>
|
182 | ```
|
183 |
|
184 | [UMD example on Codepen](https://codepen.io/Hawkeye64/pen/RwwwKQL)
|
185 |
|
186 | # Building the Projects
|
187 |
|
188 | ## Setup
|
189 |
|
190 | In both the `ui` and `ui/dev` folders:
|
191 |
|
192 | ```bash
|
193 | $ yarn
|
194 | ```
|
195 |
|
196 | ## Developing
|
197 |
|
198 | In the `ui` folder
|
199 |
|
200 | ```bash
|
201 | # start dev in SPA mode
|
202 | $ yarn dev
|
203 |
|
204 | # start dev in UMD mode
|
205 | $ yarn dev:umd
|
206 |
|
207 | # start dev in SSR mode
|
208 | $ yarn dev:ssr
|
209 |
|
210 | # start dev in Cordova iOS mode
|
211 | $ yarn dev:ios
|
212 |
|
213 | # start dev in Cordova Android mode
|
214 | $ yarn dev:android
|
215 |
|
216 | # start dev in Electron mode
|
217 | $ yarn dev:electron
|
218 | ```
|
219 |
|
220 | ## Building package
|
221 | ```bash
|
222 | $ yarn build
|
223 |
|
224 | # build just the JSON API
|
225 | $ yarn build:api
|
226 | ```
|
227 |
|
228 | # Donate
|
229 | If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
|
230 |
|
231 | # License
|
232 | MIT (c) Jeff Galbraith <jeff@quasar.dev>
|