New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

Download week planner

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

Update log

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

Comments

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.