Customize quick info window of an existing event

[Gregory Perozzo]

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]

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/aspnetcore/documentation/schedule/editor-template/?no-cache=1#customizing-quick-popups
 

https://ej2.syncfusion.com/javascript/documentation/schedule/editor-template/?no-cache=1#customizing-quick-popups

Regards,

Karthigeyan

[Gregory Perozzo]

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]

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. 

https://stackblitz.com/edit/qgbkw1?file=index.html 

 

<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]

Hello Karthigeyan,

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

Have a nice day!

[Karthigeyan Krishnamurthi]

Hi Gregory,  

 

Thanks for your update. 

 

Regards, 

Karthigeyan 

[Karthigeyan Krishnamurthi]

Hi Gregory,  

 

Thanks for your update. 

 

Regards, 

Karthigeyan