Flexible Responsive Event Calendar jQuery

Flexible Responsive Event Calendar jQuery – Evo-Calendar

This flexible responsive event calendar jQuery plugin is a supple event calendar plugin which is used to display events in a reactive way. It’s a responsive and modern-looking calendar interface that comes with many features.

Features

  • Responsive event calendar jQuery plugin permits you to set event type like its holiday, birthday, anniversary on else.
  • You can add, Remove and View single along or multiple calendar events
  • Responsive calendar for desktop, tablet and mobile.
  • Evo-Calendar is fully flexible and customized.
  • High-points today’s date in the calendar.
  • Permits you to switch between months from the foldaway sidebar.
  • Evo-Calendar shows events on the right panel.
  • Responsive event calendar jQuery plugin has with 4 supplementary themes and Multiple languages.
  • It allows to display multiple events on the same day.

Usage

CDN

Start working with Evo Calendar using CDN (jsDelivr)

Adding links using jsDelivr:

Just add a link to the CSS file in your <head>

<!-- Add the evo-calendar.css for styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/css/evo-calendar.min.css"/>

Then, before your closing <body> tag add

<!-- Add jQuery library (required) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- Add the evo-calendar.js for.. obviously, functionality! -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/js/evo-calendar.min.js"></script>

Initialization:

In your html file:

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

Then in your JavaScript file:

<script>
  $("#calendar").evoCalendar();
</script>

Package Managers:

# NPM
$ npm install evo-calendar

# YARN
$ yarn add evo-calendar
Flexible Responsive Event Calendar jQuery - Evo-Calendar

Settings

SettingsTypeDefaultDescriptionOptions
themestringDefaultDefine calendar’s themeDefault, Midnight Blue, Orange Coral, Royal Navy
formatstring‘mm/dd/yyyy’Date formatDate string format
titleFormatstring‘MM yyyy’Date format for calendar titleDate string format
eventHeaderFormatstring‘MM d, yyyy’Date format for calendar event’s titleDate string format
firstDayOfWeeknumber0Displayed first day of the week0 (Sunday) – 6 (Saturday)
languagestring‘en’Calendar’s languageen, es, de, pt, fr, nl
todayHighlightbooleanfalseHighlight today’s date in calendartrue, false
sidebarDisplayDefaultbooleantrueSet default visibility of sidebartrue, false
sidebarTogglerbooleantrueDisplay the button for toggling the sidebartrue, false
eventDisplayDefaultbooleantrueSet default visibility of event liststrue, false
eventListTogglerbooleantrueDisplay the button for toggling the event liststrue, false
calendarEventsarraynullDefined events for calendar to showArray of events

Calendar Event Options Example

$("#evoCalendar").evoCalendar({
    calendarEvents: [
      {
        id: 'bHay68s', // Event's ID (required)
        name: "New Year", // Event name (required)
        date: "January/1/2020", // Event date (required)
        type: "holiday", // Event type (required)
        everyYear: true // Same event every year (optional)
      },
      {
        name: "Vacation Leave",
        badge: "02/13 - 02/15", // Event badge (optional)
        date: ["February/13/2020", "February/15/2020"], // Date range
        description: "Vacation leave for 3 days.", // Event description (optional)
        type: "event",
        color: "#63d867" // Event custom color (optional)
      }
    ]
  });

Methods

MethodArgumentDescription
setThemestringSet/Change theme
toggle-sidebarboolean (optional)Toggle sidebar display
toggleEventListboolean (optional)Toggle event list display
getActiveDatenoneGet the selected date
getActiveEventsnoneGet the event(s) of selected date
selectYearnumberSelect year programmatically
selectMonthnumber (0-11)Select month programmatically
selectDatestringSelect date programmatically
addCalendarEventarray/objectAdd Calendar event(s)
removeCalendarEventarray/stringRemove event(s) by their id
destroynoneWell.. destroy the calendar

add Calendar Event Method Example

$("#evoCalendar").evoCalendar('addCalendarEvent', [
    {
      id: '09nk7Ts',
      name: "My Birthday",
      date: "February/15/2020",
      type: "birthday",
      everyYear: true
    }
  ]);

Events

EventArgumentDescription
selectDatenewDate, oldDateFires after selecting date
selectEventactiveEventFires after selecting event
selectMonthactiveMonth, monthIndexFires after selecting month
destroycalendarFires after destroying calendar

Select Date Event Example

$("#evoCalendar").on('selectDate', function() {
    // code here
  });

File Information

File Size377 KB
Last Update3 Days ago
Published Date7 Months ago
LicenseMIT

Your email address will not be published. Required fields are marked *

More Stories
JavaScript Progress Bar with Percentage
JavaScript Progress Bar with Percentage