How to personalize this view

[Brandon]

Hi, I want to personalize this popup. The one that opens when you click in "1 more" from the schedule calendar. 

Thanks! 

[Praveenkumar Narasimhanaidu]

Hi Brandon, 

  

Greetings from Syncfusion support..! 

  

We have validated your requirement “How to personalize more event popup view” at our end and you can achieve it with the help of popupOpen event. For more information, please refer following documentation link. 

UG: https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#how-to-customize-the-popup-that-opens-on-more-indicator 

  

App.jsx 

  onPopupOpen(args) { 

        if (args.type === 'EventContainer') { 

            let instance = new Internationalization(); 

            let date = instance.formatDate(args.data.date, { skeleton: 'MMMEd' }); 

            (args.element.querySelector('.e-header-date')).innerText = date; 

            (args.element.querySelector('.e-header-day')).innerText = 'Event count: ' + args.data.event.length; 

        } 

    } 

  

Kindly try the above solution and get back to us if you need any further assistance on this. 

  

Regards, 

Praveenkumar 

[Brandon]

Thank you! My question is more focused on how to change the blue background color and personalized it in the  more event popup view.

Thanks! 

[Praveenkumar Narasimhanaidu]

Hi Brandon, 

Thanks for your update. 

We have validated your requirement “how to change the blue background color and personalized it in the more event popup view” at our end and let you know that with the help of below CSS you can customize more event popup. We have also prepared a sample for your reference which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/ej2-react-scheduler-customizing-more-event-popup?file=index.html 

Index.html 

<style> 

        /* customize the more event popup appointment */ 

        .e-more-popup-wrapper .e-appointment { 

            background: rebeccapurple ;   

          } 

        /* customize the more event popup header */ 

        .e-more-popup-wrapper .e-more-event-header { 

            height: 68px; 

            background: whitesmoke; 

        } 

        /* customize the whole more event popup */ 

        .e-more-popup-wrapper { 

            width: 300px; 

        } 

    </style> 

Also if you want to customize the appointments within more popup you can use event template which is applicable for the appointments within more popup. 

UG: https://ej2.syncfusion.com/react/documentation/schedule/appointments/#using-template 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar