@zeedhi/zd-calendar-common 1.2.0 → 1.4.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 +437 -437
- package/dist/calendar-common.esm.js +20 -6
- package/dist/calendar-common.umd.js +19 -5
- package/package.json +2 -2
- package/types/calendar.d.ts +4 -1
package/README.md
CHANGED
|
@@ -1,438 +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
|
-
|
|
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
438
|
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Messages, VersionService } from '@zeedhi/core';
|
|
1
|
+
import { FormatterParserProvider, DateHelper, Messages, VersionService } from '@zeedhi/core';
|
|
2
2
|
import { ComponentRender } from '@zeedhi/common';
|
|
3
3
|
|
|
4
4
|
class Calendar extends ComponentRender {
|
|
@@ -100,6 +100,19 @@ class Calendar extends ComponentRender {
|
|
|
100
100
|
this.weekdays = this.getInitValue('weekdays', props.weekdays, this.weekdays);
|
|
101
101
|
this.selectTypeData = this.getInitValue('selectTypeData', props.selectTypeData, this.selectTypeData);
|
|
102
102
|
this.createAccessors();
|
|
103
|
+
if (!this.value)
|
|
104
|
+
this.goToToday();
|
|
105
|
+
}
|
|
106
|
+
goToToday() {
|
|
107
|
+
const fmt = FormatterParserProvider.getFormatter('ZdDateTime');
|
|
108
|
+
if (this.now) {
|
|
109
|
+
this.value = fmt(this.now, { dateTimeFormat: 'YYYY-MM-DD HH:mm:ss', displayFormat: 'YYYY-MM-DD' });
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
this.value = DateHelper.getValue('TODAY', 'YYYY-MM-DD');
|
|
113
|
+
}
|
|
114
|
+
beforeNext(element, event) {
|
|
115
|
+
this.callEvent('beforeNext', { event, element, component: this });
|
|
103
116
|
}
|
|
104
117
|
/**
|
|
105
118
|
* Event triggered when the current slide changes.
|
|
@@ -107,21 +120,22 @@ class Calendar extends ComponentRender {
|
|
|
107
120
|
* @param element Calendar element
|
|
108
121
|
*/
|
|
109
122
|
next(element, event) {
|
|
110
|
-
this.callEvent('
|
|
123
|
+
this.callEvent('next', { event, element, component: this });
|
|
111
124
|
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
112
|
-
this.callEvent('next', { event, element, component: this });
|
|
113
125
|
this.callEvent('afterNext', { event, element, component: this });
|
|
114
126
|
}
|
|
115
127
|
}
|
|
128
|
+
beforePrevious(element, event) {
|
|
129
|
+
this.callEvent('beforePrevious', { event, element, component: this });
|
|
130
|
+
}
|
|
116
131
|
/**
|
|
117
132
|
* Event triggered when the current slide changes.
|
|
118
|
-
* @param event Event that triggered the
|
|
133
|
+
* @param event Event that triggered the previous button event
|
|
119
134
|
* @param element Calendar element
|
|
120
135
|
*/
|
|
121
136
|
previous(element, event) {
|
|
122
|
-
this.callEvent('
|
|
137
|
+
this.callEvent('previous', { event, element, component: this });
|
|
123
138
|
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
124
|
-
this.callEvent('previous', { event, element, component: this });
|
|
125
139
|
this.callEvent('afterPrevious', { event, element, component: this });
|
|
126
140
|
}
|
|
127
141
|
}
|
|
@@ -103,6 +103,19 @@
|
|
|
103
103
|
this.weekdays = this.getInitValue('weekdays', props.weekdays, this.weekdays);
|
|
104
104
|
this.selectTypeData = this.getInitValue('selectTypeData', props.selectTypeData, this.selectTypeData);
|
|
105
105
|
this.createAccessors();
|
|
106
|
+
if (!this.value)
|
|
107
|
+
this.goToToday();
|
|
108
|
+
}
|
|
109
|
+
goToToday() {
|
|
110
|
+
const fmt = core.FormatterParserProvider.getFormatter('ZdDateTime');
|
|
111
|
+
if (this.now) {
|
|
112
|
+
this.value = fmt(this.now, { dateTimeFormat: 'YYYY-MM-DD HH:mm:ss', displayFormat: 'YYYY-MM-DD' });
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
this.value = core.DateHelper.getValue('TODAY', 'YYYY-MM-DD');
|
|
116
|
+
}
|
|
117
|
+
beforeNext(element, event) {
|
|
118
|
+
this.callEvent('beforeNext', { event, element, component: this });
|
|
106
119
|
}
|
|
107
120
|
/**
|
|
108
121
|
* Event triggered when the current slide changes.
|
|
@@ -110,21 +123,22 @@
|
|
|
110
123
|
* @param element Calendar element
|
|
111
124
|
*/
|
|
112
125
|
next(element, event) {
|
|
113
|
-
this.callEvent('
|
|
126
|
+
this.callEvent('next', { event, element, component: this });
|
|
114
127
|
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
115
|
-
this.callEvent('next', { event, element, component: this });
|
|
116
128
|
this.callEvent('afterNext', { event, element, component: this });
|
|
117
129
|
}
|
|
118
130
|
}
|
|
131
|
+
beforePrevious(element, event) {
|
|
132
|
+
this.callEvent('beforePrevious', { event, element, component: this });
|
|
133
|
+
}
|
|
119
134
|
/**
|
|
120
135
|
* Event triggered when the current slide changes.
|
|
121
|
-
* @param event Event that triggered the
|
|
136
|
+
* @param event Event that triggered the previous button event
|
|
122
137
|
* @param element Calendar element
|
|
123
138
|
*/
|
|
124
139
|
previous(element, event) {
|
|
125
|
-
this.callEvent('
|
|
140
|
+
this.callEvent('previous', { event, element, component: this });
|
|
126
141
|
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
127
|
-
this.callEvent('previous', { event, element, component: this });
|
|
128
142
|
this.callEvent('afterPrevious', { event, element, component: this });
|
|
129
143
|
}
|
|
130
144
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-calendar-common",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Powered by Zeedhi",
|
|
5
5
|
"main": "dist/calendar-common.umd.js",
|
|
6
6
|
"module": "dist/calendar-common.esm.js",
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"@zeedhi/common": "*",
|
|
24
24
|
"@zeedhi/core": "*"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "ba6bbebdef28d1c858b88f4b63718ec4aecf3ed6"
|
|
27
27
|
}
|
package/types/calendar.d.ts
CHANGED
|
@@ -58,15 +58,18 @@ export declare class Calendar extends ComponentRender implements ICalendar {
|
|
|
58
58
|
*/
|
|
59
59
|
events: ICalendarEvents;
|
|
60
60
|
constructor(props: ICalendar);
|
|
61
|
+
goToToday(): void;
|
|
62
|
+
beforeNext(element: any, event?: Event): void;
|
|
61
63
|
/**
|
|
62
64
|
* Event triggered when the current slide changes.
|
|
63
65
|
* @param event Event that triggered the next button event
|
|
64
66
|
* @param element Calendar element
|
|
65
67
|
*/
|
|
66
68
|
next(element: any, event?: Event): void;
|
|
69
|
+
beforePrevious(element: any, event?: Event): void;
|
|
67
70
|
/**
|
|
68
71
|
* Event triggered when the current slide changes.
|
|
69
|
-
* @param event Event that triggered the
|
|
72
|
+
* @param event Event that triggered the previous button event
|
|
70
73
|
* @param element Calendar element
|
|
71
74
|
*/
|
|
72
75
|
previous(element: any, event?: Event): void;
|