Hubeleke jQuery Events Calendar via Ajax Buy now (Only $7)

Hubeleke Events Calendar is a flexible plugin that allows you to connect to your database and show up your event days on a calendar view. You can easily list your events on wherever you want on your page via just one click.

This plugin is NOT a calendar organizer with an administration panel. It helps you to retrieve your event dates and lists from your database via Ajax and displays them on your web site month by month.

Installing Files

Installing the hubeleke events calendar is so easy. Just add these following codes inside <head> of your web page.

<link href="css/jquery.event.calendar.css" rel="stylesheet" />
<script src="js/jquery.event.calendar.js"></script>
<script src="js/languages/jquery.event.calendar.en.js"></script>


You need to load all these files to install the plugin properly. Also hubeleke events calendar requires jQuery 1.7 or later to work.

Color Themes

If you want to use a color theme you need to call the theme css file too. For example; for green color theme, adding the following code after the plugin's base css file (jquery.event.calendar.css) is enough.

<link href="css/themes/green.event.calendar.css" rel="stylesheet" id="theme" />

Language Support

If you want to add an another language to your calendar plugin, just enter the languages folder inside the js folder. The default language js file is jquery.event.calendar.en.js. The Turkish and German language files are also ready to be used inside the plugin.

Duplicate a language js file, rename it to your new language name and open it. Translate the months and days arrays inside the file and save. Then your new language js file will be ready to be used. You'll just need to include this file instead of the default language js file.


For the HTML markup, you just need a div element with an id. It will be the wrapper of your calendar.

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

How to Initialize

The basic initialization:

<script type="text/javascript">


You can use these options to customize plugin properties:

<script type="text/javascript">
	    ajaxDayLoader	: "ajax/hb-days.php",
	    ajaxEventLoader	: "ajax/hb-events.php",
	    eventsContainer	: "#hb-event-list",
	    currentMonth	: 10,
	    currentYear		: 2014,
	    startMonth		: 1,
	    startYear		: 2014,
	    endMonth		: 12,
	    endYear		: 2015,
	    firstDayOfWeek	: 1,
	    onBeforeLoad	: function() {},
	    onAfterLoad		: function() {},
	    onClickMonth	: function() {},
	    onClickDay		: function() {}

Configuring Options

Option Default Value Data Type Description
ajaxDayLoader "ajax/hb-days.php" String

File that is used for sql queries which select the event days of the current month from the database. Default platform is PHP, but you can use an another platform if you want.

After you select the days, you need to print the number of days comma separated. For example:

echo "2,6,15,21";
ajaxEventLoader "ajax/hb-events.php" String

File that is used for sql queries which select the events of the selected day on calendar from the database.

This file runs as a view file. You need to generate HTML views of your events list and print on this file. Plugin will append it to your events container.

eventsContainer "#hb-event-list" String The container that is used to append generated HTML view of the event list from the ajax file.
currentMonth Current Month Number Integer value of the month that shows up first when the calendar is initialized.
currentYear Current Year Number Integer value of the year that shows up first when the calendar is initialized.
startMonth Current Month Number The first month value of the calendar for the first year(startYear).
startYear Current Year Number The first year value of the calendar.
endMonth Next Year's Current Month Number The last month value of the calendar(endYear).
endYear Next Year Number The last year value of the calendar.
firstDayOfWeek 1 Number First day of the week. 0: Sunday, 1: Monday
onBeforeLoad Null Function Function that triggers before the plugin starts initializing.
onAfterLoad Null Function Function that triggers after the plugin finishes initializing.
onClickMonth Null Function When you click on previous or next month button, this function triggeres before the default plugin actions.
onClickDay Null Function When you select a day from calendar, this function triggeres before the default plugin actions.