Customize popup when showing multiple events

[À la mode Clothing Outlet]

Hi. When having more than one event in the same timeslot there is this default popup.

How do I customize this popup?

[Ashokkumar Karuppasamy]

Hi À la mode Clothing Outlet,

You can use the schedule OnPopupOpen event to identify the type as EventContainer. If the type is EventContainer, you can customize the moreEvent popup according to your requirements. We have provided a code snippet and a demonstration of the solution for your reference. Please try it out, and feel free to reach out if you need any further assistance.

Sample: https://blazorplayground.syncfusion.com/rZLINshWqLMXEaNz

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

 

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

    <ScheduleEvents TValue="AppointmentData" OnPopupOpen="OnPopupOpen"></ScheduleEvents>

    <ScheduleEventSettings DataSource="@DataSource">

    </ScheduleEventSettings>

    <ScheduleViews>

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

    </ScheduleViews>

</SfSchedule>

<SfDialog Width="335px" @bind-Visible="Visibility" ShowCloseIcon="true" >

    <DialogTemplates>

        <Content>

            @if (SelectedEvents != null)

            {

                @foreach (var evt in SelectedEvents)

                {

                    <div>

                        <p><b>Subject:</b> @evt.Subject</p>

                        <p><b>Start Time:</b> @evt.StartTime</p>

                        <p><b>End Time:</b> @evt.EndTime</p>

                        <hr />

                    </div>

                }

            }

        </Content>

    </DialogTemplates>

    <DialogEvents Closed="@DialogClose"></DialogEvents>

    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>

</SfDialog>

 

@code {

    DateTime CurrentDate = new DateTime(2023, 1, 9);

    private bool Visibility { get; set; } = false;

    private bool ShowButton { get; set; } = false;

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

    private void DialogClose(Object args)

    {

        Visibility = false;

    }

    public void OnPopupOpen(PopupOpenEventArgs<AppointmentData> args)

    {

        if (args.Type == PopupType.EventContainer)

        {

            SelectedEvents = args.DataCollection;

            args.Cancel = true;

            Visibility = true;

        }

    }

 

If you need any more help or further guidance, feel free to let me know, and I’ll do my best to assist you.

Regards,
Ashok

[À la mode Clothing Outlet]

Instead of having a dialog, can't i edit the already existing EventContainer popup?

[Ashokkumar Karuppasamy]

Hi À la mode Clothing Outle,

Currently, there is no built-in option available. We suggest that the previously provided solution is the only option to address this requirement. Please try it out and let us know if you need any further assistance.

Regards,

Ashok