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:
CSS Animation Notification Style for Inspiration<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
Settings
Settings | Type | Default | Description | Options |
---|---|---|---|---|
theme | string | Default | Define calendar’s theme | Default, Midnight Blue, Orange Coral, Royal Navy |
format | string | ‘mm/dd/yyyy’ | Date format | Date string format |
titleFormat | string | ‘MM yyyy’ | Date format for calendar title | Date string format |
eventHeaderFormat | string | ‘MM d, yyyy’ | Date format for calendar event’s title | Date string format |
firstDayOfWeek | number | 0 | Displayed first day of the week | 0 (Sunday) – 6 (Saturday) |
language | string | ‘en’ | Calendar’s language | en, es, de, pt, fr, nl |
todayHighlight | boolean | false | Highlight today’s date in calendar | true, false |
sidebarDisplayDefault | boolean | true | Set default visibility of sidebar | true, false |
sidebarToggler | boolean | true | Display the button for toggling the sidebar | true, false |
eventDisplayDefault | boolean | true | Set default visibility of event lists | true, false |
eventListToggler | boolean | true | Display the button for toggling the event lists | true, false |
calendarEvents | array | null | Defined events for calendar to show | Array 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
Method | Argument | Description |
---|---|---|
setTheme | string | Set/Change theme |
toggle-sidebar | boolean (optional) | Toggle sidebar display |
toggleEventList | boolean (optional) | Toggle event list display |
getActiveDate | none | Get the selected date |
getActiveEvents | none | Get the event(s) of selected date |
selectYear | number | Select year programmatically |
selectMonth | number (0-11) | Select month programmatically |
selectDate | string | Select date programmatically |
addCalendarEvent | array/object | Add Calendar event(s) |
removeCalendarEvent | array/string | Remove event(s) by their id |
destroy | none | Well.. 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
Event | Argument | Description |
---|---|---|
selectDate | newDate, oldDate | Fires after selecting date |
selectEvent | activeEvent | Fires after selecting event |
selectMonth | activeMonth, monthIndex | Fires after selecting month |
destroy | calendar | Fires after destroying calendar |
Select Date Event Example
$("#evoCalendar").on('selectDate', function() {
// code here
});
File Information
File Size | 377 KB |
Last Update | 3 Days ago |
Published Date | 7 Months ago |
License | MIT |