Animated Event Calendar In jQuery - Simple Calendar

Animated Event Calendar In jQuery - Simple Calendar
File Size: 47.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
 </script>
<script src="jquery.simple-calendar.js"></script>

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

<div id="container"></div>
$(function(){
  $("#container").simpleCalendar();
});

3. Add your own events to the calendar.

$("#container").simpleCalendar({

  // 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.

$("#container").simpleCalendar({

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

});

5. Localize the month/week names.

$("#container").simpleCalendar({

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

});

6. Callback functions.

$("#container").simpleCalendar({

  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.