Install
It is so easy to install Tiva Events Calendar. Just include some language, css and js files to your website. If your website has already bootstrap, font-awesome and jquery, don't need include them.
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/calendar.css">
<link rel="stylesheet" href="assets/css/calendar_full.css">
<link rel="stylesheet" href="assets/css/calendar_compact.css">
<script src="config/config.js">
<script src="assets/languages/en.js">
<script src="assets/js/jquery.min.js">
<script src="assets/js/calendar.js">
The default language file is en.js. If you want to change calendar to another language, please duplicate the en.js file, rename it to your language (for example: fr.js). Then translate content in file and include this language file.
Usage
To display Tiva Events Calendar in page, just add div element with structure :
<div class="tiva-events-calendar full" data-source="json"></div>
In which :
- class="full": layout of calendar. There are 2 options : full and compact.
- data-source="json": source of events. There are 2 options : json (feed events from json file) and php (feed events from php file). Default value : json.
- Feed events from json file : You can modify event list at file events/events.json. The images of events is stored in folder events/images.
- Feed events from php file : To be flexible to integrate with your website, this plugin let you feed events from your database via ajax. Please open file events/events.php, modify code to connect to your database and get events data, then adapt it with event variable in file (The example is already in this file).
Other option params :
- data-start="sunday": start date of week on calendar. There are 2 options : sunday and monday. Default value : sunday.
- data-view="calendar": initial view of calendar. There are 2 options : calendar and list. Default value : calendar.
- data-switch="show": show or hide switch Calendar/List button. There are 2 options : show and hide. Default value : show.