“Tiva Events Calendar” Documentation by “TivaTheme” v1.5
Tiva Events Calendar
Created: 04/04/2016
Updated: 10/06/2016
By: TivaTheme
Email: tivatheme@cloodo.com
Thank you for purchasing my product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
A) Overview - top
Tiva Events Calendar is plugin which help you to display all events on calendar. It is very flexible and easy to install and integrate into your website. You can create events in json file or feed from your database via Ajax
With nice popup, user can quick-view event for each day, view event list and event detail. Your events will be displayed lively and logically. There are 2 layout for your choice : full layout and compact layout.
You can put events calendar everywhere in your website via just simple configuration. You can also change language for calendar via js language file.
Why choose Tiva Events Calendar ?
- Display your events lively and logically.
- View events via calendar or list style.
- Quick view event's info with tooltip.
- User friendly interface.
- Full layout or Compact layout.
- Very easy to install and integrate.
- Language support
- ...
B) System Requirements - top
Compatible Browsers :
- IE11
- Firefox
- Safari
- Opera
- Chrome
- Edge
C) Installation - top
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">
<!-- Include config file -->
<script src="config/config.js">
<!-- Include events calendar language file -->
<script src="assets/languages/en.js">
<!-- Include events calendar js file -->
<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.
- You can change the path of events source in config/config.js file.
D) Usage - top
To display Tiva Events Calendar in page, just add div element with structure :
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.
- data-events="5": max number of events displayed in list view. Default value : 1000.
Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to the product on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
TivaTheme