Tiva Events Calendar

Show full information of events on calendar.

Contact us Our other products


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.

<!-- Include events calendar css file -->
<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"></script>

<!-- Include events calendar language file -->
<script src="assets/languages/en.js"></script>

<!-- Include events calendar js file -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/calendar.js"></script>

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.


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.
Full Layout
Compact Layout