how to remove edit and delete icon/button from appointment popup

[mark wheeler]

I don't want to allow users to edit or delete and appointment in a scheduler.  When a user clicks an appointment, a popup window appears but it has an edit and delete button at the top, I want to remove these, Ive used a template (as below) but I cant figure out how to remove these buttons

<ContentTemplate>

    @{

        AppointmentDataDto Data = context as AppointmentDataDto;

        <div class="event-content">

            <div class="meeting-type-wrap">

                <label>Artist</label>:

                <span>@(Data!.Subject)</span>

            </div>

            <div class="meeting-subject-wrap">

                <label>Venue</label>:

                <span>@(Data.Location)</span>

            </div>

            <div class="meeting-subject-wrap">

                <label>Date Of Performance</label>:

                <span>@(Data.StartTime)</span>

            </div>

            <div class="notes-wrap">

                <label>Playing Times</label>:

                <span>@(Data.PlayingTimes)</span>

            </div>

            <div class="notes-wrap">

                <label>Performance Details</label>:

                <span>@(Data.Description)</span>

            </div>

        </div>

    }

</ContentTemplate>

I also have these properties set, but the buttons are still showing

AllowAdding="false" AllowDeleting="false" AllowEditing="false"

[Vijay Ravi]

Hi Mark Wheeler,
 

Based on your requirement, We prepare the Blazor scheduler sample with using a template for quick info content. We suggest you use the below shared styles to remove the edit button and delete button. Refer the below shared sample for your reference.

[index.razor]

 

@using Syncfusion.Blazor.Schedule

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

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

       <ScheduleQuickInfoTemplates TemplateType="TemplateType.Event">

        <ContentTemplate>

            @{

                AppointmentData Data = context as AppointmentData;

                <div class="event-content">

                    <div class="meeting-type-wrap">

                        <label>Subject</label>:

                        <span>@(Data.Subject)</span>

                    </div>

                    <div class="meeting-type-wrap">

                        <label>Venue</label>:

                        <span>@(Data.Location)</span>

                    </div>

                    <div class="meeting-type-wrap">

                        <label>StartTime</label>:

                        <span>@(Data.StartTime)</span>

                    </div>

                    <div class="meeting-type-wrap">

                        <label>EndTime</label>:

                        <span>@(Data.EndTime)</span>

                    </div>

   

                    <div class="notes-wrap">

                        <label>Notes</label>:

                        <span>@(Data.Description)</span>

                    </div>

                </div>

            }

        </ContentTemplate>

    </ScheduleQuickInfoTemplates>

</SfSchedule>

@code{

    DateTime CurrentDate = new DateTime(2020, 3, 10);

   

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 3, 10, 9, 30, 0) , EndTime = new DateTime(2020, 3, 10, 12, 0, 0), Location = "India", Description="Meeting" }

    };

  }

<style>

    .e-quick-popup-wrapper .e-event-edit, .e-quick-popup-wrapper .e-event-delete {

    display: none;

}

</style>

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

Regards,

Vijay

[mark wheeler]

that doesnt work, this is my calendar

<SfSchedule @ref="AvailabilityScheduleRef" TValue="AppointmentDataDto" Height="auto" Width="auto" @bind-SelectedDate="@CurrentDate">

    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Event">

        <ContentTemplate>

            @{

                AppointmentDataDto Data = context as AppointmentDataDto;

                <div class="event-content">

                    <div class="meeting-type-wrap">

                        <label>Artist</label>:

                        <span>@(Data!.Subject)</span>

                    </div>

                    <div class="meeting-type-wrap">

                        <label>Venue</label>:

                        <span>@(Data.Location)</span>

                    </div>

                    <div class="meeting-type-wrap">

                        <label>StartTime</label>:

                        <span>@(Data.StartTime)</span>

                    </div>

                    <div class="meeting-type-wrap">

                        <label>EndTime</label>:

                        <span>@(Data.EndTime)</span>

                    </div>

                    <div class="notes-wrap">

                        <label>Notes</label>:

                        <span>@(Data.Description)</span>

                    </div>

                </div>

            }

        </ContentTemplate>

    </ScheduleQuickInfoTemplates>

    <ScheduleViews>

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

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

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

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

    </ScheduleViews>

    <ScheduleEvents TValue="AppointmentDataDto" EventRendered="OnEventRendered"></ScheduleEvents>

    <ScheduleEventSettings TValue="AppointmentDataDto" AllowAdding="false" AllowDeleting="false" AllowEditing="false">

        <SfDataManager AdaptorInstance="@typeof(AppointmentDataAdaptor)" Adaptor="Adaptors.CustomAdaptor">

        </SfDataManager>

    </ScheduleEventSettings>

</SfSchedule>

and the styling

<style>

    .e-quick-popup-wrapper .e-event-edit, .e-quick-popup-wrapper .e-event-delete {

        display: none;

    }

</style>

Attachment: calendarpopup_efd4cf73.zip

[Vijay Ravi]

Hi Mark, 

You need to override the default schedule CSS styles to remove the edit and delete button or icons in edit event popup, as shown in the CSS styles below. Refer to the shared sample for your reference.

[index.razor]

<style>
.e-quick-popup-wrapper .e-event-edit, .e-quick-popup-wrapper .e-event-delete {

    display: none;

}
 

.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-edit-icon,

.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {

     display: none;

}

</style>

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

Output screenshot:

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

Regards,

Vijay

[mark wheeler]

Thats much better but its still not right, there is an 'invisible' button showing, you can see a sort of outliner and if the mouse hovers over it, it says 'Edit'

see attached screenshot.

This is the html on the page thats causing the problem, how do I remove or disable it ?

<button title="Edit" class="e-control e-btn e-lib e-edit e-flat e-round e-small e-icon-btn" disabled="" _bl_1e606b4f-a816-4dbc-ae4a-9919ea1b64e5=""><span class="e-icons e-edit-icon e-btn-icon"></span></button>

Attachment: Screenshot_20240829_161440_3c76f1e0.zip

[Vijay Ravi]

Hi Mark Wheeler, 

Sorry for the inconvenience. The styles we previously shared should have removed the edit and delete icons. As a result, when hovering over the area, the tooltip text is displayed. Please use the below shared styles to hide the edit and delete icons while opening the edit popup.

[index.razor]

<style>

.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-edit,

.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete {

    display: none;

}

</style>

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

Output screenshot:

Regards,

Vijay

[mark wheeler]

That worked perfectly, thank you 

[Vijay Ravi]

Hi Mark Wheeler,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

Regards,

Vijay