Facebook Events Calendar

Show full information of your facebook events on calendar.

Contact us Our other products
Full Layout
Compact Layout

Install

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>

Usage

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.