CalendarPlan Custom Control

1. CalendarPlan Custom Control Calendar schedule chart Gantt chart

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

3. Select Chart • /CalendarPlan.nsf/FirstXPage.xsp

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

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

6. Document Fields • The documents in the view you specified must have such fields: • PersonName • PersonSurname • TaskType • TaskName • StartDate • Duration • TaskID

7. Filter Settings for Calendar Chart • Select person name, person surname, task type and task name from the lists.

8. Filter Settings for Calendar Chart • Select quantity of months

9. Filter Settings for Calendar Chart • Select year. There is the current year, two previous years and two next years in the list.

10. Filter Settings for Calendar Chart • You can use <Previous> and <Next> buttons to choose year which is not shown in the list.

11. Filter Settings for Calendar Chart • Use <Show> and <Hide> buttons to control Filter Settings. <Refresh> button is used to show calendar.

12. Calendar Chart

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

14. Calendar Chart • Click on the marked day and see projects on this day (f. e. the 12th of August is selected)

15. 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:#2222c8solid1px!important; font-size: 12px; } .dojoxCalendar td.dijitCalendarCurrentProjectStyle2 { background-color: #bc93d1!important; color: 4c0b55; border:#5b0570solid1px!important; font-family: tahoma,verdana,helvetica; font-size: 12px; } .dojoxCalendar td.dijitCalendarCurrentProjectStyle3 { background-color: #98FB98!important; color: green; border:#006400solid1px!important; font-family: tahoma,verdana,helvetica; font-size: 11px; font-weight: bold; } .ProjectStyle { color: blue; border:#2222c8solid1px!important; } Calendar Chart, ProjectStyle parameter

16. Calendar Chart

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

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

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

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

21. Gantt chart

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

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

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

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

26. Zoom in time zone (microscope view) • Zoom in Time Zone.

27. Zoom out time zone (telescope view) • Zoom out Time Zone.

28. Save gantt data to json file

29. Load gantt data from json file

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

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

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

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

34. Used Style Sheets and Images • \dojox\gantt\resources\gantt.css • \dijit\themes\claro\claro.css • \dojox\gantt\resources\images\

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

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

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

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

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

40. System requirements • This project was tested on such system: • Windows server 2003 • 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

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

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

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