Customize the popup menu for Scheduler

[Florin Talos]

Hello,

Is there any possibility to customize the popup menu when clicking on an event ? Instead of heaving Edit and Delete I would like to add my own buttons. For example a confirmation button with a custom action.

Best regards,

Florin   

[Vengatesh Maniraj]

Hi Florin, 

Greetings from Syncfusion Support. 

We can customize the popup when clicking on the events by making use of the QuickInfoTemplate property. For more reference, please refer to the below UG documentation and our demo sample.  

UG: https://blazor.syncfusion.com/documentation/scheduler/editor-template/#customizing-quick-popup-on-event 

Sample: https://blazor.syncfusion.com/demos/scheduler/quick-info-template?theme=bootstrap4 

Kindly check the above links and get back to us if you need any further assistance.  

Regards, 

Vengatesh  

[Florin Talos]

Hello,

Thank you for the example. I was trying to implemented but I'm keep on getting the JS error message from below. I'm trying to create a component (code under the error message) loaded in a TabItem. 

 

syncfusion-blazor.min.js:10 

Uncaught TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at t.getCultureValues (syncfusion-blazor.min.js:10)

    at t.createContentHeader (syncfusion-blazor.min.js:10)

    at t.createContent (syncfusion-blazor.min.js:10)

    at t.createContent (syncfusion-blazor.min.js:10)

    at t.render (syncfusion-blazor.min.js:10)

    at t.render (syncfusion-blazor.min.js:10)

    at t.disabledDates (:44308/_content/Syncfusion.Blazor/scripts/datepicker-bc339d.min.js:1)

    at t.updateInput (:44308/_content/Syncfusion.Blazor/scripts/datepicker-bc339d.min.js:1)

    at t.onPropertyChanged (:44308/_content/Syncfusion.Blazor/scripts/datepicker-bc339d.min.js:1)

Code:

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Notifications

@using Kps.Erm.UI.Services

@inject ISessionsDataService SessionsDataService

@inject ITrialsDataService TrialsDataService

<SfSchedule TValue="SessionDto" @ref="ScheduleObj" CssClass="quick-info" Width="100%" Height="650px" SelectedDate="@(DateTime.Now)" CurrentView="View.Month">

    <ScheduleViews>

        <ScheduleView Option="View.Week" StartHour="07:00" EndHour="18:00" DisplayName="Weeks" Interval="1"></ScheduleView>

        <ScheduleView Option="View.Month" DisplayName="Month" Interval="1"></ScheduleView>

    </ScheduleViews>

    <ScheduleEventSettings TValue="SessionDto" AllowAdding="false" AllowDeleting="false" AllowEditing="false" DataSource="@Sessions">

        <ScheduleField Id="SessionId">

            <FieldSubject Name="Description"></FieldSubject>

            <FieldStartTime Name="SessionStart"></FieldStartTime>

            <FieldEndTime Name="SessionEnd"></FieldEndTime>

        </ScheduleField>

    </ScheduleEventSettings>

</SfSchedule>

    @code{

        [Parameter]

        public int TrialRequestId { get; set; }

        SfSchedule<SessionDto> ScheduleObj;

        private IReadOnlyList<SessionDto> Sessions { get; set; }

        protected override async Task OnInitializedAsync()

        {

            Sessions = await SessionsDataService.GetAllSessions();

        }

    }

Thank you very much

Florin

[Vengatesh Maniraj]

Hi Florin, 

Thanks for the update. 

We have prepared the sample to customize the popup when clicking on the event and also we have added our own button in the customized popup to perform the own action. But we are not replicate the issue as you mentioned. Please refer to the below code snippet. 

<SfSchedule TValue="AppointmentData" @ref="SheduleRef" CssClass="quick-info" Width="100%" Height="650px" SelectedDate="@(new DateTime(2020, 1, 9))"> 

    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Event"> 

        <HeaderTemplate> 

            <div class="quick-info-header"> 

                <div class="quick-info-header-content" style="@("background:" + this.ResourceData.Where(item => item.Id.Equals((context as AppointmentData).RoomId)).FirstOrDefault().Color + "; color: #FFFFFF;")"> 

                    <div class="quick-info-title"> 

                        Appointment Details 

                    </div> 

                    <div class="duration-text">@(GetEventDetails((context as AppointmentData)))</div> 

                </div> 

            </div> 

        </HeaderTemplate> 

        <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-subject-wrap"> 

                        <label>Type</label>: 

                        <span>@((Data.RoomId != 0) ? ResourceData.Where(item => item.Id.Equals(Data.RoomId)).FirstOrDefault().Name : "")</span> 

                    </div> 

                    <div class="notes-wrap"> 

                        <label>Notes</label>: 

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

                    </div> 

                </div> 

            } 

        </ContentTemplate> 

        <FooterTemplate> 

            <div class="event-footer"> 

                <SfButton IsPrimary="true" Content="More Details" OnClick="@(e => OnMoreDetailsClick(e, context as AppointmentData))"></SfButton> 

            </div> 

        </FooterTemplate> 

    </ScheduleQuickInfoTemplates> 

    <ScheduleViews> 

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

    </ScheduleViews> 

    <ScheduleResources> 

        <ScheduleResource TValue="RoomsData" DataSource="@ResourceData" Field="RoomId" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="false"></ScheduleResource> 

    </ScheduleResources> 

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

</SfSchedule> 

    private async void OnMoreDetailsClick(MouseEventArgs args, AppointmentData data) 

    { 

        await SheduleRef.CloseQuickInfoPopup(); 

        AppointmentData eventData = new AppointmentData 

        { 

            Id = data.Id, 

            Subject = data.Subject, 

            Location = data.Location, 

            Description = data.Description, 

            StartTime = data.StartTime, 

            EndTime = data.EndTime, 

            IsAllDay = data.IsAllDay, 

            RoomId = data.RoomId, 

            RecurrenceException = data.RecurrenceException, 

            RecurrenceID = data.RecurrenceID, 

            RecurrenceRule = data.RecurrenceRule 

        }; 

        await SheduleRef.OpenEditor(eventData, CurrentAction.Save, true); 

    } 

Sample: https://www.syncfusion.com/downloads/support/forum/157168/ze/QuickInfoTemplate694587340  

Kindly try the above sample and if you still face the problem kindly replicate the issue in the above to serve you better. 

Regards, 

Vengatesh  

[Florin Talos]

Thank you very much for your example, works great. If is not too much to ask you for an example of creating a new object different from the event displayed in the scheduler (ex a request for a session displayed as schedule event) using a custom editing template. I found some sample of custom event edit template but using a different object gives me an error. In the provided example, on the event of the "ScheduleQuickInfoTemplates" , OnMoreDetailsClick would open for edit in a custom form an object of type NewTrialRequestDto (below the class definition). Should the custom template contain an EditForm with OnInvalidSubmit or the submit action is handled by a Scheduler event ? 

 

<FooterTemplate>

                <div class="event-footer">

                    <SfButton IsPrimary="true" Content="More Details" OnClick="@(e => OnMoreDetailsClick(e, new NewTrialRequestDto()))"></SfButton>

                </div>

            </FooterTemplate>

 public class NewTrialRequestDto

    {

        [Required]

        public string FirstName { get; set; }

        [Required]

        public string LastName { get; set; }

        [Required]

        public string Email { get; set; }

        [Required]

        public string Phone { get; set; }

        [Required]

        public string Gender { get; set; }

        public DateTime? Birthdate { get; set; }

        public string City { get; }

        public string StreetName { get; }

        public string StreetNumber { get; }

        public string PostalCode { get; }

        public string Province { get; }

        public string Country { get; }

    }

Best Regards,

Florin

[Vengatesh Maniraj]

Hi Florin, 

Thanks for the update. 

We have validated your query and we suspect that your requirement is to validate the custom fields in the custom template while submitting it. By default in Blazor Scheduler field validation is available for built-in fields, if in case you want to validate a custom field you can go with custom editor and achieve validation using Data Annotations. For more reference, kindly to refer the below UG link that helps you to achieve your requirement. 

UG: https://blazor.syncfusion.com/documentation/scheduler/how-to/custom-editor-with-validation/ 

Kindly check the above link and get back to us if you need any further assistance. 

Regards, 

Vengatesh