Timeline Header Customization
Gantt Timeline is a two-level header, which displays the length of time of the displayed Tasks.
The format of the diplayed dates can be customized using the following properties:
- HourFormat - Formats the hours.
AcceptsHourFormat.Default | Numeric | TwoDigit
- DayFormat - Formats the days.
AcceptsGanttDayFormat.Long | Narrow | Numeric | Short | TwoDigit
- WeekFormat - Formats the weeks.
AcceptsWeekFormat.Long | Numeric
- MonthFormat - Formats the months.
AcceptsMonthFormat.FirstTwoLetters | Long | Narrow | Numeric | Short | TwoDigit
- YearFormat - Formats the months.
AcceptsYearFormat.Numeric | TwoDigit
The viewing range of the timeline can be set using the View
property.
<GanttChart @ref="gantt" DataSource="@Records" DayFormat="GanttDayFormat.Long" WeekFormat="WeekFormat.Long" View="GanttChartView.Week"/>
In addition, the upper level of the Timeline Header can be hidden using the HideTimelineHeaderDetails
property:
<GanttChart @ref="gantt" DataSource="@Records" DayFormat="GanttDayFormat.Long" WeekFormat="WeekFormat.Long" View="GanttChartView.Week"/>
Custom Gantt Header
Smart.Gantt allows you to create a custom header content for the Task Panel where it is possible to set custom content and functionality.
Create an HTML <template>
element and set its id as value of the HeaderTemplate
property.
<style> .header-controls { height: 100%; display: flex; justify-content: space-between; --smart-button-padding: 2.5px 15px; } .header-controls smart-button { min-width: 150px; } </style> <h2> Gantt Chart </h2> <GanttChart @ref="gantt" DataSource="@Records" HeaderTemplate="headerTemplateId"/> <template id="headerTemplate"> <div class="header-controls"> <div class="zooming"> <smart-button id="zoomIn">Zoom In</smart-button> <smart-button id="zoomOut">Zoom Out</smart-button> </div> <div class="insert-view"> <smart-button id="insert">Insert New Task</smart-button> </div> <div class="actions"> <smart-button id="undo">Restore</smart-button> <smart-button id="redo">Update</smart-button> </div> </div> </template> @code { public partial class GanttDataRecord { [JsonPropertyName("label")] public string Label { get; set; } [JsonPropertyName("dateStart")] public string DateStart { get; set; } [JsonPropertyName("dateEnd")] public string DateEnd { get; set; } [JsonPropertyName("type")] public string Type { get; set; } [JsonPropertyName("duration")] public int Duration { get; set; } } GanttChart gantt; string headerTemplateId = "headerTemplate"; public List<GanttDataRecord> Records = new List<GanttDataRecord>() { new GanttDataRecord{ Label = "Develop Website", DateStart = "2021-01-01", DateEnd = "2021-01-20", Type = "task" }, new GanttDataRecord{ Label = "Marketing Campaign", DateStart = "2021-01-05", DateEnd = "2021-01-15", Type = "task" }, new GanttDataRecord{ Label = "Publishing", DateStart = "2021-01-10", DateEnd = "2021-01-26", Type = "task" }, new GanttDataRecord{ Label = "Find clients", DateStart = "2021-01-12", DateEnd = "2021-01-25", Type = "task" } }; }