Instalação | Uso Básico | Propriedades | Métodos |
O component zd-calendar renderizar um calendar onde pode ser adicionado eventos.
Para instalar o pacote basta rodar o seguinte comando:
npm i @zeedhi/zd-calendar
Com isso, dois pacotes serão instalados: o @zeedhi/zd-calendar-common e o @zeedhi/zd-calendar-vue.
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
import ZdCalendar from '@zeedhi/zd-calendar-vue';
Vue.component('ZdCalendar', ZdCalendar);
Já o pacote @zeedhi/zd-calendar-common deve ser importado no arquivo controller do componente.
Para usar, defina a propriedade component como 'ZdCalendar'.
{
"name": "calendar-example",
"component": "ZdCalendar"
}
Nome | Tipo | Default | Descrição | |
---|---|---|---|---|
categories | array | string | undefined | 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. | |
categoryDays | number | string | 1 | O número de dias para renderizar na exibição de categoria. | |
categoryForInvalid | string | undefined | 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 | |
categoryHideDynamic | boolean | false | Define se as categorias especificadas em um evento devem ser ocultadas se não estiverem definidas nas categorias. | |
categoryShowAll | boolean | false | Defina se a exibição de categoria deve mostrar todas as categorias definidas, mesmo que não haja eventos para uma categoria. | |
categoryText | string | function | undefined | Reduz a largura máxima do conteúdo para 70%. | |
color | string | undefined | 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 página de cores. | |
dark | boolean | false | Aplica o tema dark ao calendar | |
dayFormat | function | null | Formata a string do dia do mês que aparece em um dia para uma localidade especificada | |
end | string | number | date | undefined | A data de término no calendário (inclusive) no formato AAAA-MM-DD. Isso pode ser ignorado dependendo do tipo de calendário. | |
eventColor | string | function | primary |
Defina a propriedade da categoria do evento. Em vez de uma propriedade pode ser dada uma função que recebe um evento e retorna a categoria. |
|
eventColor | string | function | primary | 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. | |
eventEnd | string | end | Defina a propriedade timestamp de término dos eventos. | |
eventHeight | number | 20 | A altura de um evento em pixels na visualização do mês e na parte superior das visualizações do dia. | |
eventMarginBottom | number | 1 | Margem inferior para evento | |
eventMore | boolean | true | Mostra o botão mais eventos | |
eventMoreText | string | CALENDAR_MORE | Define o texto do botão mais calendarEvent | |
eventName | string | function | name | 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. | |
eventOverlapMode | string | stack | Define o modo como o calendarEvent sera exibido stack column
|
|
eventOverlapThreshold | string | number | 60 | 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. | |
eventStart | string | function | start | Defina a propriedade timestamp de início dos eventos. | |
eventTextColor | string | function | white | Define a cor do texto do evento calendar | |
eventTimed | string | function | timed | 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. | |
eventsCalendar | array | CalendarEvents[] | Define um array de object de CalendarEvents | |
firstInterval | number | string | 0 | 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. | |
firstTime | number | string | object | undefined | 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. | |
hideHeader | boolean | false | Se o cabeçalho na parte superior da visualização do dia deve estar visível. | |
intervalCount | number | string | 24 | O número de intervalos a serem exibidos na exibição do dia. | |
intervalFormat | function | null | 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 | |
intervalHeight | number | string | 48 | A altura de um intervalo em pixels na visualização do dia. | |
intervalMinutes | number | string | 60 | 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. | |
intervalStyle | function | null | Retorna um estilo de CSS a ser aplicado ao intervalo. | |
intervalWidth | number | string | 60 | Define a largura do gutter ao lado esquerdo na visualização dia. |
|
ligth | boolean | false | Define o tema ligth ao componente | |
locale | string | pt-BR | Define a localidade do calendário | |
localeFirstDayOfYear | string | number | 0 | Define o dia que determina a primeira semana do ano, começando com 0 para domingo. Para ISO 8601, isso deve ser 4. | |
maxDays | number | 7 | O número máximo de dias a serem exibidos no calendário personalizado se um dia de término não for definido. | |
minWeek | any | 1 | O número mínimo de semanas a serem exibidas na exibição de mês ou semana. | |
monthFormat | function | null | Formata a string do mês que aparece em um dia para a localidade especificada | |
now | string | undefined | 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 now . |
|
selectTypeData | object | undefined | Define uma data ao componente select com os tipos de visualizção do calendário. | |
shortIntervals | boolean | true | Os intervalos na visualização do dia serão 9h, em vez de 09h. | |
shortMonths | boolean | true | Se as versões curtas de um mês devem ser usadas (jan vs janeiro). | |
shortWeekday | boolean | true | Se as versões curtas de um dia da semana devem ser usadas (seg vs segunda-feira). | |
shortIntervalsLabel | boolean | true | Verifica se um determinado dia e hora devem ser exibidos no gutter de intervalo da visualização do dia. |
|
showHeader | boolean | true | Mostra o cabeçalho do calendário com opções de navegação e trocar o modo de visualização | |
showMonthOnFirst | boolean | true | Se o nome do mês deve ser exibido no primeiro dia do mês. | |
showWeek | boolean | false | Se os números da semana devem ser exibidos ao usar a visualização do mês. | |
start | string | number | date | new Date() | A data de início no calendário (inclusive) no formato YYYY-MM-DD. Isso pode ser ignorado dependendo do tipo de calendário. | |
title | string | Define um titulo para o calendário, é exibido se showHeader for true | ||
type | string | month | 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. | |
value | string | number | date | undefined | Uma data no formato YYYY-MM-DD que determina o intervalo de tempo do calendário. | |
weekdayFormat | function | null | Formata a string do dia da semana que aparece no cabeçalho para a localidade especificada | |
weekdays | array | string | [0, 1, 2, 3, 4, 5, 6] | 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. |
Nome | Propriedades | Descrição |
---|---|---|
addCalendarEvents | CalendarEvents[] | Adicionar novos calendarEvent ao calendar |
updateCalendarEvent | CalendarEvents[] | Atualizar um calendarEvent ao calendar |
clearCalendarEvents | Remove todos os calendarEvent do calendar | |
removeCalendarEvents | CalendarEvents[] | Remove um calendarEvents do calendar |
type CalendarEvents = {
id: string | number;
name: string;
start: string | Date;
end: string | Date;
description?: string;
color?: string;
timed?: boolean;
category?: string;
};