Customizable Event Calendar With Month/Year Selection – Color Calendar

Preview:

Description:

A flexible, customizable, themeable event calendar & month/year picker component written in vanilla JavaScript.

How to use it:

1. Install & import the Color Calendar as an ES module.

# NPM
$ npm i color-calendar

import Calendar from 'color-calendar';
import 'color-calendar/dist/css/theme-basic.css';
import 'color-calendar/dist/css/theme-glass.css';

2. Or directly load the JavaScript and CSS files in the document.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css" />
<script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.min.js"></script>

3. Create a container to hold the event calendar.

<div id="color-calendar"></div>

4. Initialize the calendar and done.

new Calendar({
    id: '#color-calendar',
})

5. Initialize the calendar with events.

const myEvents = [
      {
        start: '2021-04-15T06:00:00',
        end: '2021-04-15T20:30:00',
        name: 'Event 1',
        url: 'https://www.cssscript.com',
        desc: 'Description 1',
        // more key value pairs here
      },{
        start: '2021-04-16T06:00:00',
        end: '2021-04-16T20:30:00',
        name: 'Event 2',
        url: 'https://www.cssscript.com',
      },{
        start: '2021-04-16T06:00:00',
        end: '2021-04-17T20:30:00',
        name: 'Event 3',
        url: 'https://www.cssscript.com',
      },
],

new Calendar({
    id: '#color-calendar',
    eventsData: myEvents,
})

6. Available options to customize the event calendar.

new Calendar({
    // small or large
    calendarSize: 'large',
    // an array of layout modifiers
    layoutModifiers: 'month-align-left',
    
    // basic | glass
    theme: 'glass',
    // custom colors
    primaryColor: '#1a237e',
    headerColor: 'rgb(0, 102, 0)',
    headerBackgroundColor: 'black',
    weekdaysColor: 'based on theme',
    // short | long-lower | long-upper
    weekdayDisplayType: 'short',
    // short | long
    monthDisplayType: 'long',
    // 0 (Sun)
    startWeekday: 0,
    // font family
    fontFamilyHeader: 'based on theme',
    fontFamilyWeekdays: 'based on theme',
    fontFamilyBody: 'based on theme',
    // shadow CSS
    dropShadow: 'based on theme',
    // border CSS
    border: based on theme',
    // border radius
    borderRadius: '0.5rem',
    // disable month year pickers
    disableMonthYearPickers: false,
    // disable click on dates
    disableDayClick: false,
    // disable the arrows to navigate between months
    disableMonthArrowClick: false
    
})

7. Events.

new Calendar({
    dateChanged: (currentDate, DateEvents) => {
      // do something
    },
    monthChanged: (currentDate, DateEvents) => {
      // do something
    };
})

8. API events.

// set date 
instance.setDate(date);
// reset 
instance.reset();
// get selected date
instance.getSelectedDate();
// set events 
instance.setEventsData(eventArray);
// add events
instance.addEventsData(eventArray)
// get event data
instance.getEventsData();
// set weekday display type
instance.setWeekdayDisplayType(type);
// set month display type
instance.setMonthDisplayType(type);

Changelog:

v1.0.7 (07/14/2021)

• Fix incorrect monthDisplayType