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 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.
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" />
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.
The basic initialization:
You can use these options to customize plugin properties:
|Option||Default Value||Data Type||Description|
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:
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.|