Flexible Event Calendar In jQuery - evo-calendar
File Size: | 375 KB |
---|---|
Views Total: | 59035 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

evo-calendar is a flexible event calendar plugin to display events in a responsive, modern-looking calendar interface.
Features:
- Allows you to switch between months from the collapsible sidebar.
- Shows events on the right panel.
- Adds new events.
- Multiple languages.
- Custom date format.
- Highlights today's date in the calendar.
- Allows to display multiple events on the same day.
- 4 addtional themes.
See It In Action:
How to use it:
1. Import the jQuery evo-calendar plugin's JavaScript and CSS files into the HTML document.
<!-- Core Stylesheet --> <link rel="stylesheet" href="evo-calendar.css" /> <!-- Optional Themes --> <link rel="stylesheet" href="evo-calendar.midnight-blue.css" /> <link rel="stylesheet" href="evo-calendar.orange-coral.css" /> <link rel="stylesheet" href="evo-calendar.royal-navy.css" /> <!-- JavaScript --> <script src="jquery.min.js"></script> <script src="evo-calendar.js"></script>
2. Create a container to hold the event calendar.
<div id="evoCalendar"></div>
3. Create events in an array of objects containing dates, event names and event types (event, holiday, birthday).
myEvents = [ { id: "required-id-1", name: "New Year", date: "Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)", type: "holiday", everyYear: true }, { id: "required-id-2", name: "Valentine's Day", date: "Fri Feb 14 2020 00:00:00 GMT-0800 (Pacific Standard Time)", type: "holiday", everyYear: true, color: "#222" }, { id: "required-id-3", name: "Custom Date", badge: "08/03 - 08/05", date: ["August/03/2020", "August/05/2020"], description: "Description here" type: "event", }, // more events here ],
4. Call the function to generate an event calendar on the page.
$('#evoCalendar').evoCalendar({ calendarEvents: myEvents });
5. Customize the date format.
$('#evoCalendar').evoCalendar({ format: 'mm/dd/yyyy', titleFormat: 'MM yyyy', eventHeaderFormat: 'MM d, yyyy' });
6. Localize the event calendar. Defaults to 'en'.
$('#evoCalendar').evoCalendar({ language: 'en' });
dates: { en: { days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], noEventForToday: "No event for today.. so take a rest! :)", noEventForThisDay: "No event for this day.. so take a rest! :)" }, es: { days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"], daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"], daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"], months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"], monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"], noEventForToday: "No hay evento para hoy.. ¡así que descanse! :)", noEventForThisDay: "Ningún evento para este día.. ¡así que descanse! :)" }, de: { days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"], daysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"], daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"], months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"], noEventForToday: "Keine Veranstaltung für heute.. also ruhen Sie sich aus! :)", noEventForThisDay: "Keine Veranstaltung für diesen Tag.. also ruhen Sie sich aus! :)" }, pt: { days: ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"], daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"], daysMin: ["Do", "2a", "3a", "4a", "5a", "6a", "Sa"], months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"], monthsShort: ["Jan", "Feb", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"], noEventForToday: "Nenhum evento para hoje.. então descanse! :)", noEventForThisDay: "Nenhum evento para este dia.. então descanse! :)" } }
7. Determine whether to highlight today's date. Defaults to false.
$('#evoCalendar').evoCalendar({ todayHighlight: false });
8. Enable/disable the sidebar & event panel toggler. Defaults to true.
$('#evoCalendar').evoCalendar({ sidebarToggler: true, sidebarDisplayDefault: true, eventListToggler: true, eventDisplayDefault: true, });
9. Determine the first day of the week. Defaults to 0 (Sunday).
$('#evoCalendar').evoCalendar({ firstDayOfWeek: 1 // Monday });
10. Determine an array of dates to be disabled. Defaults to 'null'.
$('#evoCalendar').evoCalendar({ disabledDate: ["02/17/2020", "02/21/2020"] });
11. Execute a function after a date is selected.
$('#evoCalendar').evoCalendar({ onSelectDate: function() { // console.log('onSelectDate!') } });
12. Add a new event to the calendar.
$("#evoCalendar").evoCalendar('addCalendarEvent', [ { name: "NEW EVENT", date: "February/16/2020", type: "birthday", everyYear: true } ]);
13. Determine the theme of the calendar.
- Midnight Blue
- Royal Navy
- Orange Coral
$('#evoCalendar').evoCalendar({ theme: 'Orange Coral' });
14. API Methods.
// set theme $("#evoCalendar").evoCalendar('setTheme', themeName); // toggle sidebar $("#evoCalendar").evoCalendar('toggleSidebar', true/false); // toggle event list $("#evoCalendar").evoCalendar('toggleEventList', true/false); // get the selected date $("#evoCalendar").evoCalendar('getActiveDate'); // get active events $("#evoCalendar").evoCalendar('getActiveEvents'); // select a year $("#evoCalendar").evoCalendar('selectYear', yearNumber); // select a month $("#evoCalendar").evoCalendar('selectMonth', monthNumber); // select a date $("#evoCalendar").evoCalendar('selectDate', dateNumber); // add events $("#evoCalendar").evoCalendar('addCalendarEvent', [{ id: 'Event ID', name: "Event Name", date: "Date Here", type: "Event Type", everyYear: true }]); // remove events by ID $("#evoCalendar").evoCalendar('removeCalendarEvent', eventID); // destroy the calendar $("#evoCalendar").evoCalendar('destroy');
15. Event handlers.
$('#evoCalendar').evoCalendar({ // options here }) .on('selectDate', function(newDate, oldDate) { // do something }) .on('selectMonth', function(activeMonth, monthIndex) { // do something }) .on('selectYear', function(activeYear) { // do something }) .on('selectEvent', function(activeEvent) { // do something }) .on('destroy', function(calendar) { // do something })
Changelog:
2020-10-02
- Optimized code, fix mobile behavior
2020-09-23
- Added selectYear event
2020-09-01
- [UPDATE] Dutch language
2020-08-27
- Fix: Merge conflict
2020-08-05
- Added event's description
- Added event color customization
- Added event badge
- Added 'selectMonth' event
2020-07-30
- Minor CSS update
- Updated Theme CSS
2020-06-25
- Allows to add date range, e.g. [start_date, end_date]
2020-06-24
- Localizing strings for not event on this day and on today
2020-06-23
- JS Updated
- Add Portuguese Translation
2020-04-30
- Adjust firstDayOfWeek setting (from string to number).
2020-04-27
- Optimized & Fixed
v1.0 (2020-04-25)
- Added themes, methods, and events.
2020-04-06
- Fix new settings
2020-03-24
- Added 'firstDayOfWeek' option.
This awesome jQuery plugin is developed by edlynvillegas. For more Advanced Usages, please check the demo page or visit the official website.