Date dropdown list that is included in the default Scheduler - From 198492

[Michael DeLange]

Hello, thank you for your response.  I would like to have something that behaves like the date dropdown list that is included in the default Scheduler toolbar please.

[Saritha Sankar]

Hi Michael DeLange,

Thank you for reaching out to us!

Based on your requirement, you can use a DropDownList within the Scheduler's custom toolbar. The SfDropDownList can be placed inside the <ScheduleToolBarCustom> item and populated with any data source that suits your application.

Refer the below code snippet for your reference.
 

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.DropDowns

<div class="component-container">

    <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">

        <ScheduleToolBar>

            <ScheduleToolBarPrevious />

            <ScheduleToolBarNext />

            <ScheduleToolBarDateRange />

            <ScheduleToolBarCustom Type="ItemType.Spacer" />

             <ScheduleToolBarCustom>

               <SfDropDownList TValue="string" TItem="AppointmentStatus" @bind-Value="@DropVal" DataSource="@StatusList" Width="250px">

                    <DropDownListFieldSettings Value="Text"></DropDownListFieldSettings>

                </SfDropDownList>

            </ScheduleToolBarCustom>

            <ScheduleToolBarCustom Type="ItemType.Spacer" />

            <ScheduleToolBarToday />

            <ScheduleToolBarViews />

        </ScheduleToolBar>

        <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

    </SfSchedule>

</div>

@code {

    DateTime CurrentDate = new DateTime(2020, 2, 14);

   

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0), EndTime = new DateTime(2020, 2, 13, 12, 0, 0) },

        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0), EndTime = new DateTime(2020, 2, 15, 12, 0, 0) }

    };

    public string DropVal = "Confirmed";

    public class AppointmentStatus

    {

        public string Text { get; set; }

        public string Value { get; set; }

    }

    List<AppointmentStatus> StatusList = new()

    {

        new() { Text = "Confirmed", Value = "Confirmed" },

        new() { Text = "Tentative", Value = "Tentative" },

        new() { Text = "Pending Approval", Value = "Pending" },

        new() { Text = "Cancelled", Value = "Cancelled" }

    };

    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; }

    }

}

Sample Link: https://blazorplayground.syncfusion.com/VXhRNvZICbBXoWfZ

Demo link: Blazor Schedule Examples - Header Bar | Schedule Demos | Syncfusion

UG Link: Header Customization in Blazor Scheduler Component | Syncfusion®

Please let us know if you need any further assistance.

Regards,

Saritha S.