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'.
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:
|
<- PHP Function for Reciprocal Linkback Checking
|
Membership business models ->
|
|
|
|
|
|
OpenCrypt Team |
10 out of 10 |
|
The AJAX Calendar was updated on the 21st April 2011 to address a minor XSS vulnerability.
|
|
|
jsherk |
10 out of 10 |
|
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!
|
|
|
Antonio |
10 out of 10 |
|
I have a solution:
monthstart = date(w, timestamp)-1
and modify order in days letter.
|
|
|
Antonio |
10 out of 10 |
|
Magnus, Jan... I've same question żdo you know a solution?
|
|
|
Leandro |
9 out of 10 |
|
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
|
|
|
Magnus |
9 out of 10 |
|
Have the same question: What if I want to start the week with Monday?
|
|
|
khan |
10 out of 10 |
|
Its great but I do not know how to put data into the calendar. Thanks
|
|
|
Jez |
10 out of 10 |
|
Awesome calendar, clean and simple. Just one question: how do I set it to start on Monday as opposed to Sunday?
|
|
|
OpenCrypt Team |
10 out of 10 |
|
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.
|
|
|
Dean Robinson |
10 out of 10 |
|
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.
|
|
|
OpenCrypt Team |
10 out of 10 |
|
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.
|
|
|
Rene |
7 out of 10 |
|
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 :(
|
|
|
OpenCrypt Team |
10 out of 10 |
|
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...
|
|
|
Caton |
6 out of 10 |
|
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?
|
|
|
Average Rating: 9.51 out of 10 (321 Votes)
|
|
|
|
