Animated Calendar Plugin With Event Management - GC-Calendar

File Size: 15.2 KB
Views Total: 4605
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Animated Calendar Plugin With Event Management - GC-Calendar

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.

How to use it:

1. Insert the stylesheet calendar-gc.min.css and JavaScript calendar-gc.min.js into the document.

<!-- jQuery Is Reqired -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- GC-Calendar Plugin Files -->
<link rel="stylesheet" href="./dist/calendar-gc.min.css" />
<script src="./dist/calendar-gc.min.js"></script>

2. Create a container to hold your calendar.

<div id="calendar"></div>

3. Initialize the plugin to generate a basic calendar on the page.

var calendar = $("#calendar").calendarGC({
    // options here
});

4. Add events to the calendar.

var calendar = $("#calendar").calendarGC({
    events: [
      {
        date: new Date("2022-02-07"),
        eventName: "Holiday",
        className: "my-class",
        onclick(e, data) {
          console.log(data);
        },
        dateColor: "red"
      },
      {
        date: new Date("2022-02-07"),
        eventName: "Holiday with wife",
        className: "my-class",
        onclick(e, data) {
          console.log(data);
        },
        dateColor: "red"
      },
      // ... more events
    ],
    onclickDate: function (e, data) {
      console.log(e, data);
    }
});

5. Determine which day is the beginning of the week. 0 is Sunday, 1 is Monday, ...

var calendar = $("#calendar").calendarGC({
    dayBegin: 0, // default: 1
});

6. Localize day and month names.

var calendar = $("#calendar").calendarGC({
    dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
});

7. Customize the prev & next buttons.

var calendar = $("#calendar").calendarGC({
    nextIcon: '&gt;',
    prevIcon: '&lt;',
});

8. Trigger functions as you click the prev & next buttons.

var calendar = $("#calendar").calendarGC({
    onPrevMonth: function (e) { },
    onNextMonth: function (e) { },
});

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