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.
  Accepts HourFormat.Default | Numeric | TwoDigit
• DayFormat - Formats the days.
  Accepts GanttDayFormat.Long | Narrow | Numeric | Short | TwoDigit
• WeekFormat - Formats the weeks.
  Accepts WeekFormat.Long | Numeric
• MonthFormat - Formats the months.
  Accepts MonthFormat.FirstTwoLetters | Long | Narrow | Numeric | Short | TwoDigit
• YearFormat - Formats the months.
  Accepts YearFormat.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"
        }  
    };
}