Responsive Event Calendar jQuery Plugin

Category: Date & Time | April 28, 2020
Responsive Event Calendar jQuery Plugin
Author: Edlyn Villegas
Official Page: Go to Website
Last Update:April 28, 2020
License:MIT

The Evo Event Calendar is a flexible, responsive, and highly customizable calendar plugin for jQuery. It creates a modern designed calendar widget with four different styles including midnight blue, royal navy, and orange coral theme. The plugin supports three types of events (event, holiday, birthday).

The Evo Event Calendar allows users to easily add, remove, or view calendar events. Similarly, it highlights today’s date, displays the first day of the week, and displays events toggle button.

Besides this, this calendar plugin supports various date formats (e.g. mm/dd/yyyy or MM d, yyyy’). Likewise, it also supports different languages and callback functions.

How to Create Responsive Event Calendar

1. First of all, download this plugin, load the jQuery and Evo Calendar JavaScript file into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Evo Calendar JS -->
<script src="evo-calendar/js/evo-calendar.min.js"></script>

2. Similarly, include the Evo Calendar main CSS file and one theme file according to your choice. (You can check the themes on the demo page).

<!-- Evo Calendar CSS -->
<link rel="stylesheet" type="text/css" href="./evo-calendar/css/evo-calendar.css">
<!-- Themes CSS -->
<link rel="stylesheet" type="text/css" href="./evo-calendar/css/evo-calendar.royal-navy.css">
<link rel="stylesheet" type="text/css" href="./evo-calendar/css/evo-calendar.orange-coral.css">
<link rel="stylesheet" type="text/css" href="./evo-calendar/css/evo-calendar.midnight-blue.css">

3. After that, create a div element with a unique id in which the event calendar will be rendered dynamically.

<div id="demoEvoCalendar"></div>

4. Finally, call the plugin (with a few configuration options) in the jQuery document ready function to active the Evo event calendar.

$(document).ready(function(){
    $('#demoEvoCalendar').evoCalendar();
});

Advanced Configuration Options

The following are the advanced configurations options to create the jQuery responsive event calendar.

OptionDefaultTypeDescription
themenullStringThis option defines the theme of the Evo event calendar.

Example:

$(selector).evoCalendar({
	theme : null,
});
format‘mm/dd/yyyy’StringIt set the date format.

Example:

$(selector).evoCalendar({
	format : 'mm/dd/yyyy',
});
titleFormat‘MM yyyy’StringDefines the calendar’s title format.

Example:

$(selector).evoCalendar({
	titleFormat : 'MM yyyy',
});
eventHeaderFormat‘MM d, yyyy’StringDate format for the event title.

Example:

$(selector).evoCalendar({
	eventHeaderFormat : 'MM d, yyyy',
});
firstDayOfWeek‘Sun’StringSet the first day of the week.

Example:

$(selector).evoCalendar({
	firstDayOfWeek : 'Sun',
});
language‘en’StringThe language of the calendar.

Example:

$(selector).evoCalendar({
	language : 'en',
});
todayHighlightfalseBooleanDecide whether to highlight the current day or not.

Example:

$(selector).evoCalendar({
	todayHighlight : false,
});
sidebarDisplayDefaulttrueBooleanEnable/display sidebar default visibility.

Example:

$(selector).evoCalendar({
	sidebarDisplayDefault : true,
});
sidebarTogglertrueBooleanOn/off sidebar toggle button.

Example:

$(selector).evoCalendar({
	sidebarToggler : true,
});
eventDisplayDefaulttrueBooleanSet the default event visibility.

Example:

$(selector).evoCalendar({
	eventDisplayDefault : true,
});
eventListTogglertrueBooleanDecide whether to display the event list toggle button.

Example:

$(selector).evoCalendar({
	eventListToggler : true,
});
calendarEventsnullArrayAn array of events to display in the calendar.

Example:

$(selector).evoCalendar({
	calendarEvents : null,
});

Callback Functions

Basically, the Evo Calendar comes with the following three events to execute the custom callback function.

selectDate: To run the custom function when a date is selected. The available arguments: newDate, oldDate.

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

selectEvent: When an event is selected. The available argument: activeEvent.

  $("#evoCalendar").on('selectEvent', function() {
    // do something
  });

destroy: Run the custom callback function after destroying the calendar. The available argument is: calendar.

  $("#evoCalendar").on('destroy', function() {
    // do something here.
  });

That’s all! we hope you like this event calendar plugin and find this tutorial helpful. If you have any questions or need any further help, let us know by comment below.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.