@fivexlabs/ng-schedular NPM

@fivexlabs/ng-schedular

A comprehensive Angular calendar library with advanced scheduling features, built on top of FullCalendar.

🚀 Quick Start

Installation

npm install @fivexlabs/ng-schedular

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install @angular/common @angular/core @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction rxjs

🌐 Demo

Check out the live demo: https://fivex-schedular.web.app/

💡 Quick Start

1. Import the Component

import { Component } from '@angular/core';
import { LibSchedularComponent, SchedularData, SchedularConfig, SchedularEventHandlers } from '@fivexlabs/ng-schedular';

@Component({
  selector: 'app-my-calendar',
  standalone: true,
  imports: [LibSchedularComponent],
  template: `
    <lib-schedular
      [data]="calendarData"
      [config]="calendarConfig"
      [handlers]="eventHandlers">
    </lib-schedular>
  `
})
export class MyCalendarComponent {
  calendarData: SchedularData = {
    events: [],
    categories: [],
    participants: []
  };

  calendarConfig: SchedularConfig = {
    theme: 'light',
    defaultView: 'dayGridMonth',
    enableNotifications: true
  };

  eventHandlers: SchedularEventHandlers = {
    onEventCreated: (event) => console.log('Event created:', event),
    onEventUpdated: (event) => console.log('Event updated:', event),
    onEventDeleted: (eventId) => console.log('Event deleted:', eventId)
  };
}

2. Basic Template Usage

<lib-schedular
  [data]="calendarData"
  [config]="calendarConfig"
  [handlers]="eventHandlers"
  (eventCreated)="onEventCreated($event)"
  (eventUpdated)="onEventUpdated($event)"
  (eventDeleted)="onEventDeleted($event)">
</lib-schedular>

📦 Features

📅 Full Calendar Integration - Built on FullCalendar with multiple view types
🎨 Theme Support - Light/dark themes with customizable colors
📂 Category Management - Organize events with color-coded categories
🔄 Recurrence Rules - Support for complex recurring events
🔔 Notifications - Browser notifications for upcoming events
👥 Participant Management - Add and manage event participants
💾 Storage Adapter Pattern - Flexible data persistence (localStorage, API, custom)
🎯 Event-Driven Architecture - Comprehensive event emissions for integration
📱 Responsive Design - Works on desktop and mobile devices

📖 API Reference

Inputs

Property	Type	Description
`data`	`SchedularData`	Initial calendar data (events, categories, participants)
`config`	`SchedularConfig`	Calendar configuration options
`handlers`	`SchedularEventHandlers`	Event handler functions

Outputs

Event	Type	Description
`eventCreated`	`CalendarEvent`	Emitted when a new event is created
`eventUpdated`	`CalendarEvent`	Emitted when an event is updated
`eventDeleted`	`string`	Emitted when an event is deleted (event ID)
`categoryCreated`	`EventCategory`	Emitted when a new category is created
`categoryUpdated`	`EventCategory`	Emitted when a category is updated
`categoryDeleted`	`string`	Emitted when a category is deleted
`participantCreated`	`Participant`	Emitted when a new participant is added
`participantUpdated`	`Participant`	Emitted when a participant is updated
`participantDeleted`	`string`	Emitted when a participant is deleted
`dateSelected`	`Date`	Emitted when a date is selected
`viewChanged`	`string`	Emitted when the calendar view changes

🔧 Data Models

CalendarEvent

interface CalendarEvent {
  id: string;
  title: string;
  startDate: Date;
  endDate?: Date;
  allDay: boolean;
  categoryId: string;
  description?: string;
  location?: string;
  recurrence?: RecurrenceRule;
  notifications?: EventNotification[];
  participantIds?: string[];
}

EventCategory

interface EventCategory {
  id: string;
  name: string;
  color: string;
  icon: string;
  isVisible: boolean;
  description?: string;
}

Participant

interface Participant {
  id: string;
  name: string;
  email: string;
  avatar?: string;
  status?: 'accepted' | 'declined' | 'pending';
}

💾 Storage Adapters

The library uses a storage adapter pattern for flexible data persistence:

Using Local Storage (Default)

import { LocalStorageAdapter } from '@fivexlabs/ng-schedular';

// Local storage is used by default, no additional setup needed

Using Custom API Storage

import { SchedularStorageAdapter } from '@fivexlabs/ng-schedular';

class ApiStorageAdapter implements SchedularStorageAdapter {
  async getEvents(): Promise<CalendarEvent[]> {
    const response = await fetch('/api/events');
    return response.json();
  }

  async saveEvents(events: CalendarEvent[]): Promise<void> {
    await fetch('/api/events', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(events)
    });
  }

  // Implement other required methods...
}

// Use with the calendar
const apiAdapter = new ApiStorageAdapter();
// Set adapter through service injection or component configuration

🎯 Advanced Usage

Programmatic Control

import { ViewChild } from '@angular/core';
import { LibSchedularComponent } from '@fivexlabs/ng-schedular';

export class MyComponent {
  @ViewChild(LibSchedularComponent) calendar!: LibSchedularComponent;

  navigateToDate(date: Date) {
    this.calendar.navigateToDate(date);
  }

  changeView(view: string) {
    this.calendar.changeView(view);
  }

  addEvent(event: CalendarEvent) {
    this.calendar.addEvent(event);
  }
}

Custom Themes

const customConfig: SchedularConfig = {
  theme: 'dark',
  customColors: {
    primary: '#your-color',
    secondary: '#your-color',
    background: '#your-color'
  }
};