Animated Calendar With Event Management jQuery Plugin

Gilang Pratama January 21, 2023


Live Preview Download

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) {
          //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) {
          //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'],
    onPrevMonth:function (e) { },
    onNextMonth:function (e) { },

    $(document).ready(function() {
      var dscalendar = $("#dscalendar").calendarGC(options);
      const dsevents = [
            date: new Date(),
            eventName: "Event #1",
            className: "eventItems",
            dateColor: "black"


Next: Ready to put your social media marketing on autopilot?

also view other related posts,