Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. PHP
Code

How to Create a Simple Event Calendar for Your PHP Website

by
Difficulty:BeginnerLength:MediumLanguages:

In this post, we’re going to review Events Calendar from CodeCanyon. This script allows you to add calendars to your PHP website. It’s a ready-to-use tool which you can integrate in your existing PHP website and start using today!

If you’re building a website which is related to events or would like to present your site events in an interactive and interesting way, then you've come to the right place! 

There are plenty of premium calendar extensions and scripts available for your PHP website. For each of these premium scripts and extensions, you can expect quality code, bug fixes, support, and new enhancements.

In this post, we’re going to discuss the Events Calendar tool, available at CodeCanyon for purchase at a very reasonable price. It allows you to create calendars from an admin page and add events to each calendar. Each calendar is capable of displaying an unlimited number of events.

So if you’re looking for a script which can provide you both calendars and events, the Events Calendar tool is a perfect solution for you.

Let’s quickly go through the important features it provides:

  • unlimited number of calendars
  • unlimited number of events with each calendar
  • single and multiple day events
  • media support for events
  • import photos from Flickr
  • multi-language support
  • calendar customization options
  • and more

As you can see, the Events Calendar tool provides a lot of useful features that allow you to set up event calendars quickly. Throughout the course of this tutorial, we’ll explore the different features provided by this plugin. To start with, we’ll see how to download and install the Events Calendar script from the CodeCanyon marketplace.

Installation and Configuration

In this section, I'll show you how to install and configure the Events Calendar tool once you’ve purchased and downloaded it from CodeCanyon.

As soon as you purchase it, you’ll be able to download the zip file. Extract this, and you will find a directory with the main script code: events. It provides two different versions of event calendars you could choose from.

Classic Embeddable Events Calendar

In this version, you can embed a calendar in a PHP page of your website within a div or an iframe.

New SEO-Compliant Events Calendar

This is a new version of the calendar with social buttons and meta tags for every event page to improve indexing of the page. In this version, the calendar is not fully embeddable; you can only embed it within an iframe.

In this post, we’ll discuss the classic embeddable version. Of course, there’s nothing stopping you if you would like to use the new SEO-compliant version. If you have any queries while setting up the SEO-compliant version, feel free to ask me in the comments below.

In our case, as we’ve selected the classic embeddable version, it’s the events/embeddable directory which we’re going to use. Copy this directory to your PHP application. For example, if your project is configured at /web/demo-app/public_html, you should copy the embeddable directory to /web/demo-app/public_html/embeddable.

Next, you need to import the necessary database tables. You can find the database SQL file in the events_DB directory which you need to import in your database: events.sql. Import this script to your database, for example with phpMyAdmin, and you're done with the database setup!

Finally, you need to update the embeddable/admin/include/db_conn.php file to reflect your database connection settings. Update the following snippet as per your connection settings.

Configure Global Settings

Now that we're done with the Events Calendar setup, you should be able to access the admin control panel at http://your-site-domain/embeddable/admin with the demo credentials.

Once you’re logged in to the admin back-end, access the Settings > General Settings link in the main navigation menu. Let’s go through a couple of important settings in this section.

Absolute Path of Events Calendar Installation

This is the path where you’ve set up your event calendar application. As we’ve placed the event calendar application in the embeddable directory, it should be http://your-site-domain/embeddable.

Timezone

It allows you to set the time zone for your event calendar.

Choose Calendar Date Format

If you would like to switch between US, UK and EU date formats, you can set it here.

Choose Calendar Time Format

This allows you to switch between 12-hour and 24-hour time formats.

Default View

This setting allows you to select the default format of events in the front-end. There are two views to choose from: calendar view and list view.

And with that, we’ve done with the necessary setup to create calendars and events. In the next couple of sections, we’ll see how to create calendars and add events to it.

How to Create a Calendar

In this section, we’ll see how to create a calendar from the back-end. Go ahead and access the Calendars link in the top navigation. By default, this tab lists all the calendars available.

Calendar Listing

At the top of the listing, you can see the Create a new calendar section, which allows you to create a new calendar right away. You just need to enter the calendar name to create a new calendar.

Go ahead and create a new calendar. I’ve created the Seminars calendar, as you can see in the above screenshot. Once you create a calendar, you’ll be able to see it in the calendars listing.

Once you’ve created the calendar, you are now ready to add events to the calendar. In the next section, we’ll see how to add events to the calendar we’ve created in this section.

How to Add Events

In the previous section, we created the calendar which we’ll use to display events. In this section, we’ll see how to add events to the calendar.

On the calendar listing page, you can see the Manage Events link for each calendar you’ve created, as shown in the following screenshot.

Manage Events Link

Click on that link and it’ll take you to the events listing page.

Manage Events

On this page, you can manage your existing events and add new events. To add a new event, click on the Add link, and you'll be taken to a form for adding a new event.

Add Event

As you can see, the event form contains a lot of fields that you can fill in. Most of the fields are self-explanatory. Go ahead and fill in all the necessary fields for your event and save it. You’ll be redirected back to the events listing page.

Of course, you can add as many events you want. And if you want to categorize your events, you could create multiple calendars.

So with that, we’re done with creating a calendar and adding events to it. In the next section, I'll show you how to integrate the calendar which we’ve created in a PHP web page.

How to Embed the Calendar in Your PHP Site

There are different ways to embed the calendar in your PHP web page. The embeddable/index.php file contains comments that explain how to embed the calendar into your PHP web page without an iframe. I'll show you how to embed the calendar with an iframe.

It's easy—you just need to create an iframe element and point its src attribute to the http://your-site-domain/embeddable URL. The Event Calendar script will do the rest. 

It’ll load the default calendar:

That should load a calendar which should look like this:

Front-End Calendar View

When you click on any date with events, you’ll be taken to an events listing page.

Front-End Events Listing

Finally, if you click on the Read More link on any event, you’ll be taken to the event detail page.

Front-End Event Detail Page

So as you can see, Event Calendar provides a complete solution to creating, managing, and displaying calendars of events. With this script, you can create a number of different calendars and present your events with a nice front-end interface.

Feel free to try other options available in the script, and don’t hesitate to ask in the comments if you have any queries.

The Next Step: A Quick Look at a Couple of Other Events Calendar Scripts

If you're looking for more advanced calendar scripts that you could use right away, I recommend that you check out the following post, which summarizes some excellent scripts that are available for a low cost.

Here are a couple of interesting ones:

Cleanto

Cleanto is ideal for many different types of service companies looking for a reliable way to provide clients with full-featured online booking.

Cleanto

Ajax Calendar 2

Ajax Calendar 2 is a highly customisable personal calendar designed to help you keep organised. This is a best-selling update of another popular script, the Ajax Full Featured Calendar.

Ajax Calendar 2

Tiva Timetable

Fully responsive, easy to set up, and very customizable, the Tiva Timetable is a good choice for those who are looking for a calendar with a clean and simple modern design.

Tiva Timetable

Conclusion

Today, we reviewed the Events Calendar script available from CodeCanyon. It allows you to create events and calendars on your PHP website. In this post, we discussed how to download, install and embed this script in your PHP web page. Considering the features it provides, I believe it’s reasonably priced and it’s worth giving a try.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.