CalendarPlan Custom Control

unevenechoΛογισμικό & κατασκευή λογ/κού

30 Οκτ 2013 (πριν από 3 χρόνια και 8 μήνες)

93 εμφανίσεις

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 w
ill

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:


PersonName


PersonSurname


TaskType


TaskName


StartDate


Duration


TaskID

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 12
th

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
.dijitCalendarCurrent
ProjectStyle1



For dojo 1.6.1 simply use
ProjectStyle

in style sheet definition to set
ProjectStyle=
ProjectStyle







MarkDays.css



dojoxCalendar
td
.dijitCalendarCurrent
ProjectStyle1

{


background
-
color
:
#B9CBF1

!important
;


color
:
blue
;


border:
#2222c8

solid

1px

!important
;


font
-
size:
12px
;


}


.dojoxCalendar
td
.dijitCalendarCurrent
ProjectStyle2

{


background
-
color
:
#bc93d1

!important
;


color
:
4c0b55
;


border:
#5b0570

solid

1px

!important
;


font
-
family:
tahoma
,

verdana
,

helvetica
;


font
-
size:
12px
;


}


.dojoxCalendar
td
.dijitCalendarCurrent
ProjectStyle3

{


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 200
3


Lotus Domino Server 8.5.2


Fix pack 1, fix pack 2, fix pack 3


dojo
-
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