Facebook Events Calendar

Show full information of your facebook events on calendar.

Contact us Our other products

Install

It is so easy to install Facebook 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 events calendar language file -->
<script src="assets/languages/lang.js"></script>

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

Usage

Firstly, enter your facebook page id in file config.php. It may be id number (for example: 82945776796) or name alias (for example: CelebrityTheatre)

const FB_PAGE_ID = '82945776796'

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