ng-monthly-calendar Usage Documentation

Overview

The ng-monthly-calendar is an Angular component designed to display and manage calendar events in a customizable and interactive manner. It supports features like drag-and-drop event management, infinite scrolling, and event resizing.

Installation

npm install @angular/material @angular/cdk ng-monthly-calendar

Usage

To use the ng-monthly-calendar in your Angular application, follow the steps below:

1. Install the Component

First, you need to include the ng-monthly-calendar package in your project. If it's not published to npm yet, make sure to publish it following the npm package publishing guidelines.

2. Import the Component

In your Angular module, import the necessary modules and the ng-monthly-calendar.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CalendarComponent } from 'ng-monthly-calendar'; // Adjust the import path if needed

@NgModule({
  declarations: [
    // other components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarComponent // Add the CalendarComponent here
  ],
  providers: [],
})
export class AppModule { }

3. Use the Component in Your Template

Use the monthly-calendar selector to add the calendar to your template. You can provide the necessary inputs and handle the outputs as needed.

<monthly-calendar 
  [buttons]="buttons" 
  [startDate]="startDate" 
  [endDate]="endDate" 
  [eventCard]="eventCard" 
  [events]="events"
  [dayColumnWidth]="8"
  [dayRowDateFormat]="'E d'"
  [dayClasses]="'border-b border-gray-300 hover:bg-sky-50 min-h-[55px]'"
  (eventClicked)="onEventClicked($event)" 
  (timeSlotClicked)="console.log($event)"  
  (dragMoved)="console.log($event)" 
  (resized)="console.log($event, 'resized')">
</monthly-calendar>

<ng-template #buttons let-day="day">
  <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
    <mat-icon class="text-teal-700">add</mat-icon>
  </button>
  <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
    <mat-icon class="text-teal-700">content_copy</mat-icon>
  </button>
</ng-template>

<ng-template #eventCard let-day="day" let-event="event">
  <div class="event-time text-xs h-full text-md flex items-center justify-center">
    {{ event.tooltip }}
    {{ formatHours(event.startHour) }} - {{ formatHours(getEndHour(event)) }}
    <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
      <mat-icon class="text-black">more_vert</mat-icon>
    </button>
  </div>
</ng-template>

4. Provide Necessary Data and Methods

In your component class, define the necessary data and methods to handle the inputs and outputs of the ng-monthly-calendar.

import { Component, TemplateRef, ViewChild } from '@angular/core';
import * as moment from 'moment';
import { ICalendarEvent } from 'ng-monthly-calendar'; // Adjust the import path if needed

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  startDate = moment().startOf('month');
  endDate = moment().endOf('month');
  events: ICalendarEvent[] = [
    // Your events here
  ];

  formatHours(hour: number): string {
    return `${hour.toString().padStart(2, '0')}:00`;
  }

  getEndHour(event: ICalendarEvent): number {
    return event.startHour + event.duration;
  }

  onEventClicked(event: ICalendarEvent) {
    console.log('Event clicked:', event);
  }
}

Inputs

buttons

• Type: TemplateRef<any>
• Description: A template reference for custom buttons to be displayed in the calendar header.

startDate

• Type: moment.Moment
• Description: The start date of the calendar.

endDate

• Type: moment.Moment
• Description: The end date of the calendar.

eventCard

• Type: TemplateRef<any>
• Description: A template reference for custom event cards to be displayed in the calendar.

events

• Type: ICalendarEvent[]
• Description: An array of calendar events to be displayed.

dayColumnWidth

• Type: number
• Description: The width of the day column in percentage. Default is 8.

dayRowDateFormat

• Type: string
• Description: The format for the day row date. Default is 'E d'.

dayClasses

• Type: string
• Description: Custom CSS classes for day cells. Default is 'border-b border-gray-300 hover:bg-sky-50 min-h-[55px]'.

Outputs

eventClicked

• Type: EventEmitter<ICalendarEvent>
• Description: Emits an event when a calendar event is clicked.

dragMoved

• Type: EventEmitter<{ event: ICalendarEvent, movedFromHour: number, movedToHour: number, day: string }>
• Description: Emits an event when a calendar event is dragged and moved.

resized

• Type: EventEmitter<{ event: ICalendarEvent, newDuration: number, startHour: number, day: string }>
• Description: Emits an event when a calendar event is resized.

timeSlotClicked

• Type: EventEmitter<{ day: string, hour: number }>
• Description: Emits an event when a time slot is clicked.

By following these steps, you can successfully integrate and use the ng-monthly-calendar in your Angular application.

Next Release Notes

Features

• Handle Overlapping: Improved the calendar to handle overlapping events more efficiently. Events that overlap will now be displayed side by side with adjusted widths to ensure all events are visible.
• Responsive Design: Enhanced the responsiveness of the calendar component. It now adapts better to different screen sizes, ensuring a smooth user experience on both desktop and mobile devices.