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.
<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">
<script src="assets/languages/lang.js"></script>
<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-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.