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.

Share:
Share on Facebook0

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

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 *

Most Popular Posts

How to develop custom extension in Magento

Posted on 4 years ago

Bhumi

Constructor and Destructor in PHP

Posted on 5 years ago

Bhumi

How to Protect file using .htaccess

Posted on 2 years ago

Bhumi

Blank Screen of WordPress Admin Panel

Posted on 5 years ago

Bhumi

GoTo statement in PHP

Posted on 5 years ago

Bhumi

How to use JavaScript Promise API?

Updated 17 years ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 17 years ago

Bhumi

An Introduction to Gulp JS

Updated 1 month ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi