evc v1.0.7

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:

Methods:

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:

Events: