@zeedhi/zd-calendar-vue

Componente Calendar para Zeedhi

Instalação   |    Uso Básico   |    Propriedades   |    Métodos   |   

O component zd-calendar renderizar um calendar onde pode ser adicionado eventos.

Instalação

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.

Uso Básico

Para usar, defina a propriedade component como 'ZdCalendar'.

{
  "name": "calendar-example",
  "component": "ZdCalendar"
}

Propriedades

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.

---

Métodos

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

---

CalendarEvents

type CalendarEvents = {
  id: string | number;
  name: string;
  start: string | Date;
  end: string | Date;
  description?: string;
  color?: string;
  timed?: boolean;
  category?: string;
};