“Facebook Events Calendar” Documentation by “TivaTheme” v1.0

---

Facebook Events Calendar

---

Table of Contents

1. Overview
2. System Requirements
3. Installation
4. Usage

---

A) Overview - top

Now, there are more and more people who use Facebook for their business. One of information they want to display is Facebook Event.

Facebook Events Calendar is script which help you to display all Facebook events on calendar. It is very flexible and easy to install and integrate into your website.

With nice popup, user can quick-view event for each day, view event list and event detail. Your Facebook events will be displayed lively and logically. There are 2 layout for your choice : full layout and compact layout.

You can put events calendar everywhere in your website via just simple configuration. You can also change language for calendar via js language file.

Why choose Facebook Events Calendar ?

• Display your Facebook events friendly.
• View events via calendar or list style.
• Quick view event's info with tooltip.
• User friendly interface.
• Full layout or Compact layout.
• Very easy to install and integrate.
• ...

---

B) System Requirements - top

• Your website must have SSL certificate (https).
• You must have admin permission with Facebook page from which you want to display events.
• Your Facebook page and events must be public.

This product is compatible with :

• PHP : > 5.2.0

Compatible Browsers :

• IE10, IE11
• Firefox
• Safari
• Opera
• Chrome
• Edge

---

C) Installation - top

Step 1: Firstly, you need create Facebook application on https://developers.facebook.com. You can refer how to do it here: https://developers.facebook.com/docs/apps/register/. Your Facebook application must be on status In Development. Remember the ID and Secret of application.

Step 2: Upload script package (facebook-events-calendar.zip) to your host, then extract it.

Step 3: Create new MySQL database, then import file : config/database.sql.

Step 4: Open file config/database.php, then edit the config info to connect to the database which you have created (host, database, username, password).

Step 5: Go to the admin site:

• Url: http://yourdomain/facebook-events-calendar/admin
• User: admin
• Pass: admin

On Facebook Connection configuration, enter the ID and Secret of your Facebook Application (Step 1), then click Save button to save the info of your app. Then copy the link on the browser (see below image). Note: Your website must run on https (SSL certificate).

Step 6: Go to your Facebook Application again, then create new Product with type Facebook Login.

Step 7: On the settings of product, enter the link which you have copied from Step 5 on the Valid OAuth Redirect URIs.

Step 8: Go to the Facebook Application on admin again, then click Login with Facebook button. Then give the permission for application to access the info of your pages.

If the process is successful, you will see your Avatar, User ID, Access Token and all the Facebook pages which you manage. Select the Facebook page from which you want to display events. Then click Save button.

---

D) Usage - top

On your frontend HTML file, include some CSS and JS files. If your website has already bootstrap, font-awesome and jquery, don't need include them.

To display events calendar in page, just use shortcode HTML with structure:

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 : 24.
• data-date="l, d F Y": Date format. Refer the format characters here. Default value : l, d F Y.

---

Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to the product on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

TivaTheme

Go To Table of Contents

---