|
RadiantQ jQuery Gantt Package
WorkTimeSchedule
|   |
|
RadiantQ jQuery Gantt Package
WorkTimeSchedule
| |
Working Times
It's important to provide the GanttControl the correct "working times" for the tasks in the project so that the time span of the tasks can be appropriately determined based on the required duration of the task.
WorkTimeSchedule
This type lets you define a set of working days and times. You can create a custom schedule and assign it to the GanttControl.WorkTimeSchedule property.
For example,
Using the built-in schedules
|
$('#container').GanttControl({ .... .... WorkTimeSchedule: RadiantQ.Gantt.WorkTimeSchedule.Schedule8X5 }); |
|
In ASP.NET MVC |
|
<%= Html.JQProjectGantt( new JQProjectGanttSettings() { ControlId = "gantt_container", Options = new ProjectGanttOptions() { WorkTimeSchedule = "RadiantQ.Gantt.WorkTimeSchedule.Schedule8X5", ... } })%> |
|
In ASP.NET |
|
<RQ:GanttControl WorkTimeSchedule="RadiantQ.Gantt.WorkTimeSchedule.Schedule8X5" ID="gantt" ... /> |
Using custom schedules
|
In HTML |
|
$('#container').GanttControl({ .... .... WorkTimeSchedule: new RadiantQ.Gantt.WorkTimeSchedule("Monday - Thursday, 10 Hours", Create4Days10HoursSchedule) }); |
|
In ASP.NET MVC |
|
<script type="text/javascript"> function Create8X5ScheduleWithHolidays(date) { // Holidays for 2012 if (date == null) return; if (date.equals(new Date(2012, 1, 13)) || date.equals(new Date(2012, 1, 14)) || date.equals(new Date(2012, 1, 17)) || date.equals(new Date(2012, 5, 4)) || date.equals(new Date(2012, 6, 13))) return null; // Simply reuse an existing schedule or use your own logic here. return RadiantQ.Gantt.WorkTimeSchedule.EightHoursByFiveDaysScheduleProvider(date); } Object.defineProperty(this, "FourDaysTenHoursSchedule", { get: function () { return new RadiantQ.Gantt.WorkTimeSchedule("Monday - Thursday, 10 Hours", Create8X5ScheduleWithHolidays); ; }, enumerable: true, configurable: false }); </script> ... <%= Html.JQProjectGantt( new JQProjectGanttSettings() { ControlId = "gantt_container", Options = new ProjectGanttOptions() { WorkTimeSchedule = "FourDaysTenHoursSchedule", ... } })%> |
|
In ASP.NET |
|
<script type="text/javascript"> function Create8X5ScheduleWithHolidays(date) { // Holidays for 2012 if (date == null) return; if (date.equals(new Date(2012, 1, 13)) || date.equals(new Date(2012, 1, 14)) || date.equals(new Date(2012, 1, 17)) || date.equals(new Date(2012, 5, 4)) || date.equals(new Date(2012, 6, 13))) return null; // Simply reuse an existing schedule or use your own logic here. return RadiantQ.Gantt.WorkTimeSchedule.EightHoursByFiveDaysScheduleProvider(date); } Object.defineProperty(this, "FourDaysTenHoursSchedule", { get: function () { return new RadiantQ.Gantt.WorkTimeSchedule("Monday - Thursday, 10 Hours", Create8X5ScheduleWithHolidays); ; }, enumerable: true, configurable: false }); </script> ... <RQ:GanttControl ID="gantt" WorkTimeSchedule = "FourDaysTenHoursSchedule" .... /> |
If you are going to set this property, make sure to do so before assigning the ItemsSource on the GanttControl. If you have to dynamically change this setting during runtime, then everytime you do so, you will have to reset the ItemsSource property to null and then back to your source for the new schedule to take effect. (This is not handled internally for performance reasons).
Built-in Schedules
a) The default schedule used is a "Monday to Friday, 8AM to 4PM" schedule defined by the RadiantQ.Gantt.WorkTimeSchedule.Schedule8X5 instance.
b) There is also a "Monday to Friday, 24 hours a day" schedule defined by the RadiantQ.Gantt.WorkTimeSchedule.Schedule24X5 instance.
c) If you want a continuous "24 X 7" schedule simply set GanttControl.WorkTimeSchedule property to null.
Custom Schedules
When you look at the examples below, you will see that creating custom schedules are a snap.
a) For example, if you want to create a "Monday to Thursday, 10 hours a day" schedule, you can do so as follows:
|
function Create4Days10HoursSchedule(date){ switch (date.getDayName()) { case "Monday": case "Tuesday": case "Wednesday": case "Thursday": var intervals = new RadiantQ.Gantt.TimePeriodCollection(); intervals.Add(new RadiantQ.Gantt.TimePeriod(date.clone().addHours(8.0), null, new RQTimeSpan(0, 10, 0, 0, 0))); return intervals; break; default: return null; } } |
b) For a "Monday to Thursday, 24 hours a day" schedule, you can do as follows:
|
function Create4Days10HoursSchedule(date){ switch (date.getDayName()) { case "Monday": case "Tuesday": case "Wednesday": case "Thursday": var intervals = new RadiantQ.Gantt.TimePeriodCollection(); intervals.Add(new RadiantQ.Gantt.TimePeriod(date.clone().addHours(8.0), null, new RQTimeSpan(1, 0, 0, 0, 0))); return intervals; break; default: return null; } } |
c) To include Holidays in your schedule use a custom schedule like this:
|
function Create8X5ScheduleWithHolidays(date){ // Holidays for 2012 if (date.equals(new Date(2012, 1, 13)) || date.equals(new Date(2012, 1, 14)) || date.equals(new Date(2012, 1, 17)) || date.equals(new Date(2012, 5, 4)) || date.equals(new Date(2012, 6, 13))) return null; // Simply reuse an existing schedule or use your own logic here. return RadiantQ.Gantt.WorkTimeSchedule.EightHoursByFiveDaysScheduleProvider(date); } |
Take a look at the sample GanttControlCustomSchedule for an illustration of this feature.
� RadiantQ 2022. All Rights Reserved.