Show the ditor all the time

[Harshad]

Hi,

Is it possible to show the Editor of the Scheduler all the time in a split pane and also optionally hide the scheduler? 

The Scheduler has a lot of useful functionality that I want to leverage and create a page which will show the the schedule editor so users can create any type of appointment, like "New Meeting" in Outlook.  Also, users can show or hide the actual scheduler as they wish.

Thanks

Harshad

[Vijay Ravi]

Hi Harshad,

Greetings from Syncfusion Support,
 

We have thoroughly reviewed and validated your inquiry regarding the requirements for the scheduler functionality. To display the scheduler editor and the scheduler in a split pane with a show/hide option, use the SfSplitter component. Place the appointment editor in the first pane and the scheduler, along with a button to toggle its visibility, in the second pane. The ShowScheduler variable controls the scheduler's display, toggled by the SfButton. Ensure necessary Syncfusion NuGet packages are installed and a valid license is in place. This provides a layout where the editor remains visible while the scheduler can be optionally hidden.

Additionally, if the solution does not meet requirement can you share the issue replicating sample or issue replicate in our shared sample and share the output image for reference.

Sample link:  https://blazorplayground.syncfusion.com/VDheNuWHpZrGofes
 

 

@page "/"

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Calendars

 

<div class="main-container" style="display: flex; height: 800px;">

    <SfSplitter ID="splitter" Height="800px" Width="100%" style="min-width:600px;">

        <SplitterPanes>

            <SplitterPane Size="40%" Min="30%">

                <ContentTemplate>

                    <div class="editor-section" style="padding: 10px;">

                        <h3>Appointment Editor</h3>

                        <table class="custom-event-editor" width="100%" cellpadding="5">

                            <tbody>

                                <tr>

                                    <td colspan="8">

                                        <SfDropDownList ID="EventType" DataSource="@StatusData" Placeholder="Choose status" @bind-Value="@Appointment.EventType" TValue="string" TItem="DropDownData">

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

                                        </SfDropDownList>

                                    </td>

                                </tr>

                                <tr>

                                    <td colspan="4">

                                        <SfCheckBox ID="@nameof(AppointmentData.IsAllDay)" @bind-Checked="Appointment.IsAllDay" CssClass="e-field" Label="All Day"></SfCheckBox>

                                        <SfCheckBox ID="@nameof(AppointmentData.TimeZone)" @bind-Checked="Appointment.TimeZone" CssClass="e-field" Label="Time Zone"></SfCheckBox>

                                    </td>

                                </tr>

                                @if (Appointment.TimeZone)

                                {

                                    <tr>

                                        <td colspan="4">

                                            <SfDropDownList TValue="string" ID="@nameof(AppointmentData.StartTimeZone)" CssClass="e-field" @bind-Value="Appointment.StartTimeZone" Placeholder="Start Time Zone" FloatLabelType="FloatLabelType.Always" TItem="DropDownData" DataSource="@TimezoneData">

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

                                            </SfDropDownList>

                                        </td>

                                        <td colspan="4">

                                            <SfDropDownList TValue="string" ID="@nameof(AppointmentData.EndTimeZone)" CssClass="e-field" @bind-Value="Appointment.EndTimeZone" Placeholder="End Time Zone" FloatLabelType="FloatLabelType.Always" TItem="DropDownData" DataSource="@TimezoneData">

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

                                            </SfDropDownList>

                                        </td>

                                    </tr>

                                }

                                <tr>

                                    <td colspan="8">

                                        <SfRecurrenceEditor CssClass="e-field" @bind-Value="Appointment.RecurrenceRule"></SfRecurrenceEditor>

                                    </td>

                                </tr>

                                <tr>

                                    <td colspan="8">

                                        <SfTextBox ID="@nameof(AppointmentData.Description)" CssClass="e-field e-input" Value="@Appointment.Description" Placeholder="Description" FloatLabelType="FloatLabelType.Always" Multiline="true"></SfTextBox>

                                    </td>

                                </tr>

                                <tr>

                                    <td colspan="8">

                                        @if (Appointment.IsAllDay)

                                        {

                                            <SfDatePicker ID="@nameof(AppointmentData.StartTime)" CssClass="e-field" TValue="DateTime?" @bind-Value="Appointment.StartTime" Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDatePicker>

                                        }

                                        else

                                        {

                                            <SfDateTimePicker ID="@nameof(AppointmentData.StartTime)" CssClass="e-field" TValue="DateTime?" @bind-Value="Appointment.StartTime" Placeholder="Start" FloatLabelType="FloatLabelType.Always"></SfDateTimePicker>

                                        }

                                    </td>

                                </tr>

                                <tr>

                                    <td colspan="8">

                                        @if (Appointment.IsAllDay)

                                        {

                                            <SfDatePicker ID="@nameof(AppointmentData.EndTime)" CssClass="e-field" TValue="DateTime?" @bind-Value="Appointment.EndTime" Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDatePicker>

                                        }

                                        else

                                        {

                                            <SfDateTimePicker ID="@nameof(AppointmentData.EndTime)" CssClass="e-field" TValue="DateTime?" @bind-Value="Appointment.EndTime" Placeholder="End" FloatLabelType="FloatLabelType.Always"></SfDateTimePicker>

                                        }

                                    </td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </ContentTemplate>

            </SplitterPane>

            <SplitterPane Size="60%" Min="30%">

                <ContentTemplate>

                    <div class="scheduler-section" style="padding: 10px;">

                        <SfButton @onclick="ToggleSchedulerVisibility" style="margin-bottom: 10px;">@(ShowScheduler ? "Hide Scheduler" : "Show Scheduler")</SfButton>

                        @if (ShowScheduler)

                        {

                            <SfSchedule TValue="AppointmentData" Height="100%" Width="100%" @bind-SelectedDate="@CurrentDate">

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

                                <ScheduleViews>

                                    <ScheduleView Option="View.Day"></ScheduleView>

                                    <ScheduleView Option="View.Week"></ScheduleView>

                                    <ScheduleView Option="View.WorkWeek"></ScheduleView>

                                    <ScheduleView Option="View.Month"></ScheduleView>

                                    <ScheduleView Option="View.Agenda"></ScheduleView>

                                </ScheduleViews>

                            </SfSchedule>

                        }

                        else

                        {

                            <p>Scheduler is hidden.</p>

                        }

                    </div>

                </ContentTemplate>

            </SplitterPane>

        </SplitterPanes>

    </SfSplitter>

</div>

@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 int? RecurrenceID { get; set; }

        public bool TimeZone { get; set; }

        public string StartTimeZone { get; set; }

        public string EndTimeZone { get; set; }

        public string EventType { get; set; }

    }

    public class DropDownData

    {

        public string Id { get; set; }

        public string Text { get; set; }

        public string Value { get; set; }

        public string Name { get; set; }

    }

    private AppointmentData Appointment { get; set; } = new AppointmentData();

    private DateTime CurrentDate { get; set; } = DateTime.Now;

    private List<AppointmentData> DataSource { get; set; } = new List<AppointmentData>();

    private bool ShowScheduler { get; set; } = true;

    public List<DropDownData> StatusData = new List<DropDownData> {

        new DropDownData() { Id = "1", Text = "New" },

        new DropDownData() { Id = "2", Text = "In Progress" },

        new DropDownData() { Id = "3", Text = "Completed" }

    };

    public List<DropDownData> TimezoneData = new List<DropDownData> {

        new DropDownData() { Name = "(UTC-12:00) International Date Line West", Value = "Etc/GMT+12" },

        new DropDownData() { Name = "(UTC-11:00) Pago Pago", Value = "Pacific/Pago_Pago" },

        new DropDownData() { Name = "(UTC-10:00) Hawaii", Value = "Pacific/Honolulu" },

        new DropDownData() { Name = "(UTC-09:00) Alaska", Value = "America/Anchorage" },

        new DropDownData() { Name = "(UTC-08:00) Pacific Time (US & Canada)", Value = "America/Los_Angeles" }

    };

    private void ToggleSchedulerVisibility()

    {

        ShowScheduler = !ShowScheduler;

    }

}

Don't hesitate to get in touch if you require further help or more information.
 

Regards,

Vijay

[Harshad]

Thanks Vijay!

I did not realize I could just use the custom-editor in any control as an open component and use it as I intended to. Your sample code made it very clear.  Also, your documentation now makes more sense to me.  Sorry for causing inconvenience to you.  Though, trust me, your time and efforts are not wasted!

Also, is there a way to customize  SfRecurrenceEditor template?  Say for example, if I want to always show only weekly repeat and hide the repeat dropdown. (that is just an example)

Thank you once again.

Harshad

[Saritha Sankar]

Hi Harshad,

Currently, it is not supported to customizing the template of the SfRecurrenceEditor. This limitation is due to the component's internal structure, which restricts deep customization beyond the available configuration options.

Don't hesitate to get in touch if you require further help or more information.

Regards,

Saritha S.