Animated Event Calendar In jQuery - Simple Calendar

Animated Event Calendar In jQuery - Simple Calendar

A simple, lightweight, dynamic, animated event calendar plugin where you can view the details of the event in a popup by clicking a date slot.

1. Insert the simple calendar plugin's files into the webpage which has jQuery library included.

<link rel="stylesheet" href="simple-calendar.css">
<script src="" 
<script src="jquery.simple-calendar.js"></script>

2. Initialize the plugin to generate a default inline calendar on the webpage.

<div id="container"></div>

3. Add your own events to the calendar.

  // event dates
  events: ['2019-03-04', '2019-03-05', '2019-03-06', '2019-03-07'],
  // event info to show
  eventsInfo: ['Event 1', 'Event 2','Event 3', 'Event 4']

4. Specify the min/max dates.

  minDate: "YYYY-MM-DD"
  maxDate: "YYYY-MM-DD",

5. Localize the month/week names.

  months: ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december']
  days: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],

6. Callback functions.

  selectCallback: function (selDate) { }, 
  insertCallback: function () { }

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

  • Publication date: 28.03.2019
  • Source