JSPM

Chrono Calendar Uma biblioteca de calendário moderna, responsiva e personalizável para aplicações Angular. Construída com Signals e componentes standalone para uma integração simples e performática.

Coloque aqui um GIF ou uma imagem do seu calendário em ação!

✨ Funcionalidades Múltiplas Visualizações: Alterne facilmente entre as visualizações mensal, semanal e diária.

Componentes Standalone: Integre facilmente em qualquer projeto Angular moderno sem a necessidade de NgModules.

API Simples: Use @Input para fornecer eventos e @Output para ouvir interações do usuário.

Sem Dependências Externas: Estilizado com CSS puro e encapsulado, não exigindo que o seu projeto tenha frameworks como Tailwind ou Bootstrap.

Leve e Performático: Construído com Signals para uma reatividade otimizada.

💾 Instalação Para começar, instale a biblioteca em seu projeto Angular usando o npm:

npm install chrono-calendar

🚀 Como Usar A integração da biblioteca é feita em poucos passos.

1. Importe o Componente No seu componente standalone, importe o ChronoCalendarComponent e os tipos necessários.

// no seu-componente.component.ts import { Component } from '@angular/core'; import { ChronoCalendarComponent, EventoCalendario } from 'chrono-calendar';

@Component({ selector: 'app-sua-pagina', standalone: true, imports: [ChronoCalendarComponent], // Adicione o componente aqui templateUrl: './sua-pagina.component.html', }) export class SuaPaginaComponent { // ... }

2. Adicione ao Template e Forneça os Dados Use o seletor no seu template e passe a lista de eventos.

3. Prepare os Dados dos Eventos No seu arquivo .ts, crie a lista de eventos e a função para lidar com os cliques.

// no seu-componente.component.ts export class SuaPaginaComponent {

meusEventos: EventoCalendario[] = [ { id: 1, titulo: 'Reunião de Equipa', inicio: new Date('2025-08-25T10:00:00'), fim: new Date('2025-08-25T11:00:00'), cor: '#0d6efd', // Azul }, { id: 2, titulo: 'Almoço com Cliente', inicio: new Date('2025-08-26T12:30:00'), fim: new Date('2025-08-26T14:00:00'), cor: '#198754', // Verde }, ];

handleEventoClicado(evento: EventoCalendario) { console.log('Evento clicado:', evento); alert(Evento: ${evento.titulo}); } }

⚙️ API de Propriedades Personalize e interaja com o calendário usando as seguintes propriedades.

Entradas (@Input) Propriedade

Tipo

Padrão

Descrição

eventos

EventoCalendario[]

[]

A lista de eventos a serem exibidos no calendário.

visualizacaoInicial

'mensal' | 'semanal' | 'diario'

'mensal'

Define qual visualização será exibida quando o calendário for carregado.

Saídas (@Output) Evento

Retorna

Descrição

eventoClicado

EventoCalendario

Emitido quando o utilizador clica num evento dentro do calendário.

diaClicado

Date

Emitido quando o utilizador clica numa célula de dia (na visão mensal/semanal).

mudancaDeVisualizacao

'mensal' | 'semanal' | 'diario'

Emitido quando o utilizador troca o tipo de visualização (Mês, Semana, Dia).

mudancaDeMes

{ inicio: Date, fim: Date }

Emitido quando o intervalo de datas visível muda.

🗺️ Roadmap (Futuras Funcionalidades) [ ] Funcionalidade de arrastar e soltar (Drag and Drop) para mover eventos.

[ ] Internacionalização (i18n) para diferentes idiomas.

[ ] Mais opções de customização de temas e cores.

[ ] Visualização de Agenda (Lista de eventos).

🤝 Contribuindo Contribuições são muito bem-vindas! Se você tem uma sugestão ou quer corrigir um bug, por favor, abra uma issue ou envie um pull request.

📄 Licença Este projeto está licenciado sob a Licença MIT.