CalendarPlan Custom Control

Calendar schedule chart

Gantt chart

About the Project

CalendarPlan is a ready-to-use custom control for planning projects schedule with Dojo fast and easy. It consists of two custom controls. They are: ccCalendar (with ccSelectParameters) which is used to show projects filtered by special parameters on selected day, and ccGantt which demonstrates the sequence of projects, their durations and responsible persons.

Select Chart

/CalendarPlan.nsf/FirstXPage.xsp

Calendar Chart

A Calendar chart is used to display months of the year with marked days when projects were planned. If you click on the day on which projects were assigned, on the right there will appear the date, a list of planned tasks and responsible persons.

In the Filter Settings you can choose the following parameters: - person name - person surname - task type - task name - start date - year - quantity on months

This custom control can be used for social, commercial, or administrative purposes.

Calendar Chart Properties You can control the following Calendar chart properties:

- server name - database name - view name (required field) - disabled task type (if you want to mark f.e. holidays as

disabled) - disable weekends (if you wish to indicate weekends as

disabled) - project style (“ProjectStyle1”, “ProjectStyle2”,

“ProjectStyle3”, required field, used to mark days when projects were scheduled, these styles are declared in MarkDays.css)

If server name or database name is not defined, the view would be taken from the current database.

Document Fields

The documents in the view you specified must have such fields:PersonNamePersonSurnameTaskTypeTaskNameStartDateDurationTaskID

Filter Settings for Calendar Chart Select person name, person surname, task type and

task name from the lists.

Filter Settings for Calendar Chart

Select quantity of months

Filter Settings for Calendar Chart Select year. There is the current year, two previous years and

two next years in the list.

Filter Settings for Calendar Chart You can use <Previous> and <Next> buttons to choose year

which is not shown in the list.

Filter Settings for Calendar Chart

Use <Show> and <Hide> buttons to control Filter Settings. <Refresh> button is used to show calendar.

Calendar Chart

Calendar Chart Description

Hereinabove you can see projects marked with blue squares, vacations marked as disabled date and noted weekends. 12 month have been selected. The current month is always situated in the centre of calendar.

Calendar Chart Click on the marked day and see projects on this day (f. e. the 12th of

August is selected)

Calendar Chart, ProjectStyle parameter

You can use ProjectStyle parameter of the ccSelectParameters custom control to mark days in calendar when projects are scheduled.

If dojo 1.4.3 is installed at your server, use such name of the style to indicate that ProjectStyle=ProjectStyle1

dojoxCalendar td.dijitCalendarCurrentProjectStyle1

For dojo 1.6.1 simply use ProjectStyle in style sheet definition to set ProjectStyle=ProjectStyle

MarkDays.css

dojoxCalendar td.dijitCalendarCurrentProjectStyle1 { background-color: #B9CBF1 !important; color: blue; border:#2222c8 solid 1px !important; font-size: 12px; } .dojoxCalendar td.dijitCalendarCurrentProjectStyle2 { background-color: #bc93d1 !important; color: 4c0b55; border:#5b0570 solid 1px !important; font-family: tahoma, verdana, helvetica; font-size: 12px; } .dojoxCalendar td.dijitCalendarCurrentProjectStyle3 { background-color: #98FB98 !important; color: green; border:#006400 solid 1px !important; font-family: tahoma, verdana, helvetica; font-size: 11px; font-weight: bold; } .ProjectStyle { color: blue; border:#2222c8 solid 1px !important; }

Calendar Chart

Deployment of Calendar Chart

To deploy Calendar Chart into your project you need to put this custom control on your xPage. Add ccCalendar and ccSelectParameters to the custom controls of your application. Add style sheets calendars.css and MarkDays.css.

Gantt Chart

A Gantt chart is a type of bar chart that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. Terminal elements and summary elements comprise the work breakdown structure of the project.

Gantt Chart Properties

You can control the following Gantt Chart properties: - server name - database name - view name (required field) - sorting (allow multiple instances)

parameter name (id, name, startTime, duration, percentage, taskOwner, previousTaskId)

sort type (ascending, descending) sort order (1, 2, 3, …)

If server name or database name is not defined, the view would be taken from the current database.

Initial task in the project tree is the first task got after sorting.

Document Fields

The documents in the view you specified must have such fields: PersonName PersonSurname TaskType TaskName StartDate Duration (quantity of days) Percentage PreviousTaskID TaskID

Gantt chart

Gantt Chart Parameters

GanttChart (dojox.gantt.GanttChart) is an integrated widget for project and resource management. It includes a set of feature as follows. Toolbar - Providing general time line control and

save/load button. Project Tree - Listing projects and their tasks. Task Cascade View - A task view with dependency, that

can be modified visually. Resource View - A read-only view shows people

resource occupation.

Gantt Chart Toolbar

Gantt chart toolbar provides some handy controls like zooming time line time zone, and save/load button for gantt chart data.

Enlarge timeline Enlarge Time Line: it shows a more accurate time line when it enlarged.

Shrink timeline Shrink Time Line: it shows a more general time line when it shrink.

Zoom in time zone (microscope view)

Zoom in Time Zone.

Zoom out time zone (telescope view)

Zoom out Time Zone.

Save gantt data to json file

Load gantt data from json file

Gantt Chart Project Tree

Project tree shows all the projects and their tasks, each task has a visual bar in task cascade view in the same row. It shows the task menu when task item is hovered. The menu lists many functionality of task.

Gantt Chart Task Cascade View

The task cascade view shows the task sequence and dependency between them. The "task bar" can be modified on starting time by moving horizontally, and set task duration by dragging the right end of it.

Gantt Chart Resource View

Resource view shows the people resource occupation and the what task the resource occupied to. The following image indicates the Bill's (Gillian’s) resource occupation, the lighter blue bar shows the resource occupation on relevant task.

Deployment of Gantt Chart

To deploy Gantt Chart into your project you need to put this custom control on your xPage. Add style sheets claro.css and gantt.css that could be find in the dojo folder (or in this application) to the resources. Add images from the same place to the resources of your project.

Used Style Sheets and Images

\dojox\gantt\resources\gantt.css\dijit\themes\claro\claro.css\dojox\gantt\resources\images\

Dojo on the Server

On your server must be installed: \dojox\gantt\GanttChart.js \dojox\gantt\GanttProjectItem.js \dojox\gantt\GanttResourceItem.js \dojox\gantt\GanttTaskItem.js \dojox\gantt\TabMenu.js

If on the server you have earlier version of dojo that doesn’t contain dojox.gantt.GanttChart simply copy folder \dojox\gantt\ from dojo version 1.6.1 which can be find at http://dojotoolkit.org/ (licensed under the Dojo license at http://bugs.dojotoolkit.org/browser/dojo/trunk/LICENSE)

Internet Java Script resources

Alternative way is using Java Script libraries from the Internet (not used in this project).

Internet Java Script Resources

http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/gantt/GanttChart.xd.js

http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/parser.xd.js

http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/data/ItemFileReadStore.xd.js

http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js

Script Libraries in the Project

Of course you can copy code from the specified links, create your own Java Script Library, paste the code there and than attach it to the project (not used in this project).

Gantt Chart Additional Files

To save gantt data to json file you need to add file saveGanttData.php to the project. You can find it in dojo folder: \dojox\gantt\tests\ saveGanttData.php

To load gantt data from json file you need to add file gantt_default.json to the project. Simply create new empty file.

System requirements

This project was tested on such system:Windows server 2003Lotus Domino Server 8.5.2Fix pack 1, fix pack 2, fix pack 3dojo-1.4.3 (catalog gantt was copied from

dojo version 1.6.1)Mozilla Firefox 5.0.1

Restrictions

If you select 12 month (maximum value) in Filter Settings of the ccSelectParameters, script execution in your Web Browser takes much more time.

This application may not run at the local machine, replicate it to the server and test there.

Don’t replace entire folder dojo-1.4.3 with the folder dojo-1.6.1. The project may not work.

Video

Find this project on YouTube. http://www.youtube.com/watch?v=av84VOqwIdI

Contact

If you have any questions, please contact us. Kateryna Czerniachowska kczern@unicorn.com.pl Grzegorz Pawlak gpawlak@unicorn.com.pl