Introduction

Eventer is a PHP and jQuery based interactive events calendar is a highly interactive calendar for presenting your events in a very highly interactive format.

It can be integrated into any existing php page quick and fast as you just have to browse a specific page in the browser, input some values and everything will be setup for you.

It also includes a simple yet powerful admin panel to let you manage all your events.

Features

Salient features of Eventer include:

  • Highly Customizable
  • 2 color options - Light and Dark
  • Unlimited events support
  • Repeat Events (can be turned off)
  • Can be used with any language as the calendar options via admin panel allow you to change week and month names
  • Comes with easy to use admin panel for managing your events data
  • Set various options via admin panel
  • You get full source code include the admin panel
  • Monthly navigation

Installation

Minimum Hosting Requirements:

  • Web Hosting with PHP 4+
  • MySQL 4+ database

Dependencies:

  • jQuery - http://jquery.com/
  • jQuery Easing Plugin Version 1.3+ - http://gsgd.co.uk/sandbox/jquery/easing/
  • Tiny Scrollbar jQuery Plugin - http://www.baijs.nl/tinyscrollbar/

Note: all the above script/plugin files are included in the source files. But it is important to know that you might be using these scripts already in your page (if you going to use the calendar in an existing page of your website)

Setup:

Use the following step by step guide in order to setup Eventer on your website and make your website users feel happy while browsing events with this cool and interactive calendar interface.

Note: as this application is based on php so your file must have .php extension.

  • Copy the eventer folder to the folder where your website/application files are located
  • Open the file in which you want to setup the calendar and in the head section of that file write include_once('eventer/eventer-header.php');
  • Similarly in the body section where you want to show the calendar there write include_once('eventer/eventer-body.php');
  • Upload files to your website using ftp or file manager from your domain's control panel
  • Visit the eventer/admin/install.php url in a web browser where you have upload the files e.g. http://yoursite.com/eventer/admin/install.php
  • Provide the necessary information i.e. database-server, database-name, database-username and database-password
  • Click Install, you will be either shown success or error message
  • If you get success message for previous step then in the next step enter admin username and password
  • Click "Add User" button
  • Now browse to the page in which you had included the 2 files of the eventer and you should be able to see the calendar in your page

Options

You can use the options page in the admin panel to configure a lot of options to setup calendar as per your requirements. Following is complete list of options which you can set via the admin panel:

  • Color Theme: Either choose Light or Dark as per your requirements.
  • Calendar Padding: You can set a positive value for this option which sets margins on the left and right side of the date boxes.
  • Calendar Background Width: Choose from "100%" or "Fixed". If you choose "100%" then the main calendar div's width will be set to 100% otherwise it will be set to the calculated width (see FAQs for formular regarding calendar width calculation).
  • Date Box Width: You can set the value of dateboxes width with this option. The width of the calendar is calculated based on the value of this option.
  • Date Box Height: You can set the value of dateboxes width with this option. The height of the calendar is calculated based on the value of this option and also based on number of events in a single day (See question "How to set the width and height of the calendar?" in FAQs tab).
  • Date Box Horizontal Space: Use this option to set the inter spacing among the calendar date cells horizontally.
  • Date Box Vertical Space: Use this option to set the inter spacing among the calendar date cells vertically.
  • Date Box Corner Radius: Use this option to set the roundness of date boxes. Default value is 5.
  • Date Box BG Color: Use this option to set the background color of date boxes. A colorpicker appears when you put the cursor in color option text fields to help you choose a color.
  • Today Date Box BG Color: You can use this option to choose a different color for today's date box background.
  • Empty Date Box Alpha: Use this option to set the transparency of empty date boxes. Valid value can be any positive number from 0 to 100. Default value is 50.
  • Date Foramt: Either choose USA date format i.e. mm-dd-yyyy or UK date format i.e. dd-mm-yyyy. Default value is USA.
  • Starting Week Day: You must have seen calendars in which the starting day is Sunday and you must also have seen calendars in which starting day of the week is Monday. So this option lets you choose the starting day of the week between Sunday and Monday.
  • Week Day Names Format: Use this option to choose either short format or long format for week day names.
  • Week Day Names Short: By default names of week day names in short format are already set via this option but if you planning to use this calendar with any other language other than English and that language also have English like short and long week day name formats then this option will help you set the names in short format.
  • Week Day Names Long: By default names of week day names in long format are also already set via this option but if you planning to use this calendar with any other language other than English and that language also have English like short and long week day name formats then this option will help you set the names in long format.
  • Month Names Format: Use this option to choose either short format or long format for month names.
  • Month Names Short: By default names of month names in short format are already set via this option but if you planning to use this calendar with any other language other than English and that language also have English like short and long month name formats then this option will help you set the names in short format.
  • Month Names Long: By default names of month names in long format are also already set via this option but if you planning to use this calendar with any other language other than English and that language also have English like short and long month name formats then this option will help you set the names in long format.
  • Show Months Navigation: If for any reason you don't want to show the months navigation at the top of the calendar (e.g. you might want to show events of current month) then you can turn it off using this option by choosing "No" from the dropdown menu. Default value is "Yes".
  • Repeat Events: Use this option to show multi-day events on each date box. Possible choices are "Yes" and "No". If you choose "No" then a multi-day event will appear only on a single date box on which the first day of the event starts.
  • How to set the width and height of the calendar?

    Calendar Width Calculation:

    To set the width of the calendar you have to set the value of "Date Box Width" and "Date Box Horizontal Space" options in the admin panel because the total width of the calendar is calculated based on the value of these options + calendar paddings (which you set via the Eventer admin panel). Following is the formula for calculating the total width of the calendar:

    (Date-Box-Width + Date-Box-Horizontal-Space) * 7 - Date-Box-Horizontal-Space + (Calendar-Padding * 2)

    For example if you set the width of Date-Box-Width as 136 and also set the value of Date-Box-Horizontal-Space as 1 then you will get total width of the calendar interface as:

    (136 + 1) * 7 - 1 = 958

    Calendar Height Calculation:

    Though you can set the height of date cells of the calendar via "Date Box Height" option but the actual height of a date cell depends on number of events in that date cell. If there are many events occurring on the same day then it may be required to increase the height of the corresponding row in order to show titles of all events to users.

  • Does Eventer support multi-day/repeat events?

    Yes you can repeat events by setting the "Repeat Events" option to yes in the options page of Eventer's admin panel.

  • Can I use more than one eventer calendar in a single page?

    The only way to use mulitple instances of eventer calendar in a single page is to use iframes.

I provide support for all of my products for following:

  • Bug fixes
  • Paid customization

In order to provide quick and speedy support, you are advised either to post a comment on the relevant product page or contact me via contact form at my profile page on envato marketplaces so that I can verify your purchase of my product for which you need help and I will be back to you asap.

Note: Beside selling products at envato marketplaces, I also provide following services:

  • Custom website design and development
  • Wordpress themes and plugins development
  • Mobile optimized websites
  • Facebook Applications
  • Flash websites and applications

I love working on exciting and challenging projects so if you have a project or idea then you can reach me at sher.ali@lucidstudios.net. You are also recommended to follow me on twitter at http://twitter.com/lucidstudios1 for new product releases and updates on existing products or like my facebook page at http://www.facebook.com/lucidstudios.net.