UNPKG

6.29 kBMarkdownView Raw
1QCalendar
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
7QCalendar 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
12Can be found [here](https://quasarframework.github.io/quasar-ui-qcalendar)
13
14# Usage
15
16## Quasar CLI project
17
18Install the [App Extension](../app-extension).
19
20**OR**:
21
22Create and register a boot file:
23
24```js
25import Vue from 'vue'
26import Plugin from '@quasar/quasar-ui-qcalendar'
27import '@quasar/quasar-ui-qcalendar/dist/index.css'
28
29Vue.use(Plugin)
30```
31
32**OR**:
33
34```html
35<style src="@quasar/quasar-ui-qcalendar/dist/index.css"></style>
36
37<script>
38import { QCalendar } from '@quasar/quasar-ui-qcalendar'
39
40export default {
41 components: {
42 QCalendar
43 }
44}
45</script>
46```
47
48## Vue CLI project
49
50```js
51import Vue from 'vue'
52import Plugin from '@quasar/quasar-ui-qcalendar'
53import '@quasar/quasar-ui-qcalendar/dist/index.css'
54
55Vue.use(Plugin)
56```
57
58**OR**:
59
60```html
61<style src="@quasar/quasar-ui-qcalendar/dist/index.css"></style>
62
63<script>
64import { QCalendar } from '@quasar/quasar-ui-qcalendar'
65
66export default {
67 components: {
68 QCalendar
69 }
70}
71</script>
72```
73
74## UMD variant
75
76Exports `window.QCalendar`.
77
78Add 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```
90If 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
190In both the `ui` and `ui/dev` folders:
191
192```bash
193$ yarn
194```
195
196## Developing
197
198In 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
229If 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
232MIT (c) Jeff Galbraith <jeff@quasar.dev>