Back to Top

How to add ColorDots in FullCalender?

Colordots in full calendar

Here I am going to explain how to add color dots to highlight event in Full Calendar. Few months ago, I have used Full Calendar for scheduling daily events.

Full Calendar is a jQuery plugin for an open source and customizable javascript event calendar.

I have modified the jQuery code of Full Calendar plugin to add color dots which will highlight the event.

Let’s understand step by step and understand code:

First all, I have added the following code to use Full Calendar.

It’s a script to display a full calendar. Here I have used callback viewDisplay which is triggered when a calendar rendered.So At the time of render, I have called one function callBackBeforeShowMonth.

Next is the callBackBeforeShowMonth function.Let’s understand the function.

In above code, I have passed parameters startDate and endDate and called ajax function and in that passed date as JSON. Above ajax code will check events in a database and add color dots into the date.

Now, I am going to explain PHP code used to fetch event from the database. Here I have written code in WordPress but you can write in core PHP or using any other framework.

That’s it. You can see color dots in frontend in your scheduler.

Must Read:

To Call Remote URL in $.ajax method in jQuery
How to use Ajax in WordPress with example

Hope this article helps someone.As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Comments (3)

  1. Hi, can you provide full source code for this color dot fullcalender. Thanks.

  2. joao signorelli says:

    Where is the calcUpdate function?

    1. hey, updated code, you can check now.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to install zend framework on wamp

Posted on 6 years ago


How to Parse WordPress RSS Feed?

Posted on 5 years ago


Synchronous Up & down Slider with jQuery

Posted on 6 years ago


HTML5 Geolocation API with Example

Posted on 1 year ago