We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
[index.Html]
<style>
.e-round {
display: block;
height: 20px;
width: 20px;
margin-top: 6px;
border-radius: 10px
}
.e-indicator-span {
color: transparent;
}
.e-low {
background: red
}
.e-partial {
background: orange
}
.e-full {
background: green
}
</style>
[app.component.ts]
public ngOnInit(): void {
this.data = [
{
//...
Indicators: [
{
'date': '03/27/2019',
'iconClass': 'e-round e-low',
'tooltip': 'Tooltip text',
'name': 'Tooltip text'
},
]
},
];
this.taskSettings = {
//...
indicators: 'Indicators'
};
this.timelineSettings = {
topTier: {
format: 'MMM, yyyy',
unit: 'Month',
},
bottomTier: {
unit: 'Week',
format: 'dd MMM'
},
timelineUnitSize: 150
},
}
} |
Hi Ram,We can define the Gantt timeline mode by using the property timelineViewMode and by using unit property of timelineSettings.topTier and timelineSettings.bottomTier we can specify the mode in both top tier and bottom tier separately, please refer the below documentation link.We have indicators support, using this we can render custom elements, icons on particular date of task. We can assign indicators for each tasks in data source and map this field by using taskFields.indicators property. Please find the below code example.