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
close icon

Customize quick info window of an existing event

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.

6 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team 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



GP Gregory Perozzo 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?


KK Karthigeyan Krishnamurthi Syncfusion Team 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 
 
 



GP Gregory Perozzo March 6, 2019 12:27 PM UTC

Hello Karthigeyan,

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

Have a nice day!


KK Karthigeyan Krishnamurthi Syncfusion Team March 7, 2019 03:44 AM UTC

Hi Gregory,  
 
Thanks for your update. 
 
Regards, 
Karthigeyan 



KK Karthigeyan Krishnamurthi Syncfusion Team March 7, 2019 03:44 AM UTC

Hi Gregory,  
 
Thanks for your update. 
 
Regards, 
Karthigeyan 


Loader.
Live Chat Icon For mobile
Up arrow icon