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

JQuery Animation effects

Posted on 5 years ago

Bhumi

What is Press This in WordPress

Posted on 6 years ago

Bhumi

How to use Micro Data in HTML5

Posted on 2 years ago

Bhumi

MySQL REGEXP Operator

Posted on 1 year ago

Bhumi