OpenCrypt - Membership Software
Username:
Password:
Register / My Account / Forgotten Password?
 Home  Features and Benefits  Online Demonstration  Purchase  Our Services  Help and Support  my.OpenCrypt 
 Welcome  New Visitor  Latest NewsRSS Feed Company Information  Press/Testimonials  Frequently Asked Questions  BlogNew Content
AJAX Calendar with PHP and mySQL
Saturday 20th September 2008

A PHP calendar with AJAX 'day status' selection using a mySQL database, simply click on a day to mark it as 'busy'. AJAX Calendar with PHP and mySQL
 
This calendar function enables you to display calendars including month navigation and AJAX day status selection. Multiple calendars can be displayed at once, each with individual owner IDs enabling you to use calendars to display varying schedules/events. When a calendar is loaded by the 'calendar owner' then the AJAX functionality is also loaded enabling the user to simply click on a day to mark it as busy or free, adding/removing the event from the mySQL database.
 
The function could be easily expanded to offer functions to define and display event details. The function can be easily integrated with the OpenCrypt membership software to offer a calendar in a user's profile with the ability for the user to update their own calendar status.
 
Usage

After setting the stylesheets and database variables as per the example file (see 'Configuration' instructions below), simply use the following to display a basic calendar:
 
require "calendar.php";
print calendar();
 
To define a year/month to display:
 
require "calendar.php";
print calendar("2011", "08");
 
To define a calendar ID/owner:
 
require "calendar.php";
print calendar("", "", "ID");
 
To define a calendar ID/owner and indicate the owner is viewing the calendar/load the AJAX day status selection:
 
require "calendar.php";
print calendar("", "", "ID", "", 1);
 
To display a small calendar without month navigation:
 
require "calendar.php";
print calendar("", "", "", 1);
 
The five input flags are used as outlined below:
 
calendar(YEAR, MONTH, CALENDAR ID, SMALL CALENDAR, CALENDAR OWNER);

  • YEAR

    If blank, the calendar will detect the current year, otherwise enter four digit year, e.g. 1999 or 2011

  • MONTH

    If blank, the calendar will detect the current month, otherwise enter two digit month, e.g. 03 or 12

  • CALENDAR ID

    The calendar ID to be used to identify records in the database, if you were using the calendar in a user profile this would be the user's username to identify the calendar belongs to that user.

  • SMALL CALENDAR

    If 1, then a small calendar will be displayed without month navigation links. Otherwise enter 0 or leave blank.

  • CALENDAR OWNER

    If 1, then the AJAX day status selection functions will be loaded, this enables the user to click on days to indicate whether they are 'busy' or 'free'. The 'CALENDAR ID' value must be set so records stored in the database can be identified as associated to this calendar.

 
Configuration

The example.php file contains various CSS/Stylesheets which must be included before loading the calendar function, this is not required but adds additional styles to the output. Feel free to remove the CSS and references within the function. Their are also two files called ajax_queue.js and functions.js, these files must be stored in the same directory as the page which is loading the calendar.
 
If you wish to use the AJAX functionality and store event details then the mySQL settings in the 'calendar.php' file must be updated.
Lines 31 to 34 in calendar.php:
$global['dbhost'] = "localhost";
$global['dbname'] = "";
$global['dbuser'] = "";
$global['dbpass'] = "";
 
Simply update these values to reflect your database host, name, username and password.
 
Then setup the mySQL table, oc_calendar to store the event details using the following SQL which can be run using phpMyAdmin and similar mySQL management tools:
CREATE TABLE `oc_calendar` (
  `id` mediumint(9) NOT NULL auto_increment,
  `start_date` datetime NOT NULL,
  `end_date` datetime NOT NULL,
  `username` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) AUTO_INCREMENT=1 ;
 
License and Download

This code is Open Source and is released under the GNU General Public License.
   
We hope you find this code of use, if you use it in your projects we'd love to hear about it! And of course, if you have any questions please don't hesitate to post a comment and we will respond as soon as possible.
 
Syntax highlighting powered by JUSH

 
Share this article:
Delicious Stumble It!
Stumble It!
 
<- PHP Function for Reciprocal Linkback Checking
 
Membership business models ->
Articles
Subscribe to RSS Feed
OpenCrypt Version 1.9
New Product: myRepono Website Backup Service
Website Pre-Launch Checklist
ionix in 2010
PHP Security Tips - Part 1
OpenCrypt 1.8 New Feature Highlights
Video Conversion API
We're on Twitter!
IP Location API
Integrating OpenCrypt's PHP Login Interface
Developing Mobile Web Sites
Service Recovery
Building relationships with your customers
Doing the unexpected
PHP/JavaScript World Map with Continent and Ocean Selection
We've Moved!
Customer Showcase: A-Z-Animals.com
Optimising your secure content for Google
Membership business models
AJAX Calendar with PHP and mySQL
PHP Function for Reciprocal Linkback Checking
AJAX Tree Menu with PHP - Revisited
What is membership software?
Login form designs and inspiration
PHP subscriber counter with Addicted to Feedburner class and Feedburner Awareness API
AJAX Tree Menu with PHP
AJAX data listings engine with PHP and mySQL (BETA)
Join the ionix Team!
Press Release: OpenCrypt 2.0 in Development!
PHP: Basic functions for quickstart PHP framework
Welcome to the OpenCrypt Blog!
Visitor Comments
OpenCrypt Team 10 out of 10
Space Holder
The AJAX Calendar was updated on the 21st April 2011 to address a minor XSS vulnerability.
Space Holder
Space Holder
jsherk 10 out of 10
Space Holder
This is a great little script! Not only does it LOOK GOOD, but it also WORKS GOOD too!
SUGGESTION: I added the following class to both tables because the days-of-the-month table does not quite line up under the month-name table. table.center {margin-left:auto; margin-right:auto;} Then add class=rounded5 center to line them up perfect!

Space Holder
Space Holder
Antonio 10 out of 10
Space Holder
I have a solution:
monthstart = date(w, timestamp)-1
and modify order in days letter.

Space Holder
Space Holder
Antonio 10 out of 10
Space Holder
Magnus, Jan... I've same question żdo you know a solution?
Space Holder
Space Holder
Leandro 9 out of 10
Space Holder
Really like the work but it would be nice if it behavied like Firefox when using it on IE. The problem has been mentioned by Rene above. Thanks
Space Holder
Space Holder
Magnus 9 out of 10
Space Holder
Have the same question: What if I want to start the week with Monday?
Space Holder
Space Holder
khan 10 out of 10
Space Holder
Its great but I do not know how to put data into the calendar. Thanks
Space Holder
Space Holder
Jez 10 out of 10
Space Holder
Awesome calendar, clean and simple. Just one question: how do I set it to start on Monday as opposed to Sunday?
Space Holder
Space Holder
OpenCrypt Team 10 out of 10
Space Holder
Dean, yes this is possible though obviously the script needs to be modified to suit your needs. You will need to modify the &date_status function in calendar.php to detect the appropriate status for each day, and then modify within the calendar function (approx. line 290) to control what colour the day is shown in depending on the status.
Space Holder
Space Holder
Dean Robinson 10 out of 10
Space Holder
is there away of showing the dates which are free in different colours. Eg for low and high tariff days, if the day is busy regardless of the tariff it will show the busy colour.
Other than that nice and simple and no nonsense script.

Space Holder
Space Holder
OpenCrypt Team 10 out of 10
Space Holder
Rene, are you being quite quick with the selections? Each click sends a new request to the server so if you have a slow server, and particularly when using Internet Explorer the connection can take a moment. You need to wait until your selection is marked before making the next selection - though there is a queue system so this shouldn't be an issue, but if selecting the same day it will be because that day hasn't been updated yet so you're just submitting the same request repeatedly.
Space Holder
Space Holder
Rene 7 out of 10
Space Holder
Hi, nice peace of work and love to use it but there still seems to be a bug in it. When clicking multiple times after each other on a same date it doesn't make the change anymore. New browser window need to be opened before a date can be marked again :(
Space Holder
Space Holder
OpenCrypt Team 10 out of 10
Space Holder
Caton, if you take a look in calendar.php the date_status() function is called for each day on the calendar and is used to determine whether the day is 'busy' or not. You can modify this function and line 281 where it is called to customise it to include data from your own database, for example so you can show information on mouseover...
Space Holder
Space Holder
Caton 6 out of 10
Space Holder
The Calendar is quite easily to use, it's good for me. But i want to know how can change the insert to echo the database information?
Space Holder
Space Holder
Average Rating: 9.81 out of 10 (48 Votes)
Space Holder
Submit Comment
Space Holder
Article Rating:
Space Holder
Your Name:
Space Holder
Your Comment/Response:
Space Holder
Space Holder
Space Holder

Follow us on Twitter

Copyright © 1999 - 2011 ionix Limited. Affiliates, Contact Us

Powered by OpenCrypt Membership Software, Backups by myRepono Website Backup