How to Customize Quick Popup in ReadOnly Mode in Blazor Scheduler?

When the readOnly property is set to true in the Blazor Scheduler, the edit event quick info popup will still be displayed when a user clicks on an appointment. To remove the footer buttons from this quick info popup, you can override the default schedule CSS styles. Follow the code snippet and example below to implement this solution effectively.

@using Syncfusion.Blazor.Schedule

<SfSchedule CssClass="customize-schedule"  TValue="AppointmentData" Readonly="true" Height="550px" @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>

@code{
    DateTime CurrentDate = new DateTime(2020, 1, 31);
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 11, 0, 0) }
    };
    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>
    .customize-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-footer {        display: none;     }
</style>

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


Output Screenshot: