The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the HeaderRows property. This property is applicable only on the timeline views. The possible rows which can be added using HeaderRows property are as follows.
YearMonthWeekDateHourThe
Hourrow is not applicable for Timeline month view.
The following example shows the Scheduler displaying all the available header rows on timeline views.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("650px")
.HeaderRows(headerRow => {
headerRow.Option(HeaderRowType.Year).Add();
headerRow.Option(HeaderRowType.Month).Add();
headerRow.Option(HeaderRowType.Week).Add();
headerRow.Option(HeaderRowType.Date).Add();
headerRow.Option(HeaderRowType.Hour).Add();
})
.Views(view => { view.Option(View.TimelineWeek).Add(); })
.SelectedDate(new DateTime(2018, 1, 1))
.Render()
)public ActionResult Index()
{
return View();
}To display the timeline Scheduler simply with year and month names alone, define the option Year and Month within the HeaderRows property.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("650px")
.HeaderRows(headerRow => {
headerRow.Option(HeaderRowType.Year).Add();
headerRow.Option(HeaderRowType.Month).Add();
})
.Views(view => {
view.Option(View.TimelineMonth).Add();
})
.Render()
)public ActionResult Index()
{
return View();
}The week number can be displayed in a separate header row of the timeline Scheduler by setting Week option within HeaderRows property.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("650px")
.HeaderRows(headerRow => {
headerRow.Option(HeaderRowType.Week).Add();
headerRow.Option(HeaderRowType.Date).Add();
headerRow.Option(HeaderRowType.Hour).Add();
})
.Views(view => {
view.Option(View.TimelineMonth).Interval(24).Add();
view.Option(View.TimelineWeek).Interval(3).Add();
view.Option(View.TimelineDay).Interval(4).Add();
})
.Render()
)public ActionResult Index()
{
return View();
}It is possible to display a complete year in a timeline view by setting Interval value as 12 and defining TimelineMonth view option within the Views property of Scheduler.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("650px")
.HeaderRows(headerRow => {
headerRow.Option(HeaderRowType.Month).Add();
headerRow.Option(HeaderRowType.Date).Add();
})
.Views(view => {
view.Option(View.TimelineMonth).Interval(12).Add();
})
.Render()
)public ActionResult Index()
{
return View();
}You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in Template option available within the HeaderRows property.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("650px")
.HeaderRows(headerRow => {
headerRow.Option(HeaderRowType.Month).Template("#month-template").Add();
headerRow.Option(HeaderRowType.Week).Template("#week-template").Add();
headerRow.Option(HeaderRowType.Date).Add();
})
.Views(view => {
view.Option(View.TimelineDay).Add();
view.Option(View.TimelineWeek).Add();
view.Option(View.TimelineWorkWeek).Add();
view.Option(View.TimelineMonth).Add();
})
.Render()
)
<script id="month-template" type="text/x-template">
<span class="month">${getMonthDetails(data)}</span>
</script>
<script id="week-template" type="text/x-template">
<span class="week">${getWeekDetails(data)}</span>
</script>
<script type="text/javascript">
var instance = new ej.base.Internationalization();
window.getMonthDetails = function (value) {
return instance.formatDate(value.date, { skeleton: 'yMMMM' });
};
window.getWeekDetails = function (value) {
return 'Week ' + ej.schedule.getWeekNumber(value.date);
};
</script>public ActionResult Index()
{
return View();
}