Animated Calendar With Event Management jQuery Plugin

Gilang Pratama January 21, 2023

animated-calendar-with-event-management-jquery-plugin

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);
    });