Customize Quick Info Popup

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

3 Replies

NR Nevitha Ravi Syncfusion Team November 19, 2019 01:20 PM UTC

Hi Kevin, 

Greetings from Syncfusion Support. 

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

 
@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 



UN Unknown November 19, 2019 03:53 PM UTC

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


NR Nevitha Ravi Syncfusion Team November 20, 2019 05:51 AM UTC

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 


Loader.
Up arrow icon