An awesome weekly planner. Great use of JavaScript and cookies.
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>
  <eventstartdate>Mon, 13 Feb 2006 11:30 GMT</eventstartdate>
  <eventenddate>Mon, 13 Feb 2006 12:00 GMT</eventenddate>
  <bgcolorcode>#FFFFFF</bgcolorcode>
</item>
<item>
  <id>2</id>
  <description>Working with my project which is quite exciting.</description>
  <eventstartdate>Mon, 13 Feb 2006 12:00 GMT</eventstartdate>
  <eventenddate>Mon, 13 Feb 2006 14:30 GMT</eventenddate>
  <bgcolorcode>#FFFF00</bgcolorcode>
</item>

Tags:

* item = parent element for each item
* id = Unique id for each event
* description = Textual description of the event
* eventStartDate = Start of event
* eventEndDate = End of event

Javascript variables

You have the following variables available:

var headerDateFormat = 'd.m';
var instantSave = true;
var externalSourceFile_items = 'week_schedule_getItems.php';
var externalSourceFile_save = 'week_schedule_save.php';
var popupWindowUrl = 'edit_event.html';

var appointmentMarginSize = 5;
var initTopHour = 8;
var initMinutes = 15;
var snapToMinutes = 5;

var inlineTextAreaEnabled = true;
var weekplannerStartHour=8;

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

Demo: http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-week-planner/dhtmlgoodies-week-planner.html
Download: http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-week-planner/dhtmlgoodies-week-planner.zip?version=1_3
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
* js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack)
* week_schedule_getItems.php = File called by ajax. This file outputs events in XML format. These events will be shown automatically on your page. Variables year,month and day is sent to this file.
* week_schedule_save.php = File called by ajax when changes have been made to an event. This file will be called when an element is created(after description has been added), moved or resized.
* week_schedule_delete.php = File called by ajax when an event is deleted.
* edit_event.html = 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 popupWindowUrl to false.

Source: http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies-week-planner

Related Listings:

1. Week Calendar using Jquery A jquery plugin providing a weekly view of calendar events....
2. Fly To Basket – Ajax Script Fly To Basket – Ajax Script Configuration This is the...
3. AJAX Poller Script Configuration PHP and mySql required This script requires that you...
4. Javascript Calendar Using MooTools The idea is to use MooGenda to quickly expose your...

Do you like this post?

Email: