Tiva Events Calendar

Show full information of events on calendar.

Contact us Our other products

Full Layout
Compact Layout


It is so easy to install Tiva Events Calendar. Just include some css and js files to your website. If your website has already bootstrap, font-awesome and jquery, don't need include them.

<!-- Include css files -->
<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 js files -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/calendar.js"></script>


To display Tiva Events Calendar in page, just add div element with structure :

<div class="tiva-events-calendar full" data-view="calendar"></div>

In which :

  • class="full": layout of calendar. There are 2 options : full and compact.
  • data-view="calendar": initial view of calendar. There are 2 options : calendar and list. Default value : calendar.

Other option params :

  • data-start="sunday": start date of week on calendar. There are 2 options : sunday and monday. Default value : sunday.
  • data-switch="show": show or hide switch Calendar/List button. There are 2 options : show and hide. Default value : show.