Responsive Event Calendar jQuery Plugin

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.

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

$(selector).evoCalendar({
	format : 'mm/dd/yyyy',
});

$(selector).evoCalendar({
	titleFormat : 'MM yyyy',
});

$(selector).evoCalendar({
	eventHeaderFormat : 'MM d, yyyy',
});

$(selector).evoCalendar({
	firstDayOfWeek : 'Sun',
});

$(selector).evoCalendar({
	language : 'en',
});

$(selector).evoCalendar({
	todayHighlight : false,
});

$(selector).evoCalendar({
	sidebarDisplayDefault : true,
});

$(selector).evoCalendar({
	sidebarToggler : true,
});

$(selector).evoCalendar({
	eventDisplayDefault : true,
});

$(selector).evoCalendar({
	eventListToggler : true,
});

$(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.