Npx-calendar NPM

NpxCalendar

🚀 Introduction

npx-calendar is a powerful Angular calendar component that helps developers build event calendars, date pickers, and schedulers with ease.

📖 Table of Contents

NpxCalendar

📦 Installation

To install the npx-calendar package, run the following command:

npm install npx-calendar

🚀 Usage

Import the NpxCalendarComponent in your Angular module:

import { NgModule } from "@angular/core";
import { NpxCalendarComponent } from "npx-calendar";

@NgModule({
  declarations: [AppComponent],
  imports: [NpxCalendarComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use the npx-calendar component in your template:

<npx-calendar [events]="events" [options]="options"></npx-calendar>

⚙️ Configuration

The npx-calendar component supports the following options:

events: Array of events to display with properties:
- title: Event title
- time: Event time
- description: Brief event description
- start_time: Event start time
- end_time: Event end time
- style: Custom CSS style for the event
- attendees: Array of attendees to display with properties:
  - name: Attendee name
  - image: Attendee image URL
- location: Event location
- locationLink: Event location link
- category: Category type of event
- categoryColor: Category colour for the event
month: Month to display (0-11, January-December)
year: Year to display

📅 Events

The component emits the following events:

dayClick: Triggered when a day is clicked
eventClick: Triggered when an event is clicked
monthChange: Triggered when the month changes
yearChange: Triggered when the year changes

🎨 Styles

Default CSS classes for customization:

npx-calendar: Main container
npx-calendar-header: Calendar header
npx-calendar-body: Calendar body
npx-calendar-day: Individual day
npx-calendar-event: Event display

🔥 Examples

Usage example:

<npx-calendar [events]="events" [options]="options"></npx-calendar>

import { Component } from "@angular/core";

@Component({
  selector: "app-example",
  template: "./example.component.html",
})
export class ExampleComponent {
  events = [
    {
      month: 3,
      list: [
        {
          day: 1,
          events: [
            {
              time: "11:00 AM",
              title: "TPI Daily Meeting",
              start_time: "11:00 AM",
              end_time: "12:00 PM",
              description: "TPI Daily Meeting",
              style: "background-color: #001B4F; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
            {
              time: "2:00 PM",
              title: "Angular Meeting",
              start_time: "2:00 PM",
              end_time: "3:00 PM",
              description: "Angular Meeting",
              style: "background-color: #1abc9c; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
            {
              time: "4:00 PM",
              title: "React Meeting",
              start_time: "4:00 PM",
              end_time: "5:00 PM",
              description: "React Meeting",
              style: "background-color: #1abc9c; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
          ],
        },
        {
          day: 2,
          events: [
            {
              time: "11:00 AM",
              title: "TPI Daily Meeting",
              start_time: "11:00 AM",
              end_time: "12:00 PM",
              description: "TPI Daily Meeting",
              style: "background-color: #1abc9c; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
          ],
        },
        {
          day: 3,
          events: [
            {
              time: "11:00 AM",
              title: "TPI Daily standup call",
              start_time: "11:00 AM",
              end_time: "12:00 PM",
              description: "TPI Daily Meeting",
              style: "background-color: #001B4F; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
            {
              time: "2:00 PM",
              title: "Angular Meeting",
              start_time: "2:00 PM",
              end_time: "3:00 PM",
              description: "Angular Meeting",
              style: "background-color: #1abc9c; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
            {
              time: "4:00 PM",
              title: "React Meeting",
              start_time: "4:00 PM",
              end_time: "5:00 PM",
              description: "React Meeting",
              style: "background-color: #001B4F; color: #fff;",
              attendees: [
                {
                  name: "John Doe",
                  image: "https://randomuser.me/api/portraits/men/1.jpg",
                },
              ],
              location: "india",
              locationLink: "https://www.google.com/maps/search/india",
              category: "General",
              categoryColor: "#1abc9c",
            },
          ],
        },
      ],
    },
  ];

  options = {
    show_header: true,
    header_style: "background-color: #f0f0f0;",
    show_arrow: true,
    arrow_style: "color: #333;",
    show_month_picker: true,
    month_picker_style: "background-color: #f0f0f0;",
    show_calendar_view_filter: true,
    calendar_view_filter_style: "background-color: #f0f0f0;",
    current_day_style: "background-color: #ccc;",
  };
}

📜 API

The npx-calendar component provides:

NpxCalendarComponent: Main calendar component
NpxCalendarService: Calendar-related functionalities
CalendarEvent: Interface for a calendar event
CalendarEventList: Interface for a list of calendar events

📌 Changelog

0.0.1: Initial release
0.0.2: Added event click support
0.0.3: Added event title, time, description, style, attendees, location, location link, category, and category color support
0.0.4: Added Week Calendar UI and Functinality