Search results

Header customization

The header part of Scheduler can be customized easily with the built-in options available.

Show or Hide header bar

By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting false to the ShowHeaderBar property. It’s default value is true.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="550px" SelectedDate="@(new DateTime(2019, 1, 31))">
</EjsSchedule>

@code{
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

Date header customization

The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler using DateHeaderTemplate. The DateHeaderTemplate option is used to customize the date header cells of day, week and work-week views.

@using Syncfusion.EJ2.Blazor.Schedule
@using System.Globalization

<div class="control-section">
    <div class="content-wrapper">
        <EjsSchedule TValue="AppointmentData" Width="100%" CssClass="schedule-date-header-template" ModelType="@Model" Height="650px" SelectedDate="@(new DateTime(2019, 1, 10))">
            <ScheduleTemplates>
                <DateHeaderTemplate>
                    <div class="date-text">@(getDateHeaderText((context as TemplateArgs).Date))</div>
                    @{
                        @switch ((int)(context as TemplateArgs).Date.DayOfWeek)
                        {
                            case 0:
                                <div class="weather-text">25&deg;C</div>
                                break;
                            case 1:
                                <div class="weather-text">18&deg;C</div>
                                break;
                            case 2:
                                <div class="weather-text">10&deg;C</div>
                                break;
                            case 3:
                                <div class="weather-text">16&deg;C</div>
                                break;
                            case 4:
                                <div class="weather-text">8&deg;C</div>
                                break;
                            case 5:
                                <div class="weather-text">27&deg;C</div>
                                break;
                            case 6:
                                <div class="weather-text">17&deg;C</div>
                                break;
                        }
                    }
                </DateHeaderTemplate>
            </ScheduleTemplates>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
            </ScheduleViews>
        </EjsSchedule>
    </div>
</div>

@code {
    public class TemplateArgs
    {
        public DateTime Date { get; set; }
    }
    public TemplateArgs Model = new TemplateArgs();
    public static string getDateHeaderText(DateTime date)
    {
        return date.ToString("dd ddd", CultureInfo.InvariantCulture);
    }
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}
<style>
    .schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
        padding: 0;
        text-align: center !important;
    }

    .schedule-date-header-template.e-schedule .date-text {
        font-size: 14px;
    }

    .schedule-date-header-template.e-schedule.e-device .date-text {
        font-size: 12px;
    }

    .schedule-date-header-template.e-schedule .weather-image {
        width: 20px;
        height: 20px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .schedule-date-header-template.e-schedule .weather-text {
        font-size: 11px;
    }
</style>