Animated Calendar With Event Management jQuery Plugin
Gilang Pratama January 21, 2023
GC Calendar is a lightweight jQuery plugin that will easily help you in creating an animated and attractive calendar of your events by month. It is fully responsive and uses CSS3 animations to provide a smooth slide transition when switching between months.
GC Calendar Implementation
Include required tooltip plugin CSS & javascript source files on the page
...
Add a div
container with id
attribute to display your calendar
Initialize the plugin to generate a basic calendar on the page
$(document).ready(function() { var calendar = $("#dscalendar").calendarGC(); });
GC Calendar Plugin options
& Events
var options = { events: [ { date: new Date("2023-04-10"), eventName: "Girl Friend Birthday", className: "badge bg-success",//bootstrap class or use own class onclick(e, data) { //console.log(data); //AJAX call ... etc }, dateColor: "blue" }, { date: new Date("2023-02-07"), eventName: "Project Discussion", className: "tag is-info is-light", //bulma class onclick(e, data) { //console.log(data); //AJAX call ... etc }, dateColor: "pink" }, // ... more events ], dayBegin: 0,// default: 1 dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], monthNames: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'], nextIcon:'>', prevIcon:'<', onPrevMonth:function (e) { }, onNextMonth:function (e) { }, }; //Implementation $(document).ready(function() { var dscalendar = $("#dscalendar").calendarGC(options); const dsevents = [ { date: new Date(), eventName: "Event #1", className: "eventItems", dateColor: "black" }]; dscalendar.setDate("2023-01-21"); dscalendar.setEvents(dsevents); });