Download week planner


Bookmark and Share


This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download script

You can download the entire script from this zip file (Updated May 13th 2011).


Files in package

  • dhtmlgoodies-week-planner.html = Main HTML file. This file contains some PHP code. If PHP isn't set up to parse .html files, you may have to change the extension of this file from "html" to "php", i.e. dhtmlgoodies-week-planner.php.
  • js/dhtmlgoodies-week-planner.js = Main JS file for the script
  • weekplanner-controller.php = File called via Ajax. This file will get, save and delete items.
  • weekplanner.class.php = Sample PHP class for handling events in the database
  • edit_event.php = A file used to edit events by double clicking on them. This file will be opened in a popup window. I have added this option since there's a limitiation on how much you can edit directly from the week planner. You can disable this option by setting the javascript variable remote.urls.edit to false.


This script supports JSON and XML from the server


Example of JSON code:

       "description":"NORWEGIAN\nNATIONAL DAY",
       "startDate":"Tue, 17 May 2011 09:00 GMT+2",
       "endDate":"Tue, 17 May 2011 15:00 GMT+2",

XML format

The file week_schedule_getItems.php produces a list of events in the following XML format:

<?xml version="1.0" ?>
  <startDate>Mon, 13 Feb 2006 11:30 GMT</startDate>
  <endDate>Mon, 13 Feb 2006 12:00 GMT</endDate>
  <description>Working with my project which is quite exciting.</description>
  <startDate>Mon, 13 Feb 2006 12:00 GMT</startDate>
  <endDate>Mon, 13 Feb 2006 14:30 GMT</endDate>


  • item = parent element for each item
  • id = Unique id for each event
  • description = Textual description of the event
  • startDate = Start of event in format Mon, 09 May 2011 15:00 GMT
  • startDate = Start of event in format Mon, 09 May 2011 15:00 GMT
  • readOnly = true or 1 if event is read only, i.e. not editable in the view or false or 0 otherwise.
  • bgColor = Background color of the event.

Javascript properties

You have the following variables available:

  • remote.urls.get : Remote url used when loading events.
  • : Remote url used for saving new event or updating existing event.
  • remote.urls.delete : Remote url used to delete an event.
  • remote.urls.edit : Url used to edit event from a popup window (when double clicking on an event).
  • remote.refreshViewAfterSeconds : Used to auto refresh, i.e. load data from server. 0 = disabled
  • remote.method : method used for Ajax requests ('get' or 'post')
  • remote.useJSON: true when data from the server is sent in JSON format
  • headerDateFormat : Format of data in the header, default = 'd.m' (day.month)
  • instantSave: true to send data to the server on every user action.
  • appointmentMarginSize : Margin at the left and right of appointments
  • initialScrollToHour : Initially auto scroll scheduler to the position of this hour
  • initMinutes : Automatically set start time for new events. Example: 15 = auto set start time to 0,15,30 or 45.
  • snapToMinutes : Snap to minutes, example: 5 = allow minute 0,5,10,15,20,25,30,35,40,45,50,55
  • weekplannerStartHour : The first hour in the view. Tthis has to correspond with the HTML created in dhtmlgoodies-week-planner.php

You will find these variables at the top of the dhtmlgoodies-week-planner.js file. There, you will also find a description of what these variables does.

You have also a variable initDateToShow at the top of the dhtmlgoodies-week-planner.html file(example: var initDateToShow = '2006-02-13';). This variable is used to decide which week to initally show. It doesn't matter which day in the week this variable is set to.

PHP variable

At the top of the dhtmlgoodies-week-planner.html file you will see a PHP variable:

<?php $rowHeight = 59; ?>

This $rowHeight variable is used to set the height of each hour in the script. The actual height is 1 pixel more than this value since a 1 pixel border is added to it.

You also have the variables $startHourOfWeekPlanner and $endHourOfWeekPlanner. Use these variable to specify which hours you want to display inside the week planner. If you want to display all 24 hours, use 0 and 24. If $startHourOfWeekPlanner is larger than 0, remember to also change the weekplannerStartHour javascript variable

Database structure used in demo

This is the SQL used to create the database table for this demo:

create table weekplanner_events(
   ID int auto_increment not null primary key,
   description text,
   startDate datetime,
   endDate datetime,
   bgColor varchar(15),
   readOnly char(1)

Demo mode

The demo at this site is in demo mode. This means that it pulls random generated events from the server. To toggle demo mode, change the constant

define('DEMO_MODE', 1);

in weekplanner.class.php

Rate this script at

If you like my script, please rate it at

Update log

  • October 6th, 2006 - Added support for displaying only hours between a specified start and end


Very good script, I will check its license term, and if it allows, then my php programmer can use this script to my clients.
alex at 03:40PM, 2011/03/15.
I got error when using this package. When I clicked on the event to schedul an event, it gave me an error and won't show the edit_event form at all. Could someone help me with this? Thanks...
steve at 07:59PM, 2011/04/21.
Awesome Scritp! I've already rate it at one thing, when you try to access the demo at the index page, the link is no correct!Best Regards, Sinplan
Trotamundos at 03:17PM, 2011/05/01.
Very nice script, I have check this, i will its license term, and if it allows, then my php programmer and website designer can use this script to my clients and its GUI according to website theme.thanks for sharing such nice article with developer and designer community.
eteam-india at 07:18PM, 2011/05/07.
Admin comment
I'm currently working on an update for this script. A prerelease version can be downloaded from

It's been five years since this script first was created. What I have done is

1) Cleaned up the code
2) Using Mootools insted of Sack
3) Added support for JSON data in addition to XML
4) Added support for read only events
5) Fixed problem with event background colors

An official update will be published once I'm finished implementing a Javascript Mootols class for the script instead of using plain Javascript functions.

Do you want some new features added to this script, please feel free to post your comments here.
DHTMLGoodies at 11:51AM, 2011/05/12.
How about add the ability to delete an event by right-click the mouse button instead of pressing the 'Del' key.
Steve-TeamUSA at 06:50PM, 2011/05/18.
I can't seem to find the weekplanner.class.php in the package. Can you check? Thank You...
enoch at 12:40PM, 2011/05/19.
Admin comment
weekplanner.class.php is in the zip file. If you can't find it, please clear your cache and try again.
DHTMLGoodies at 06:33AM, 2011/05/20.
Admin comment
Steve-TeamUSA,I will add support for context menu asap
DHTMLGoodies at 07:43AM, 2011/05/20.
This is a good script. Might it be possible to add a headline to it?A very nice extension would be to have some way to store 2 events next to each other in some visual way not just setting one over the other.
Andy at 09:22AM, 2011/07/20.
Hello, Does this have the ability to email or send a text message when the event is coming up?
Mark at 04:20PM, 2011/08/26.
Hi, this doesn't work on ie 8.0.
Can you fix?
marco at 08:42AM, 2012/02/17.
I cannot enable pop up window to edit event . I dont know where i can find var to change FALSE.
Greg at 10:03PM, 2012/04/17.
Excellent application. But there would be a way to load the car events from a safari on ios?
Tony at 12:28PM, 2012/05/16.
Where is the config file, where are mysql settings??
Greg at 03:50PM, 2012/06/16.
Hi explanations are totally has been variables listed have changed name... very hard to adapt as soon as the calendar is incuded into another div, appontments are drawn in the next days, depending to the scroll position... useless... btw : confirmation code is bugged too ...
Fred at 01:30PM, 2014/03/31.
HiGood ScriptBut How to connect with mysql database data...
khushal at 06:58AM, 2014/09/02.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021