AkiCalendar manage calendars and events on your website

AkiCalendar is a jQuery plugin that helps you to display as much calendars as you want! Its parameters make it very flexible for your project. You can also display event loaded by AJAX (example given with PHP code).

Caution: this plugin displays events but the administration part is not given. The calendar only asks for events to your server and displays it.

Browser compatibility

IE 8+

Edge

Firefox

Chrome

Safari

Opera

Code example

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

<script type="text/javascript">
	$(document).ready(function() {
		$("#calendar").akiCalendar({
			canChangeMonth	: true,
			displayExtraDays	: false,
			displayMonth	: new Date(2015, 1, 1), // February 2015
			flatDesign		: "peterriver",
			language		: "en", // en, fr, de, es, it, ru
			onCalendarLoaded	: function(month, parameters) {},
			onBeforeLoadEvents	: function() {},
			onAfterLoadEvents	: function() {},
			onClickMonth	: function(date, parameters) {},
			onClickYear		: function(date, parameters) {},
			onClickDay		: function(date, parameters) {},
			startOnSunday 	: false, // Will start on monday
			urlEvents		: "path/to/file/events.php",
			divEventsContainer	: "#my-great-div"
		});
	});
</script>

Major points

Well documented

Display your events

Multiple designs

Easily configurable

Responsive design

Lot of examples

Examples

Installation how to work with AkiCalendar

Archive structure
  • AkiCalendar.zip - the compressed file that you get by purchasing this project
    • CSS
      • aki-cal.css - The CSS file to include in your website
    • JS
      • jquery.aki-cal.js - The JS file to include in your website
      • jquery.min.js - Jquery library, required to work with AkiCalendar
    • Examples - All examples you can see on this website (once the plugin loaded to your webpages, go to this folder and watch the code)
    • Website - the website you are looking at
      • assets
      • index.html

To get AkiCalendar to work on you page, you need to do the following:

  • Add CSS and JS files of the project to your pages: aki-cal.css and jquery.aki-cal.js
  • See documentation page and try to copy/paste an example

The HTML code to include AkiCalendar project to your pages (don't forget to give your correct paths):

HTML code
<head>
	<!-- Your other stuff here -->

	<!-- The project CSS -->
	<link rel="stylesheet" type="text/css" href="path/to/your/css/aki-cal.css">

	<!-- The dependencies -->
	<script src="path/to/your/js/jquery.min.js"></script>

	<!-- The project JS -->
	<script src="path/to/your/js/jquery.aki-cal.js"></script>

	<!-- Your other stuff here -->
</head>

Frequently Asked Questions

If you want to add / update or remove events with an administration panel, unfortunately you will have to design it by yourself because AkiCalendar only provide the Javascript / CSS part of the calendar. You can display events that are loaded by AJAX but you must provide a PHP script that returns it (there is an example on how to do it).
You are free to modify AkiCalendar if you want to add something. The first goal of this plugin is to help you to add calendar easily without having to worry about the code. One advice, always keep a backup of AkiCalendar if your modifications make the plugin instable.
You can use jQuery version 1 or 2 (both are compatible). In the archive and in these examples given above, jQuery version 1.11.3 is used. You have to know that if you want to be compatible with old browsers it's preferable to use version 1, else you can use version 2.
Events must be given by your web server to AkiCalendar in order to be able to display it. An example is provided in PHP (with SQL code to create yout database), and use PDO to connect to the database. If you prefer using another programming language, feel free to do it. The only restriction is that you have to return a JSON containing all the events of the requested month.