Customize the popup that opens on more indicator

[omar errabaany]

Hi I want to edit the template of pop on more indicator
I already found this

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#how-to-customize-the-popup-that-opens-on-more-indicator
but it's not enough, I want Custom HTML CSS that I did for my own is there anyway to do it?

[Balasubramanian Sattanathan]

Hi Omar, 

Greetings from Syncfusion Support. 

We have analyzed your requirement “Customize the popup that opens on more indicator” at our end and let you know that we can customize the more indicator popup by using EventContainer type in the popupOpen event. Here, we can add our custom elements instead of the default popup. We have prepared a sample for adding the custom element in the popup which can be available from the below link 

https://stackblitz.com/edit/angular-schedule-more-popup-customization?file=app.component.ts 

onPopupOpen(args: PopupOpenEventArgs): void { 

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

    let instance: Internationalization = new Internationalization(); 

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

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

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

    // Creating custom element 

    if (!args.element.querySelector('.custom')) { 

      var div = document.createElement("div"); 

      div.classList.add('custom'); 

      div.innerHTML = "<img src='https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg'>"; 

      args.element.querySelector('.e-more-event-popup').insertBefore(div, args.element.querySelector('.e-more-event-content')); 

    } 

  } 

} 

Kindly refer to the above solution and let us know if this comes close to your requirement. If not, kindly share the requirement image to provide a solution. 

Regards, 

Balasubramanian S 

[omar errabaany]

Hi Balasubramanian

thank you for replaying 

actually what I wanted is a custom template for data that it showed this one

I have tried to add custom HTML Based on code you posted but it's not working it's just keep adding dom whenever I clicked show 

Here is the code that I worte

    onPopupOpen(args: any): void {

        console.log(args);

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

            const instance: Internationalization = new Internationalization();

            const date: string = instance.formatDate((<any>args.data).date, { skeleton: 'MMMEd' });

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

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

            const data = args.data.event;

            if (!args.element.querySelector('.custom')) {

                const div = document.createElement('div');

                div.classList.add('custom-popup');

                data.forEach(e => {

                    div.innerHTML =

                        '<div class="user-item">' +

                        '                <div class="header">' +

                        '                    <div class="icon">' +

                        '                        <span>' + this.getIconByName('user 1') + '</span>' +

                        '                    </div>' +

                        '                    User 1' +

                        '                </div>' +

                        '                <div class="tasks-list">' +

                        '                    <div class="item">' +

                        '                       <img class="icon" src="./assets/app/imgs/done.svg">' +

                        '                        <div class="name">' + e.Name + '<span>(Ouvrage 1)</span></div>' +

                        '                    </div>' +

                        '                </div>' +

                        '</div>';

                });

                args.element.querySelector('.e-more-event-popup').insertBefore(div, args.element.querySelector('.e-more-event-content'));

            }

        }

    }

[Balasubramanian Sattanathan]

Hi Omar, 

Thanks for the details. 

We have analyzed your code snippet and prepared a sample based on that using the below code snippet.  

https://stackblitz.com/edit/angular-schedule-more-popup-customization-rxyuh7?file=app.component.ts 

onPopupOpen(args: PopupOpenEventArgs): void { 

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

    (args.element.querySelector('.e-more-event-content') as any).style.display = 'none'; 

    const data = args.data.event; 

    if (!args.element.querySelector('.custom-popup')) { 

      const div = document.createElement('div'); 

      div.classList.add('custom-popup'); 

      data.forEach(e => { 

        div.innerHTML = div.innerHTML + 

          '<div class="user-item" style="padding-left: 15px;">' + 

          '                <div class="header" style="display: flex">' + 

          '                    <span class="e-icons e-resource"></span>' + 

          '                    <span class="user" style="padding-left: 10px;">' + e.User + '</span>' + 

          '                </div>' + 

          '                <div class="tasks-list">' + 

          '                    <div class="item" style="display: flex;align-items: center">' + 

          '                        <span class="e-icons e-tick"></span>' + 

          '                        <span class="name" style="padding-left: 10px;">' + e.Subject + '</span>' + 

          '                        <span style="padding-left: 10px;">(Ouvrage 1)</span>' + 

          '                    </div>' + 

          '                </div>' + 

          '</div>'; 

      }); 

      args.element.querySelector('.e-more-event-popup').appendChild(div); 

    } 

    (args.element.querySelector('.e-more-event-close') as any).onclick = this.clear; 

  } 

} 

Kindly refer to the above sample and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[omar errabaany]

Hello again 
How can I set the background color of that +1 plus based on event statue like when it was big:

I already have a script from this thread that change the text from +1 plus to only number 
https://www.syncfusion.com/forums/164987/customize-appointments-text

I wan to keep that script and also change the background as I said above,
and please it's has to be dynamic like normal event that was before,  and not fixed color for all events 

[Hareesh Balasubramanian]

Hi Omar, 

Thanks for the update. 

We have modified our previously updated sample based on your shared query “need to dynamically change the background color for more indicator” using dataBound event of our Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-more-event-text-scheduler-sample-vynaav?file=app.component.ts 

  public onDataBound(): void { 

    let moreEle: any = document.querySelectorAll('.e-more-indicator'); 

    if (moreEle.length > 0) { 

      for (let i = 0; i < moreEle.length; i++) { 

        let text = moreEle[i].innerText; 

        text = parseInt(text); 

        if (text == 1) { 

          moreEle[i].style.backgroundColor = '#4cf1e8'; 

        } else if (text >= 2 && text <= 5) { 

          moreEle[i].style.backgroundColor = '#b6edb6'; 

        } else { 

          moreEle[i].style.backgroundColor = '#ebb5e5'; 

        } 

      } 

    } 

  } 

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

We will be happy to assist you..! 

Regards, 

Hareesh 

[omar errabaany]

Hello thank you for answering

As I can see you didn't understand my problem

the color must be like the event for example 

in Project 1 in Steven the event color is Green I want that +1 more to be green to
same in Robert the event is orange so the +1 more have to be orange

I hope that I make it clear 

Thanks. ^-^

 

[Hareesh Balasubramanian]

Hi Omar, 

Sorry for the inconvenience caused. 

We have modified our previously updated sample based on your shared image using the dataBound event of our Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-more-event-text-scheduler-sample-f7ctj5?file=app.component.ts 

  public onDataBound(): void { 

    let moreEle: any = document.querySelectorAll('.e-more-indicator'); 

    if (moreEle.length > 0) { 

      for (let i = 0; i < moreEle.length; i++) { 

        let index = moreEle[i].getAttribute('data-group-index'); 

        let color = this.scheduleObj.getResourcesByIndex(index).resourceData 

          .color; 

        moreEle[i].style.backgroundColor = color; 

      } 

    } 

  } 

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

We will be happy to assist you..! 

Regards, 

Hareesh