@zeedhi/zd-calendar-vue 1.0.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +438 -0
- package/dist/calendar-vue.esm.js +87 -16
- package/dist/calendar-vue.umd.js +90 -20
- package/package.json +2 -2
- package/types/Calendar.d.ts +11 -2
package/README.md
ADDED
|
@@ -0,0 +1,438 @@
|
|
|
1
|
+
# Componente BottomSheet para Zeedhi
|
|
2
|
+
|
|
3
|
+
<center>
|
|
4
|
+
<p>
|
|
5
|
+
<a href="#instalação">Instalação</a> |
|
|
6
|
+
<a href="#uso-básico">Uso Básico</a> |
|
|
7
|
+
<a href="#propriedades">Propriedades</a> |
|
|
8
|
+
<a href="#metodos">Métodos</a> |
|
|
9
|
+
</p>
|
|
10
|
+
</center>
|
|
11
|
+
|
|
12
|
+
<p>O component zd-calendar renderizar um calendar onde pode ser adicionado eventos.</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<img alt="zd-calendar" src="./img/calendar.jpg" width="100%">
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
## Instalação
|
|
19
|
+
|
|
20
|
+
Para instalar o pacote basta rodar o seguinte comando:\
|
|
21
|
+
`npm i @zeedhi/zd-calendar`\
|
|
22
|
+
Com isso, dois pacotes serão instalados: o @zeedhi/zd-calendar-common e o @zeedhi/zd-calendar-vue.\
|
|
23
|
+
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-calendar-vue dentro de seu arquivo de configuração `zeedhi.ts`
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
import ZdCalendar from '@zeedhi/zd-calendar-vue';
|
|
27
|
+
|
|
28
|
+
Vue.component('ZdCalendar', ZdCalendar);
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Já o pacote @zeedhi/zd-calendar-common deve ser importado no arquivo controller do componente.
|
|
32
|
+
|
|
33
|
+
## Uso Básico
|
|
34
|
+
|
|
35
|
+
Para usar, defina a propriedade component como 'ZdCalendar'.
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
{
|
|
39
|
+
"name": "calendar-example",
|
|
40
|
+
"component": "ZdCalendar"
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Propriedades
|
|
45
|
+
|
|
46
|
+
<table>
|
|
47
|
+
<thead>
|
|
48
|
+
<tr>
|
|
49
|
+
<th>Nome</th>
|
|
50
|
+
<th>Tipo</th>
|
|
51
|
+
<th>Default</th>
|
|
52
|
+
<th>Descrição</th>
|
|
53
|
+
</tr>
|
|
54
|
+
</thead>
|
|
55
|
+
<tbody>
|
|
56
|
+
<tr>
|
|
57
|
+
<td>categories</td>
|
|
58
|
+
<td>array | string</td>
|
|
59
|
+
<td>undefined</td>
|
|
60
|
+
<td>Especifica quais categorias exibir na exibição de categorias. Isso também controla a ordem das categorias. Se o calendário usar eventos, quaisquer categorias especificadas nesses eventos não especificados neste valor serão renderizadas dinamicamente na visualização, a menos que categoryHideDynamic seja true.</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>categoryDays</td>
|
|
64
|
+
<td>number | string</td>
|
|
65
|
+
<td>1</td>
|
|
66
|
+
<td>O número de dias para renderizar na exibição de categoria.</td>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr>
|
|
69
|
+
<td>categoryForInvalid</td>
|
|
70
|
+
<td>string</td>
|
|
71
|
+
<td>undefined</td>
|
|
72
|
+
<td>A categoria para colocar eventos que têm categorias inválidas. Uma categoria é inválida quando não é uma string. Por padrão, eventos sem categoria não são exibidos até que esse valor seja especificado</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<td>categoryHideDynamic</td>
|
|
76
|
+
<td>boolean</td>
|
|
77
|
+
<td>false</td>
|
|
78
|
+
<td>Define se as categorias especificadas em um evento devem ser ocultadas se não estiverem definidas nas categorias.</td>
|
|
79
|
+
</tr>
|
|
80
|
+
<tr>
|
|
81
|
+
<td>categoryShowAll</td>
|
|
82
|
+
<td>boolean</td>
|
|
83
|
+
<td>false</td>
|
|
84
|
+
<td>Defina se a exibição de categoria deve mostrar todas as categorias definidas, mesmo que não haja eventos para uma categoria.</td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td>categoryText</td>
|
|
88
|
+
<td>string | function</td>
|
|
89
|
+
<td>undefined</td>
|
|
90
|
+
<td>Reduz a largura máxima do conteúdo para 70%.</td>
|
|
91
|
+
</tr>
|
|
92
|
+
<tr>
|
|
93
|
+
<td>color</td>
|
|
94
|
+
<td>string</td>
|
|
95
|
+
<td>undefined</td>
|
|
96
|
+
<td>Aplica a cor especificada ao controle - pode ser o nome da cor do material (por exemplo, success ou purple) ou cor css (#033 ou rgba(255, 0, 0, 0.5)). Você pode encontrar uma lista de classes internas na <a href="https://vuetifyjs.com/en/styles/colors/#material-colors" target="_blank"> página de cores.</a></td>
|
|
97
|
+
</tr>
|
|
98
|
+
<tr>
|
|
99
|
+
<td>dark</td>
|
|
100
|
+
<td>boolean</td>
|
|
101
|
+
<td>false</td>
|
|
102
|
+
<td>
|
|
103
|
+
Aplica o tema dark ao calendar
|
|
104
|
+
</td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td>dayFormat</td>
|
|
108
|
+
<td>function</td>
|
|
109
|
+
<td>null</td>
|
|
110
|
+
<td>Formata a string do dia do mês que aparece em um dia para uma localidade especificada</td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr>
|
|
113
|
+
<td>end</td>
|
|
114
|
+
<td>string | number | date</td>
|
|
115
|
+
<td>undefined</td>
|
|
116
|
+
<td>A data de término no calendário (inclusive) no formato AAAA-MM-DD. Isso pode ser ignorado dependendo do tipo de calendário.</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td>eventColor</td>
|
|
120
|
+
<td>string | function</td>
|
|
121
|
+
<td>primary</td>
|
|
122
|
+
<td><p>Defina a propriedade da categoria do evento.</p>
|
|
123
|
+
<p>Em vez de uma propriedade pode ser dada uma função que recebe um evento e retorna a categoria.</p></td>
|
|
124
|
+
</tr>
|
|
125
|
+
<tr>
|
|
126
|
+
<td>eventColor</td>
|
|
127
|
+
<td>string | function</td>
|
|
128
|
+
<td>primary</td>
|
|
129
|
+
<td>Uma cor de fundo para todos os eventos ou uma função que aceita um objeto de evento passado para o calendário para retornar uma cor.</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td>eventEnd</td>
|
|
133
|
+
<td>string</td>
|
|
134
|
+
<td>end</td>
|
|
135
|
+
<td>Defina a propriedade timestamp de término dos eventos.</td>
|
|
136
|
+
</tr>
|
|
137
|
+
<tr>
|
|
138
|
+
<td>eventHeight</td>
|
|
139
|
+
<td>number</td>
|
|
140
|
+
<td>20</td>
|
|
141
|
+
<td>A altura de um evento em pixels na visualização do mês e na parte superior das visualizações do dia.</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td>eventMarginBottom</td>
|
|
145
|
+
<td>number</td>
|
|
146
|
+
<td>1</td>
|
|
147
|
+
<td>Margem inferior para evento</td>
|
|
148
|
+
</tr>
|
|
149
|
+
<tr>
|
|
150
|
+
<td>eventMore</td>
|
|
151
|
+
<td>boolean</td>
|
|
152
|
+
<td>true</td>
|
|
153
|
+
<td>Mostra o botão mais eventos</td>
|
|
154
|
+
</tr>
|
|
155
|
+
<tr>
|
|
156
|
+
<td>eventMoreText</td>
|
|
157
|
+
<td>string</td>
|
|
158
|
+
<td>CALENDAR_MORE</td>
|
|
159
|
+
<td>Define o texto do botão mais calendarEvent</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>eventName</td>
|
|
163
|
+
<td>string | function</td>
|
|
164
|
+
<td>name</td>
|
|
165
|
+
<td>Defina a propriedade do nome exibido do evento, ou uma função que aceita um objeto de evento passado para o calendário como o primeiro argumento e um sinalizador sinalizando se o nome é para um evento cronometrado (true) ou um evento durante um dia.</td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr>
|
|
168
|
+
<td>eventOverlapMode</td>
|
|
169
|
+
<td>string</td>
|
|
170
|
+
<td>stack</td>
|
|
171
|
+
<td>Define o modo como o calendarEvent sera exibido <code>stack</code> <code>column</code><td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr>
|
|
174
|
+
<td>eventOverlapThreshold</td>
|
|
175
|
+
<td>string | number</td>
|
|
176
|
+
<td>60</td>
|
|
177
|
+
<td>Um valor em minutos que é usado para determinar se dois eventos cronometrados devem ser colocados na coluna um ao lado do outro ou devem ser tratados como eventos levemente sobrepostos.</td>
|
|
178
|
+
</tr>
|
|
179
|
+
<tr>
|
|
180
|
+
<td>eventStart</td>
|
|
181
|
+
<td>string | function</td>
|
|
182
|
+
<td>start</td>
|
|
183
|
+
<td>Defina a propriedade timestamp de início dos eventos.</td>
|
|
184
|
+
</tr>
|
|
185
|
+
<tr>
|
|
186
|
+
<td>eventTextColor</td>
|
|
187
|
+
<td>string | function</td>
|
|
188
|
+
<td>white</td>
|
|
189
|
+
<td>Define a cor do texto do evento calendar</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td>eventTimed</td>
|
|
193
|
+
<td>string | function</td>
|
|
194
|
+
<td>timed</td>
|
|
195
|
+
<td>Se Datas ou milissegundos são usados como timestamp inicial ou final de um evento, essa propriedade pode ser uma string para uma propriedade no evento que é verdadeira se o evento for um evento cronometrado ou uma função que recebe o evento e retorna um valor verdadeiro se o evento for um evento cronometrado.</td>
|
|
196
|
+
</tr>
|
|
197
|
+
<tr>
|
|
198
|
+
<td>eventsCalendar</td>
|
|
199
|
+
<td>array</td>
|
|
200
|
+
<td>CalendarEvents[]</td>
|
|
201
|
+
<td>Define um array de object de CalendarEvents</td>
|
|
202
|
+
</tr>
|
|
203
|
+
<tr>
|
|
204
|
+
<td>firstInterval</td>
|
|
205
|
+
<td>number | string</td>
|
|
206
|
+
<td>0</td>
|
|
207
|
+
<td>O primeiro intervalo a ser exibido na exibição do dia. Se intervalMinutes for definido como 60 e for definido como 9:00, a primeira vez na exibição será às 9h.</td>
|
|
208
|
+
</tr>
|
|
209
|
+
<tr>
|
|
210
|
+
<td>firstTime</td>
|
|
211
|
+
<td>number | string | object</td>
|
|
212
|
+
<td>undefined</td>
|
|
213
|
+
<td>A primeira vez a ser exibida na visualização diurna. Se especificado, isso substitui qualquer valor de firstInterval especificado. Este pode ser o número de minutos desde a meia-noite, uma string no formato HH:mm ou um objeto com propriedades numéricas hora e minuto.</td>
|
|
214
|
+
</tr>
|
|
215
|
+
<tr>
|
|
216
|
+
<td>hideHeader</td>
|
|
217
|
+
<td>boolean</td>
|
|
218
|
+
<td>false</td>
|
|
219
|
+
<td>Se o cabeçalho na parte superior da visualização do dia deve estar visível.</td>
|
|
220
|
+
</tr>
|
|
221
|
+
<tr>
|
|
222
|
+
<td>intervalCount</td>
|
|
223
|
+
<td>number | string</td>
|
|
224
|
+
<td>24</td>
|
|
225
|
+
<td>O número de intervalos a serem exibidos na exibição do dia.</td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr>
|
|
228
|
+
<td>intervalFormat</td>
|
|
229
|
+
<td>function</td>
|
|
230
|
+
<td>null</td>
|
|
231
|
+
<td>Formata a sequência de hora do dia que aparece na medianiz de intervalo da exibição de dia e semana para a localidade especificada</td>
|
|
232
|
+
</tr>
|
|
233
|
+
<tr>
|
|
234
|
+
<td>intervalHeight</td>
|
|
235
|
+
<td>number | string</td>
|
|
236
|
+
<td>48</td>
|
|
237
|
+
<td>A altura de um intervalo em pixels na visualização do dia.</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr>
|
|
240
|
+
<td>intervalMinutes</td>
|
|
241
|
+
<td>number | string</td>
|
|
242
|
+
<td>60</td>
|
|
243
|
+
<td>O número de minutos que os intervalos estão na exibição do dia. Um intervalo comum é de 60 minutos, então os intervalos são de uma hora.</td>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr>
|
|
246
|
+
<td>intervalStyle</td>
|
|
247
|
+
<td>function</td>
|
|
248
|
+
<td>null</td>
|
|
249
|
+
<td>Retorna um estilo de CSS a ser aplicado ao intervalo.</td>
|
|
250
|
+
</tr>
|
|
251
|
+
<tr>
|
|
252
|
+
<td>intervalWidth</td>
|
|
253
|
+
<td>number | string</td>
|
|
254
|
+
<td>60</td>
|
|
255
|
+
<td>Define a largura do <code>gutter</code> ao lado esquerdo na visualização dia.</td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr>
|
|
258
|
+
<td>ligth</td>
|
|
259
|
+
<td>boolean</td>
|
|
260
|
+
<td>false</td>
|
|
261
|
+
<td>Define o tema ligth ao componente</td>
|
|
262
|
+
</tr>
|
|
263
|
+
<tr>
|
|
264
|
+
<td>locale</td>
|
|
265
|
+
<td>string</td>
|
|
266
|
+
<td>pt-BR</td>
|
|
267
|
+
<td>Define a localidade do calendário</td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td>localeFirstDayOfYear</td>
|
|
271
|
+
<td>string | number</td>
|
|
272
|
+
<td>0</td>
|
|
273
|
+
<td>Define o dia que determina a primeira semana do ano, começando com 0 para domingo. Para ISO 8601, isso deve ser 4.</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td>maxDays</td>
|
|
277
|
+
<td>number</td>
|
|
278
|
+
<td>7</td>
|
|
279
|
+
<td>O número máximo de dias a serem exibidos no calendário personalizado se um dia de término não for definido.</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr>
|
|
282
|
+
<td>minWeek</td>
|
|
283
|
+
<td>any</td>
|
|
284
|
+
<td>1</td>
|
|
285
|
+
<td>O número mínimo de semanas a serem exibidas na exibição de mês ou semana.</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr>
|
|
288
|
+
<td>monthFormat</td>
|
|
289
|
+
<td>function</td>
|
|
290
|
+
<td>null</td>
|
|
291
|
+
<td>Formata a string do mês que aparece em um dia para a localidade especificada</td>
|
|
292
|
+
</tr>
|
|
293
|
+
<tr>
|
|
294
|
+
<td>now</td>
|
|
295
|
+
<td>string</td>
|
|
296
|
+
<td>undefined</td>
|
|
297
|
+
<td>Substitui o dia e a hora que são considerados agora. Está no formato YYYY-MM-DD hh:mm:ss. O calendário é estilizado de acordo com <code>now</code>.</td>
|
|
298
|
+
</tr>
|
|
299
|
+
<tr>
|
|
300
|
+
<td>selectTypeData</td>
|
|
301
|
+
<td>object</td>
|
|
302
|
+
<td>undefined</td>
|
|
303
|
+
<td>Define uma data ao componente select com os tipos de visualizção do calendário.</td>
|
|
304
|
+
</tr>
|
|
305
|
+
<tr>
|
|
306
|
+
<td>shortIntervals</td>
|
|
307
|
+
<td>boolean</td>
|
|
308
|
+
<td>true</td>
|
|
309
|
+
<td>Os intervalos na visualização do dia serão 9h, em vez de 09h.</td>
|
|
310
|
+
</tr>
|
|
311
|
+
<tr>
|
|
312
|
+
<td>shortMonths</td>
|
|
313
|
+
<td>boolean</td>
|
|
314
|
+
<td>true</td>
|
|
315
|
+
<td>Se as versões curtas de um mês devem ser usadas (jan vs janeiro).</td>
|
|
316
|
+
</tr>
|
|
317
|
+
<tr>
|
|
318
|
+
<td>shortWeekday</td>
|
|
319
|
+
<td>boolean</td>
|
|
320
|
+
<td>true</td>
|
|
321
|
+
<td>Se as versões curtas de um dia da semana devem ser usadas (seg vs segunda-feira).</td>
|
|
322
|
+
</tr>
|
|
323
|
+
<tr>
|
|
324
|
+
<td>shortIntervalsLabel</td>
|
|
325
|
+
<td>boolean</td>
|
|
326
|
+
<td>true</td>
|
|
327
|
+
<td>Verifica se um determinado dia e hora devem ser exibidos no <code>gutter</code> de intervalo da visualização do dia.</td>
|
|
328
|
+
</tr>
|
|
329
|
+
<tr>
|
|
330
|
+
<td>showHeader</td>
|
|
331
|
+
<td>boolean</td>
|
|
332
|
+
<td>true</td>
|
|
333
|
+
<td>Mostra o cabeçalho do calendário com opções de navegação e trocar o modo de visualização</td>
|
|
334
|
+
</tr>
|
|
335
|
+
<tr>
|
|
336
|
+
<td>showMonthOnFirst</td>
|
|
337
|
+
<td>boolean</td>
|
|
338
|
+
<td>true</td>
|
|
339
|
+
<td>Se o nome do mês deve ser exibido no primeiro dia do mês.</td>
|
|
340
|
+
</tr>
|
|
341
|
+
<tr>
|
|
342
|
+
<td>showWeek</td>
|
|
343
|
+
<td>boolean</td>
|
|
344
|
+
<td>false</td>
|
|
345
|
+
<td>Se os números da semana devem ser exibidos ao usar a visualização do mês.</td>
|
|
346
|
+
</tr>
|
|
347
|
+
<tr>
|
|
348
|
+
<td>start</td>
|
|
349
|
+
<td>string | number | date</td>
|
|
350
|
+
<td>new Date()</td>
|
|
351
|
+
<td>A data de início no calendário (inclusive) no formato YYYY-MM-DD. Isso pode ser ignorado dependendo do tipo de calendário.</td>
|
|
352
|
+
</tr>
|
|
353
|
+
<tr>
|
|
354
|
+
<td>title</td>
|
|
355
|
+
<td>string</td>
|
|
356
|
+
<td></td>
|
|
357
|
+
<td>Define um titulo para o calendário, é exibido se showHeader for true</td>
|
|
358
|
+
</tr>
|
|
359
|
+
<tr>
|
|
360
|
+
<td>type</td>
|
|
361
|
+
<td>string</td>
|
|
362
|
+
<td>month</td>
|
|
363
|
+
<td>Uma string que pode ser month, week, day, 4day, custom-weekly, custom-daily ou category. Os tipos personalizados analisam as datas de início e término passadas para o componente em oposição ao valor.</td>
|
|
364
|
+
</tr>
|
|
365
|
+
<tr>
|
|
366
|
+
<td>value</td>
|
|
367
|
+
<td>string | number | date</td>
|
|
368
|
+
<td>undefined</td>
|
|
369
|
+
<td>Uma data no formato YYYY-MM-DD que determina o intervalo de tempo do calendário.</td>
|
|
370
|
+
</tr>
|
|
371
|
+
<tr>
|
|
372
|
+
<td>weekdayFormat</td>
|
|
373
|
+
<td>function</td>
|
|
374
|
+
<td>null</td>
|
|
375
|
+
<td>Formata a string do dia da semana que aparece no cabeçalho para a localidade especificada</td>
|
|
376
|
+
</tr>
|
|
377
|
+
<tr>
|
|
378
|
+
<td>weekdays</td>
|
|
379
|
+
<td>array | string</td>
|
|
380
|
+
<td>[0, 1, 2, 3, 4, 5, 6]</td>
|
|
381
|
+
<td>Especifica quais dias da semana serão exibir. Para exibir somente de segunda a sexta-feira, um valor de [1, 2, 3, 4, 5] pode ser usado. Para exibir uma semana começando na segunda-feira, um valor de [1, 2, 3, 4, 5, 6, 0] pode ser usado.</td>
|
|
382
|
+
</tr>
|
|
383
|
+
</tbody>
|
|
384
|
+
</table>
|
|
385
|
+
|
|
386
|
+
<hr>
|
|
387
|
+
|
|
388
|
+
## Métodos
|
|
389
|
+
|
|
390
|
+
<table>
|
|
391
|
+
<thead>
|
|
392
|
+
<tr>
|
|
393
|
+
<th>Nome</th>
|
|
394
|
+
<th>Propriedades</th>
|
|
395
|
+
<th>Descrição</th>
|
|
396
|
+
</tr>
|
|
397
|
+
</thead>
|
|
398
|
+
<tbody>
|
|
399
|
+
<tr>
|
|
400
|
+
<td>addCalendarEvents</td>
|
|
401
|
+
<td>CalendarEvents[]</td>
|
|
402
|
+
<td>Adicionar novos calendarEvent ao calendar</td>
|
|
403
|
+
</tr>
|
|
404
|
+
<tr>
|
|
405
|
+
<td>updateCalendarEvent</td>
|
|
406
|
+
<td>CalendarEvents[]</td>
|
|
407
|
+
<td>Atualizar um calendarEvent ao calendar</td>
|
|
408
|
+
</tr>
|
|
409
|
+
<tr>
|
|
410
|
+
<td>clearCalendarEvents</td>
|
|
411
|
+
<td></td>
|
|
412
|
+
<td>Remove todos os calendarEvent do calendar</td>
|
|
413
|
+
</tr>
|
|
414
|
+
<tr>
|
|
415
|
+
<td>removeCalendarEvents</td>
|
|
416
|
+
<td>CalendarEvents[]</td>
|
|
417
|
+
<td>Remove um calendarEvents do calendar</td>
|
|
418
|
+
</tr>
|
|
419
|
+
</tbody>
|
|
420
|
+
</table>
|
|
421
|
+
|
|
422
|
+
<hr>
|
|
423
|
+
|
|
424
|
+
## CalendarEvents
|
|
425
|
+
|
|
426
|
+
```
|
|
427
|
+
type CalendarEvents = {
|
|
428
|
+
id: string | number;
|
|
429
|
+
name: string;
|
|
430
|
+
start: string | Date;
|
|
431
|
+
end: string | Date;
|
|
432
|
+
description?: string;
|
|
433
|
+
color?: string;
|
|
434
|
+
timed?: boolean;
|
|
435
|
+
category?: string;
|
|
436
|
+
};
|
|
437
|
+
|
|
438
|
+
```
|
package/dist/calendar-vue.esm.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { VersionService } from '@zeedhi/core';
|
|
1
2
|
import { Prop, Component } from 'vue-property-decorator';
|
|
2
3
|
import { PropWatch, ZdComponentRender } from '@zeedhi/vuetify';
|
|
3
4
|
import { Calendar } from '@zeedhi/zd-calendar-common';
|
|
@@ -38,12 +39,21 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
38
39
|
}
|
|
39
40
|
mounted() {
|
|
40
41
|
this.$refs.calendar.checkChange();
|
|
42
|
+
const { value } = this.instance;
|
|
43
|
+
this.instance.value = '';
|
|
44
|
+
this.instance.value = value;
|
|
41
45
|
}
|
|
42
|
-
prev() {
|
|
43
|
-
this
|
|
46
|
+
prev(event) {
|
|
47
|
+
this.instance.previous(this.$el);
|
|
48
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
49
|
+
this.$refs.calendar.prev();
|
|
50
|
+
}
|
|
44
51
|
}
|
|
45
|
-
next() {
|
|
46
|
-
this
|
|
52
|
+
next(event) {
|
|
53
|
+
this.instance.next(this.$el);
|
|
54
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
55
|
+
this.$refs.calendar.next();
|
|
56
|
+
}
|
|
47
57
|
}
|
|
48
58
|
setToday() {
|
|
49
59
|
this.instance.value = '';
|
|
@@ -71,6 +81,39 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
71
81
|
}
|
|
72
82
|
nativeEvent.stopPropagation();
|
|
73
83
|
}
|
|
84
|
+
clickDate(event) {
|
|
85
|
+
this.instance.clickDate(this.$el, event);
|
|
86
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
87
|
+
this.viewDay(event.date);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
clickMore(event) {
|
|
91
|
+
this.instance.clickMore(this.$el, event);
|
|
92
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
93
|
+
this.viewDay(event.date);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
clickEvent(event) {
|
|
97
|
+
this.instance.clickEvent(this.$el, event);
|
|
98
|
+
}
|
|
99
|
+
clickDay(event) {
|
|
100
|
+
this.instance.clickDay(this.$el, event);
|
|
101
|
+
}
|
|
102
|
+
clickDayCategory(event) {
|
|
103
|
+
this.instance.clickDayCategory(this.$el, event);
|
|
104
|
+
}
|
|
105
|
+
clickInterval(event) {
|
|
106
|
+
this.instance.clickInterval(this.$el, event);
|
|
107
|
+
}
|
|
108
|
+
clickTime(event) {
|
|
109
|
+
this.instance.clickTime(this.$el, event);
|
|
110
|
+
}
|
|
111
|
+
clickTimeCategory(event) {
|
|
112
|
+
this.instance.clickTimeCategory(this.$el, event);
|
|
113
|
+
}
|
|
114
|
+
moved(event) {
|
|
115
|
+
this.instance.moved(this.$el, event);
|
|
116
|
+
}
|
|
74
117
|
};
|
|
75
118
|
__decorate([
|
|
76
119
|
Prop({ type: [String, Array], default: undefined }),
|
|
@@ -526,17 +569,27 @@ var __vue_render__ = function () {
|
|
|
526
569
|
1
|
|
527
570
|
),
|
|
528
571
|
_vm._v(" "),
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
572
|
+
_c("div", { staticClass: "zd-calendar-content-title" }, [
|
|
573
|
+
_vm.instance.title
|
|
574
|
+
? _c("h2", [
|
|
532
575
|
_vm._v(
|
|
533
|
-
"\n
|
|
576
|
+
"\n " +
|
|
534
577
|
_vm._s(_vm.instance.title) +
|
|
535
|
-
"\n
|
|
578
|
+
"\n "
|
|
579
|
+
),
|
|
580
|
+
])
|
|
581
|
+
: _vm._e(),
|
|
582
|
+
_vm._v(" "),
|
|
583
|
+
_vm.$refs.calendar
|
|
584
|
+
? _c("h3", [
|
|
585
|
+
_vm._v(
|
|
586
|
+
"\n " +
|
|
587
|
+
_vm._s(_vm.$refs.calendar.title) +
|
|
588
|
+
"\n "
|
|
536
589
|
),
|
|
537
|
-
])
|
|
538
|
-
|
|
539
|
-
|
|
590
|
+
])
|
|
591
|
+
: _vm._e(),
|
|
592
|
+
]),
|
|
540
593
|
_vm._v(" "),
|
|
541
594
|
_c(
|
|
542
595
|
"div",
|
|
@@ -652,9 +705,24 @@ var __vue_render__ = function () {
|
|
|
652
705
|
weekdays: _vm.instance.weekdays,
|
|
653
706
|
},
|
|
654
707
|
on: {
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
708
|
+
click: function ($event) {
|
|
709
|
+
return _vm.click($event)
|
|
710
|
+
},
|
|
711
|
+
focus: function ($event) {
|
|
712
|
+
return _vm.focus($event)
|
|
713
|
+
},
|
|
714
|
+
blur: function ($event) {
|
|
715
|
+
return _vm.blur($event)
|
|
716
|
+
},
|
|
717
|
+
"click:more": _vm.clickMore,
|
|
718
|
+
"click:date": _vm.clickDate,
|
|
719
|
+
"click:event": _vm.clickEvent,
|
|
720
|
+
"click:day": _vm.clickDay,
|
|
721
|
+
"click:day-category": _vm.clickDayCategory,
|
|
722
|
+
"click:interval": _vm.clickInterval,
|
|
723
|
+
"click:time": _vm.clickTime,
|
|
724
|
+
"click:time-category": _vm.clickTimeCategory,
|
|
725
|
+
moved: _vm.moved,
|
|
658
726
|
},
|
|
659
727
|
model: {
|
|
660
728
|
value: _vm.instance.value,
|
|
@@ -783,7 +851,7 @@ __vue_render__._withStripped = true;
|
|
|
783
851
|
/* style */
|
|
784
852
|
const __vue_inject_styles__ = function (inject) {
|
|
785
853
|
if (!inject) return
|
|
786
|
-
inject("data-v-
|
|
854
|
+
inject("data-v-f3247858_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n display: flex;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n}\n.zd-calendar-content .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n.zd-calendar-content .zd-calendar-content-title {\n display: flex;\n flex-direction: column;\n}", map: undefined, media: undefined });
|
|
787
855
|
|
|
788
856
|
};
|
|
789
857
|
/* scoped */
|
|
@@ -811,4 +879,7 @@ __vue_render__._withStripped = true;
|
|
|
811
879
|
undefined
|
|
812
880
|
);
|
|
813
881
|
|
|
882
|
+
const packageContent = require('../package.json');
|
|
883
|
+
VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
884
|
+
|
|
814
885
|
export { __vue_component__ as ZdCalendar };
|
package/dist/calendar-vue.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-property-decorator'), require('@zeedhi/vuetify'), require('@zeedhi/zd-calendar-common')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'vue-property-decorator', '@zeedhi/vuetify', '@zeedhi/zd-calendar-common'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-calendar-vue"] = {}, global["vue-property-decorator"], global["@zeedhi/vuetify"], global["@zeedhi/zd-calendar-common"]));
|
|
5
|
-
})(this, (function (exports, vuePropertyDecorator, vuetify, zdCalendarCommon) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('vue-property-decorator'), require('@zeedhi/vuetify'), require('@zeedhi/zd-calendar-common')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'vue-property-decorator', '@zeedhi/vuetify', '@zeedhi/zd-calendar-common'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-calendar-vue"] = {}, global.core, global["vue-property-decorator"], global["@zeedhi/vuetify"], global["@zeedhi/zd-calendar-common"]));
|
|
5
|
+
})(this, (function (exports, core, vuePropertyDecorator, vuetify, zdCalendarCommon) { 'use strict';
|
|
6
6
|
|
|
7
7
|
/*! *****************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -40,12 +40,21 @@
|
|
|
40
40
|
}
|
|
41
41
|
mounted() {
|
|
42
42
|
this.$refs.calendar.checkChange();
|
|
43
|
+
const { value } = this.instance;
|
|
44
|
+
this.instance.value = '';
|
|
45
|
+
this.instance.value = value;
|
|
43
46
|
}
|
|
44
|
-
prev() {
|
|
45
|
-
this
|
|
47
|
+
prev(event) {
|
|
48
|
+
this.instance.previous(this.$el);
|
|
49
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
50
|
+
this.$refs.calendar.prev();
|
|
51
|
+
}
|
|
46
52
|
}
|
|
47
|
-
next() {
|
|
48
|
-
this
|
|
53
|
+
next(event) {
|
|
54
|
+
this.instance.next(this.$el);
|
|
55
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
56
|
+
this.$refs.calendar.next();
|
|
57
|
+
}
|
|
49
58
|
}
|
|
50
59
|
setToday() {
|
|
51
60
|
this.instance.value = '';
|
|
@@ -73,6 +82,39 @@
|
|
|
73
82
|
}
|
|
74
83
|
nativeEvent.stopPropagation();
|
|
75
84
|
}
|
|
85
|
+
clickDate(event) {
|
|
86
|
+
this.instance.clickDate(this.$el, event);
|
|
87
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
88
|
+
this.viewDay(event.date);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
clickMore(event) {
|
|
92
|
+
this.instance.clickMore(this.$el, event);
|
|
93
|
+
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
94
|
+
this.viewDay(event.date);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
clickEvent(event) {
|
|
98
|
+
this.instance.clickEvent(this.$el, event);
|
|
99
|
+
}
|
|
100
|
+
clickDay(event) {
|
|
101
|
+
this.instance.clickDay(this.$el, event);
|
|
102
|
+
}
|
|
103
|
+
clickDayCategory(event) {
|
|
104
|
+
this.instance.clickDayCategory(this.$el, event);
|
|
105
|
+
}
|
|
106
|
+
clickInterval(event) {
|
|
107
|
+
this.instance.clickInterval(this.$el, event);
|
|
108
|
+
}
|
|
109
|
+
clickTime(event) {
|
|
110
|
+
this.instance.clickTime(this.$el, event);
|
|
111
|
+
}
|
|
112
|
+
clickTimeCategory(event) {
|
|
113
|
+
this.instance.clickTimeCategory(this.$el, event);
|
|
114
|
+
}
|
|
115
|
+
moved(event) {
|
|
116
|
+
this.instance.moved(this.$el, event);
|
|
117
|
+
}
|
|
76
118
|
};
|
|
77
119
|
__decorate([
|
|
78
120
|
vuePropertyDecorator.Prop({ type: [String, Array], default: undefined }),
|
|
@@ -528,17 +570,27 @@
|
|
|
528
570
|
1
|
|
529
571
|
),
|
|
530
572
|
_vm._v(" "),
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
573
|
+
_c("div", { staticClass: "zd-calendar-content-title" }, [
|
|
574
|
+
_vm.instance.title
|
|
575
|
+
? _c("h2", [
|
|
534
576
|
_vm._v(
|
|
535
|
-
"\n
|
|
577
|
+
"\n " +
|
|
536
578
|
_vm._s(_vm.instance.title) +
|
|
537
|
-
"\n
|
|
579
|
+
"\n "
|
|
580
|
+
),
|
|
581
|
+
])
|
|
582
|
+
: _vm._e(),
|
|
583
|
+
_vm._v(" "),
|
|
584
|
+
_vm.$refs.calendar
|
|
585
|
+
? _c("h3", [
|
|
586
|
+
_vm._v(
|
|
587
|
+
"\n " +
|
|
588
|
+
_vm._s(_vm.$refs.calendar.title) +
|
|
589
|
+
"\n "
|
|
538
590
|
),
|
|
539
|
-
])
|
|
540
|
-
|
|
541
|
-
|
|
591
|
+
])
|
|
592
|
+
: _vm._e(),
|
|
593
|
+
]),
|
|
542
594
|
_vm._v(" "),
|
|
543
595
|
_c(
|
|
544
596
|
"div",
|
|
@@ -654,9 +706,24 @@
|
|
|
654
706
|
weekdays: _vm.instance.weekdays,
|
|
655
707
|
},
|
|
656
708
|
on: {
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
709
|
+
click: function ($event) {
|
|
710
|
+
return _vm.click($event)
|
|
711
|
+
},
|
|
712
|
+
focus: function ($event) {
|
|
713
|
+
return _vm.focus($event)
|
|
714
|
+
},
|
|
715
|
+
blur: function ($event) {
|
|
716
|
+
return _vm.blur($event)
|
|
717
|
+
},
|
|
718
|
+
"click:more": _vm.clickMore,
|
|
719
|
+
"click:date": _vm.clickDate,
|
|
720
|
+
"click:event": _vm.clickEvent,
|
|
721
|
+
"click:day": _vm.clickDay,
|
|
722
|
+
"click:day-category": _vm.clickDayCategory,
|
|
723
|
+
"click:interval": _vm.clickInterval,
|
|
724
|
+
"click:time": _vm.clickTime,
|
|
725
|
+
"click:time-category": _vm.clickTimeCategory,
|
|
726
|
+
moved: _vm.moved,
|
|
660
727
|
},
|
|
661
728
|
model: {
|
|
662
729
|
value: _vm.instance.value,
|
|
@@ -785,7 +852,7 @@
|
|
|
785
852
|
/* style */
|
|
786
853
|
const __vue_inject_styles__ = function (inject) {
|
|
787
854
|
if (!inject) return
|
|
788
|
-
inject("data-v-
|
|
855
|
+
inject("data-v-f3247858_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n display: flex;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n}\n.zd-calendar-content .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n.zd-calendar-content .zd-calendar-content-title {\n display: flex;\n flex-direction: column;\n}", map: undefined, media: undefined });
|
|
789
856
|
|
|
790
857
|
};
|
|
791
858
|
/* scoped */
|
|
@@ -813,6 +880,9 @@
|
|
|
813
880
|
undefined
|
|
814
881
|
);
|
|
815
882
|
|
|
883
|
+
const packageContent = require('../package.json');
|
|
884
|
+
core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
885
|
+
|
|
816
886
|
exports.ZdCalendar = __vue_component__;
|
|
817
887
|
|
|
818
888
|
Object.defineProperty(exports, '__esModule', { value: true });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-calendar-vue",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Powered by Zeedhi",
|
|
5
5
|
"main": "dist/calendar-vue.umd.js",
|
|
6
6
|
"module": "dist/calendar-vue.esm.js",
|
|
@@ -20,5 +20,5 @@
|
|
|
20
20
|
"vue-class-component": "^7.2.6",
|
|
21
21
|
"vue-property-decorator": "^9.1.2"
|
|
22
22
|
},
|
|
23
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "c28ec91d4b1409bf7b83b87eeefb184016b6c339"
|
|
24
24
|
}
|
package/types/Calendar.d.ts
CHANGED
|
@@ -60,10 +60,19 @@ export default class ZdCalendar extends ZdComponentRender {
|
|
|
60
60
|
selectedElement: null;
|
|
61
61
|
selectedEvent: Function | {} | [];
|
|
62
62
|
mounted(): void;
|
|
63
|
-
prev(): void;
|
|
64
|
-
next(): void;
|
|
63
|
+
prev(event: Event): void;
|
|
64
|
+
next(event: Event): void;
|
|
65
65
|
setToday(): void;
|
|
66
66
|
setType(select: any): void;
|
|
67
67
|
viewDay({ date }: any): void;
|
|
68
68
|
showEvent({ nativeEvent, event }: any): void;
|
|
69
|
+
clickDate(event: Event): void;
|
|
70
|
+
clickMore(event: Event): void;
|
|
71
|
+
clickEvent(event: Event): void;
|
|
72
|
+
clickDay(event: Event): void;
|
|
73
|
+
clickDayCategory(event: Event): void;
|
|
74
|
+
clickInterval(event: Event): void;
|
|
75
|
+
clickTime(event: Event): void;
|
|
76
|
+
clickTimeCategory(event: Event): void;
|
|
77
|
+
moved(event: Event): void;
|
|
69
78
|
}
|