Customize Quick Info Popup

[Unknown]

Can you customize the quick info popup in the scheduler for Blazor?  Specifically, can you customize what information is included in the quick info popup?  Thanks

[Nevitha Ravi]

Hi Kevin, 

Greetings from Syncfusion Support. 

We can customize the quick info popup using QuickInfoTemplates, please refer the following sample 

https://www.syncfusion.com/downloads/support/forum/149209/ze/ScheduleQuickInfoTemplates-1657782261  

 

@using Syncfusion.EJ2.Blazor.Schedule 

 

<EjsSchedule TValue="AppointmentData" Height="550px" ModelType="@Model" SelectedDate="@(new DateTime(2019, 1, 31))"> 

    <ScheduleQuickInfoTemplates TemplateType="TemplateType.Event"> 

        <HeaderTemplate> 

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

                <div class="e-subject e-text-ellipsis" title="">@((context as TemplateArgs).Subject)</div> 

            </div> 

        </HeaderTemplate> 

        <ContentTemplate> 

            <div class="e-cell-content" style="width:inherit"> 

                <form class="e-schedule-form"> 

                    <div style="padding:10px"> 

                        <label>Time </label>: 

                        <span>@($"{(context as TemplateArgs).StartTime.ToUniversalTime().ToString("hh:mm tt")} - {(context as TemplateArgs).EndTime.ToUniversalTime().ToString("hh:mm tt")}")</span> 

                    </div> 

                    <div style="padding:10px"> 

                        <label>Description </label>: 

                        <span>@((context as TemplateArgs).Description)</span> 

                    </div> 

                </form> 

            </div> 

        </ContentTemplate> 

    </ScheduleQuickInfoTemplates> 

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

</EjsSchedule> 

@code{ 

    public class TemplateArgs 

    { 

        public string Subject { get; set; } 

        public DateTime StartTime { get; set; } 

        public DateTime EndTime { get; set; } 

        public string Description { get; set; } 

    } 

    public TemplateArgs Model = new TemplateArgs(); 

 

    List<AppointmentData> DataSource = new List<AppointmentData> { 

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2019, 1, 31, 9, 30, 0) , EndTime = new DateTime(2019, 1, 31, 11, 0, 0), Description = "Discussion"} 

    }; 

 

    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; } 

    } 

} 

Please try the sample and get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Unknown]

This is very useful and provided what I needed. Thank you!

[Nevitha Ravi]

Hi Kevin, 

Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you. 

Regards, 

Nevitha