Check out the demo and explore the demo repository.

Installation:

1. Using CDN:

   https://cdn.jsdelivr.net/gh/back2Lobby/evc@latest/dist/evc.min.js

2. Using NPM:

    npm install evc

Usage:

With NPM Package:

We can specify the events in the EventCalendar class constructor. Then we can listen to the custom events fired by evc and update our UI accordingly by chaining the on method.

  import EventCalendar from "evc";

  const evc = new EventCalendar([
    {
      title: "John's Birthday",
      start: {
        day: 23,
        month: 4,
      },
    }
  ]).on("yearChanged",(year) => {
    // whatever you want to do when year is changed. Maybe update the UI like this
    document.querySelector("#calendarHeader #thisYear").innerHTML = year;
  }).on("monthChanged",(month) => {
    // ...
  }).on("daysChanged",(days) => {
    // ...
  }).on("selectedDayChanged",(selectedDay) => {
    // ...
  });

  // changing month
  evc.month++;

With CDN:

Using evc with CDN is same as using npm package except that we need to wrap the classes in a global variable EVC. Something like this:

const evc = new EVC.EventCalendar([
    {
      title: "John's Birthday",
      start: {
        day: 23,
        month: 4,
      },
    }
  ])

Documentation:

EventCalendar Class:

Event Calendar is a class that manages the events and the calendar. By default, it will be created with the current month and year.

// example creating a new EventCalendar
new EventCalendar([events]);

where events is an array of objects of class CalendarEvent

Properties:

| Property | Description | | ----------- | ----------- | | events | An array of objects of class CalendarEvent or a simple js object with similar properties | | days | Array of objects containing two properties: day: A JavaScript date objectevents: An array of objects of class CalendarEvent representing events on this day | | month | Target month (1-12). Changing this value will triggered the 'monthChanged' event | | year | Target year. Changing this value will triggered the 'yearChanged' event | | selectedDay | The currently selected day (null by default). Changing this value will triggered the 'selectedDayChanged' event |

Methods:

| Method | Description | | ----------- | ----------- | | on | Attach an event listener to the EventCalendar. The event listener will be called with the event name and the event data on(eventName, callback) Where the data dispatched with event and the current EventCalendar instance will be passed to callback function| | addEvent | Add an event to the calendar. The event will be added to the events array type property addEvent(event) Where event is an instance of CalendarEvent or a simple object having same properties| | removeEvent | Remove an event from the calendar. The event will be remove from the events array type property removeEvent(event) Where event is an instance of CalendarEvent or a simple object having same properties |

CalendarEvent Class:

A class that represents an event. Here are some type of events that can be created:

Single Day Events

new CalendarEvent({
  title: "Important Meeting",
  start: {
    day: 23,
    month: 5,
    year: 2022
  },
  themeColor : "#cf3333",
})

Multi-day Events

new CalendarEvent({
  title: "Exams",
  start: {
    day: 5,
    month: 7,
    year: 2022
  },
  end: {
    day: 19,
    month: 7,
    year: 2022
  },
  themeColor : "#2196f3",
})

Weekly Events

new CalendarEvent({
  title: "Sunday",
  start: {
    weekDay: 0
  },
  themeColor : "#8bc34a",
})

Monthly Events

new CalendarEvent({
  title: "Monthly Exams",
  start: {
    day: 15
  },
  end: {
    day: 21
  }
  themeColor : "#333333",
})

Yearly Events

new CalendarEvent({
  title: "John's Birthday",
  start: {
    day: 26,
    month: 7
  }
  themeColor : "#8a4af3",
})

Properties:

| Property | Required In Constructor | Description | | ----------- | ----------- | ----------- | | id | NO | The id of the event (auto generated if not specified) | | title | YES | The title of the event | | start | YES | The start date of the event. It should be an object with following properties: day: They day of month (1-31 depending on month)month: The month of year (1-12)year: Target year e.i. 2022weekDay: The day of week in numeric form (0-6 starting from Sunday)| | end | NO | The end date of the event (format same as start). If not specified, same date as start will be used indicating a single day event | | themeColor | NO | The color of the event in hexadecimal form (by default #03a9f4) | | props | NO | Extra properties of the event (by default an empty object) |

Events:

| Event | Description | | --- | --- | | daysChanged | Triggered when days are changed i.e. when month is changed then it will trigger the callback providing the new days of this month that can be displayed in UI | | monthChanged | Triggered by simply changing the month like evc.month++ or by changing the year. Also it will always trigger the 'daysChanged' event with it. | | yearChanged | Triggered by changing year like evc.year++ or by changing the months. | | selectedDayChanged | Triggers when the currently selected day is changed. Its null by default. Selected day can be changed like evc.selectedDay = day where day should be from the days you get from evc.days | | eventsChanged | Triggered when the events are changed. It passes the new events array to callback. |