Time options
8 Mar 2018 / 7 minutes to read
Start date and end date in the data source defines the starting point and ending point of a task in the project. The two data types are:
- Date
- Datetime
The datetime data type for start date and end date defines the exact starting point and ending point of a task along with time details of a day. There are two types of time scales available based on working hours:
-
TimeScale8Hours
for 8 hour working scale -
TimeScale24Hours
for 24 hour working scale
Use the following code example for setting different time scales of working hours:
<body ng-controller="GanttCtrl">
<!--Add Gantt control here-->
<div id="GanttContainer" ej-gantt
//...
e-workingtimescale=ej.Gantt.workingTimeScale.TimeScale24Hours
>
</div>
</body>
Use the following code example to include time options in start date and end date of a task:
<body ng-controller="GanttCtrl">
<!--Add Gantt control here-->
<div id="GanttContainer" ej-gantt
//...
e-datasource= "taskDetails"
e-taskidmapping= "taskID"
e-tasknamemapping= "taskName"
e-startdatemapping= "startDate"
e-progressmapping= "progress"
e-durationmapping= "duration"
e-enddatemapping= "endDate"
e-childmapping= "subtasks"
e-treecolumnindex= 1
e-dateformat= "M/d/yyyy hh:mm:ss tt"
e-schedulestartdate= new Date("02/01/2014 00:00:00 AM")
e-scheduleenddate= new Date("03/14/2016 00:00:00 PM")
e-workingtimescale= ej.Gantt.workingTimeScale.TimeScale24Hours
>
</div>
<script>
var taskDetails = [{
taskID: 1,
taskName: "Planning",
startDate: "02/03/2014 08:00:00 AM",
endDate: "02/07/2014 05:00:00 PM",
subtasks: [
{
taskID: 2,
taskName: "Plan timeline",
startDate: "02/03/2014 08:00:00 AM",
endDate: "02/07/2014 05:00:00 PM",
duration: 5,
progress: "100"
},
{
taskID: 3,
taskName: "Plan budget",
startDate: "02/03/2014 08:00:00 AM",
endDate: "02/07/2014 05:00:00 PM",
duration: 5,
progress: "100"
},
{
taskID: 4,
taskName: "Allocate resources",
startDate: "02/03/2014 08:00:00 AM",
endDate: "02/07/2014 05:00:00 PM",
duration: 5,
progress: "100"
},
{
taskID: 5,
taskName: "Planning complete",
startDate: "02/07/2014 08:00:00 AM",
endDate: "02/07/2014 05:00:00 PM",
duration: 0,
}
]}];
angular.module('listCtrl', ['ejangular'])
.controller('GanttCtrl', function($scope) {
//...
$scope.taskDetails = "taskDetails";
});
</script>
</body>
Execute the above code to render the following output:
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page