Facebook Events Calendar

Show full information of your facebook events on calendar.

Contact us Our other products
Full Layout
Compact Layout


It is so easy to install Facebook Events Calendar:

  • Firstly, setup the database (MySQL), then go to admin to get the Facebook Access Token and the Facebook Page which you want to display events.
  • On frontend, include some CSS and JS files. 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 Language file -->
<script src="assets/languages/lang.js"></script>

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


To display events calendar in page, just add div element with structure :

<div class="facebook-events-calendar full" data-view="calendar" data-switch="show"></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.
  • data-start="monday": Start date 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.
  • data-list="upcoming": Time filter for events which are shown on list view. There are 3 options: all, upcoming and past. Default value : all.
  • data-title="show": show or hide title on list view. There are 2 options: show and hide. Default value : show.
  • data-events="5": Number events which are shown on list view. Default value : 1000.
  • data-time="12": Time format. There are 2 options: 12 and 24. Default value : 12.
  • data-date="l, d F Y": Date format. Refer the format characters here. Default value : l, d F Y.