We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize quick info window of an existing event

Thread ID:

Created:

Updated:

Platform:

Replies:

143086 Mar 4,2019 02:39 PM UTC Oct 17,2019 06:20 PM UTC ASP.NET Core - EJ 2 6
loading
Tags: Scheduler
Gregory Perozzo
Asked On March 4, 2019 02:43 PM UTC

Hello,

I need to customize the quick info window to add more information and change header color.

How can I add more info below data field and change header color?



The design and layout I want to keep. Just need to add the modifications said above.

Thank you very much.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 5, 2019 03:57 AM UTC

Hi Gregory,

Thank you for contacting Syncfusion support. 

 
Quick popup can be customized using template option and kindly refer the below links. 
https://ej2.syncfusion.com/javascript/documentation/schedule/editor-template/?no-cache=1#customizing-quick-popups


Regards,
Karthigeyan


Gregory Perozzo
Replied On March 5, 2019 05:37 PM UTC

Hello Karthigeyan, how are you?

This is perfect. Exactly what I needed. Thank you!

I have another doubt. Can I add more icons beside the ones that already exist?

For example, I need a car icon and Syncfusion doesn't have one.

Can you help me?

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 6, 2019 11:44 AM UTC

Hi Gregory, 
 
I am great and I hope you will be doing good. 
 
We can display the icon in quick popup using template and for the sample prepared the below sample. 
 
<script id="footerTemplate" type="text/x-template"> 
        <div> 
            ${if (elementType === 'cell')} 
            <div class="e-cell-footer"> 
                <button class="e-event-details" title="Additional Details">Additional Details</button> 
        <img src="https://ej2.syncfusion.com/javascript/demos/src/schedule/images/environment-day.svg" alt="flower" /> 
                <button class="e-event-create" title="Add">Add</button> 
            </div> 
            ${else} 
            <div class="e-event-footer"> 
                <button class="e-event-edit" title="Edit">Edit</button> 
        <img src="https://ej2.syncfusion.com/javascript/demos/src/schedule/images/environment-day.svg" alt="flower" /> 
                <button class="e-event-delete" title="Delete">Delete</button> 
            </div> 
            ${/if} 
        </div> 
    </script> 
 
Regards, 
Karthigeyan 
 
 


Gregory Perozzo
Replied On March 6, 2019 12:27 PM UTC

Hello Karthigeyan,

That's perfect. Thank you very much for your help!

Have a nice day!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 7, 2019 03:44 AM UTC

Hi Gregory,  
 
Thanks for your update. 
 
Regards, 
Karthigeyan 


Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 7, 2019 03:44 AM UTC

Hi Gregory,  
 
Thanks for your update. 
 
Regards, 
Karthigeyan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon