Flexible Event Calendar In jQuery - evo-calendar

Flexible Event Calendar In jQuery - evo-calendar
File Size: 10.8 KB
Views Total:
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.

See It In Action:

How to use it:

1. Import the jQuery evo-calendar plugin's JavaScript and CSS files into the HTML document.

<link rel="stylesheet" href="evo-calendar.css" />
<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 = [
  { name: "New Year", date: "Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)", type: "holiday", everyYear: true },
  { name: "Valentine's Day", date: "Fri Feb 14 2020 00:00:00 GMT-0800 (Pacific Standard Time)", type: "holiday", everyYear: true },
  { name: "Birthday", date: "February/3/2020", type: "birthday" },
  { name: "Author's Birthday", date: "February/15/2020", type: "birthday", everyYear: true },
  { name: "Holiday", date: "February/15/2020", type: "event" },
],

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({
  format: 'mm/dd/yyyy',
  titleFormat: 'MM yyyy',
  eventHeaderFormat: 'MM d, yyyy'
});
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"]
  }
}

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,
  eventListToggler: true
});

9. Execute a function after a date is selected.

$('#evoCalendar').evoCalendar({
  onSelectDate: function() {
    // console.log('onSelectDate!')
  }
});

10. Add a new event to the calendar.

$("#evoCalendar").evoCalendar('addCalendarEvent', [
  {
   name: "NEW EVENT",
   date: "February/16/2020",
   type: "birthday",
   everyYear: true
  }
]);

This awesome jQuery plugin is developed by edlynvillegas. For more Advanced Usages, please check the demo page or visit the official website.