Download week planner

Demo

Bookmark and Share

Licensing

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).

Configuration

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.

Formats

This script supports JSON and XML from the server

JSON

Example of JSON code:

{
   "success":true,
   "data":[
     {
       "id":"8",
       "description":"NORWEGIAN\nNATIONAL DAY",
       "startDate":"Tue, 17 May 2011 09:00 GMT+2",
       "endDate":"Tue, 17 May 2011 15:00 GMT+2",
       "bgColor":"#FFFFFF",
       "readOnly":false
     }
   ]
}

XML format

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

<?xml version="1.0" ?>
<item>
  <id>1</id>
  <description>Lunch</description>
  <startDate>Mon, 13 Feb 2006 11:30 GMT</startDate>
  <endDate>Mon, 13 Feb 2006 12:00 GMT</endDate>
  <bgColor>#FFFFFF</bgColor>
  <bgColor>#FFFFFF</bgColor>
</item>
<item>
  <id>2</id>
  <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>
  <bgColor>#FFFF00</bgColor>
</item>

Properties:

  • 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.urls.save : 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 Hotscripts.com

If you like my script, please rate it at HotScripts.com

Update log

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

Comments

alex
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 04:40PM, 2011/03/15.
steve
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 09:59PM, 2011/04/21.
Trotamundos
Awesome Scritp! I've already rate it at hotsctipt.com.

Just one thing, when you try to access the demo at the index page, the link is no correct!

Best Regards, Sinplan
Trotamundos at 05:17PM, 2011/05/01.
eteam-india
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 09:18PM, 2011/05/07.
Admin comment
DHTMLGoodies
I'm currently working on an update for this script. A prerelease version can be downloaded from

http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-week-planner/weekplanner-2011-beta.zip

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 01:51PM, 2011/05/12.
Steve-TeamUSA
How about add the ability to delete an event by right-click the mouse button instead of pressing the 'Del' key.
Steve-TeamUSA at 08:50PM, 2011/05/18.
enoch
I can't seem to find the weekplanner.class.php in the package. Can you check? Thank You...
enoch at 02:40PM, 2011/05/19.
Admin comment
DHTMLGoodies
weekplanner.class.php is in the zip file. If you can't find it, please clear your cache and try again.
DHTMLGoodies at 08:33AM, 2011/05/20.
Admin comment
DHTMLGoodies
Steve-TeamUSA,

I will add support for context menu asap
DHTMLGoodies at 09:43AM, 2011/05/20.
Andy
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 11:22AM, 2011/07/20.
Mark
Hello,

Does this have the ability to email or send a text message when the event is coming up?
Mark at 06:20PM, 2011/08/26.
marco
Hi, this doesn't work on ie 8.0.
Can you fix?
marco at 09:42AM, 2012/02/17.
Greg
I cannot enable pop up window to edit event . I dont know where i can find var to change FALSE.
Greg at 12:03AM, 2012/04/18.
Tony
Excellent application. But there would be a way to load the car events from a safari on ios?
Tony at 02:28PM, 2012/05/16.
Greg
Where is the config file, where are mysql settings??
Greg at 05:50PM, 2012/06/16.
Fred
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 03:30PM, 2014/03/31.
khushal
Hi

Good Script
But How to connect with mysql database data...
khushal at 08:58AM, 2014/09/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com