Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chrono-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

⏳ Chrono Calendar

A modern, responsive, and customizable calendar library for Angular applications.
Built with Signals and standalone components for simple and performant integration.

🎥 Demo

👉 Live Demo & Documentation

✨ Features

🗓️ Multiple Views → Switch between monthly, weekly, and daily views.
🎯 Drag and Drop → Move events easily between days and time slots.
⚙️ Optional Drag & Drop → Enable or disable via input.
🧩 Standalone Components → Works without NgModules.
🧠 Simple API → Use @Input and @Output for full control.
📅 Powered by Luxon → Reliable and precise date handling.
⚡ Lightweight & Performant → Built with Angular Signals.
🌍 Internationalization Ready → Customizable texts and automatic locale detection.

💾 Installation

npm install chrono-calendar luxon

💡 If you need Luxon types, install them too:

npm install -D @types/luxon

🚀 How to Use

1️⃣ Import the Component and Luxon

import { Component } from '@angular/core';
import { ChronoCalendarComponent, CalendarEvent } from 'chrono-calendar';
import { DateTime } from 'luxon';

@Component({
  selector: 'app-your-page',
  standalone: true,
  imports: [ChronoCalendarComponent],
  templateUrl: './your-page.component.html',
})
export class YourPageComponent {
  // ...
}

2️⃣ Add to Template and Provide Data

<div style="height: 90vh;">
  <chrono-calendar
    [events]="myEvents"
    [initialView]="'weekly'"
    [enableDragDrop]="true"
    [todayButtonText]="'Today'"
    [monthViewText]="'Month'"
    [weekViewText]="'Week'"
    [dayViewText]="'Day'"
    (eventClicked)="handleEventClicked($event)"
    (eventDropped)="handleEventDropped($event)"
  >
  </chrono-calendar>
</div>

3️⃣ Prepare Event Data

import { DateTime } from 'luxon';
import { CalendarEvent, EventDroppedInfo } from 'chrono-calendar';

export class YourPageComponent {
  myEvents: CalendarEvent[] = [
    {
      id: 1,
      title: 'Team Meeting',
      start: DateTime.fromISO('2025-08-25T10:00:00'),
      end: DateTime.fromISO('2025-08-25T11:00:00'),
      color: '#0d6efd',
    },
    {
      id: 2,
      title: 'Client Lunch',
      start: DateTime.fromISO('2025-08-26T12:30:00'),
      end: DateTime.fromISO('2025-08-26T14:00:00'),
      color: '#198754',
    },
  ];

  handleEventClicked(event: CalendarEvent) {
    console.log('Event clicked:', event.title);
    alert(`Event: ${event.title}`);
  }

  handleEventDropped(info: EventDroppedInfo) {
    console.log('Event dropped:', info.event.title);
    console.log('New date:', info.newDate.toISO());
    console.log('Previous date:', info.previousDate.toISO());
  }
}

⚙️ Properties API

🔹 Inputs (`@Input`)

Property	Type	Default	Description
`events`	`CalendarEvent[]`	`[]`	List of events displayed in the calendar.
`initialView`	`'monthly' \| 'weekly' \| 'daily'`	`'monthly'`	Sets the initial view mode.
`enableDragDrop`	`boolean`	`true`	Enables or disables drag-and-drop functionality.
`todayButtonText`	`string`	`'Today'`	Label for the “Today” button.
`monthViewText`	`string`	`'Month'`	Label for the Month view button.
`weekViewText`	`string`	`'Week'`	Label for the Week view button.
`dayViewText`	`string`	`'Day'`	Label for the Day view button.

🔹 Outputs (`@Output`)

Event	Returns	Description
`eventClicked`	`CalendarEvent`	Fired when an event is clicked.
`dayClicked`	`DateTime`	Fired when a day cell is clicked.
`eventDropped`	`EventDroppedInfo`	Fired when an event is moved.
`viewChange`	`'monthly' \| 'weekly' \| 'daily'`	Fired when the view mode changes.
`monthChange`	`{ start: DateTime, end: DateTime }`	Fired when the visible range changes.

🎯 Drag and Drop

Chrono Calendar has built-in drag-and-drop support for all views:

🗓️ Monthly: Move events between days
📅 Weekly: Move events between time slots
🕒 Daily: Reorganize event times

Enable or disable as needed:

<!-- Enable (default) -->
<chrono-calendar [enableDragDrop]="true"></chrono-calendar>

<!-- Disable -->
<chrono-calendar [enableDragDrop]="false"></chrono-calendar>

🌍 Internationalization (i18n)

Customize button labels easily.
Date formatting adapts automatically to the user’s browser locale.

Portuguese Example:

<chrono-calendar
  [todayButtonText]="'Hoje'"
  [monthViewText]="'Mês'"
  [weekViewText]="'Semana'"
  [dayViewText]="'Dia'"
></chrono-calendar>

Spanish Example:

<chrono-calendar
  [todayButtonText]="'Hoy'"
  [monthViewText]="'Mes'"
  [weekViewText]="'Semana'"
  [dayViewText]="'Día'"
></chrono-calendar>

📘 Interfaces

import { DateTime } from 'luxon';

export interface CalendarEvent {
  id: string | number;
  title: string;
  start: DateTime;
  end: DateTime;
  color?: string;
}

export interface EventDroppedInfo {
  event: CalendarEvent;
  newDate: DateTime;
  previousDate: DateTime;
}

🎨 Styling

Chrono Calendar includes default styles.
You can customize it easily by overriding CSS classes using your own theme or stylesheet.

🤝 Contributing

Contributions are always welcome!
If you’d like to improve Chrono Calendar, open a Pull Request or Issue on GitHub.

📄 License

This project is licensed under the MIT License.

Made with ❤️ by the Chrono Calendar team.

chrono-calendar