Problem with header color on quick info

[Simón]

Hello there...

My problem is, i change the appointment color with other tutorial on this post, but now, the header of quick info shows a blue bar on it. Is there any way to change it?

<Code> To change color and render it.

oneventRendered(args:EventRenderedArgs):void{

      

        let categoryColor: string = args.data.CategoryColor as string;

        args.element.style.backgroundColor = categoryColor

        args.element.style.borderColor = categoryColor

  }

  onPopupOpen(args: PopupOpenEventArgs): void {

  

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

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

        let row: HTMLElement = createElement('div', { className: 'custom-field-row' });

        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');

        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));

        let container: HTMLElement = createElement('div', { className: 'custom-field-container' });

        let inputEle: HTMLInputElement = createElement('input', {

          className: 'e-field', attrs: { name: 'CategoryColor' }

        }) as HTMLInputElement;

        container.appendChild(inputEle);

        row.appendChild(container);

        let drowDownList: DropDownList = new DropDownList({

          dataSource: [

            { text: 'Azul', value: '#2271B3' },

            { text: 'Azul Claro', value: '#ADD8E6' },

            { text: 'Rojo', value: '#FF6961' },

            { text: 'Gris', value: '#696969' },

            { text: 'Cafe', value: '#804000' },

            { text: 'Rosa', value:'#DB7093'},

            { text: 'Amarillo', value:'#FFD700'},

            

          ],

          fields: { text: 'text', value: 'value' },

          value: (args.data as { [key: string]: Object }).CategoryColor as string,

          floatLabelType: 'Always', placeholder: 'Selecciona un color...'

        });

        drowDownList.appendTo(inputEle);

        inputEle.setAttribute('name', 'CategoryColor');

      }

    }

  }

</Code>

I will adjunt photos about the problem...

Attachment: Sin_título_472ffdfc.rar

[Hareesh Balasubramanian]

Hi Simón, 

Greetings from Syncfusion Support..! 

We have prepared a sample to reproduce your shared image but unfortunately, we were unable to reproduce your reported problem and the sample can be viewed from the following link. We have tried the following ways to replicate the issue at our end. 

1. We have used the latest (18.4.47v) package version for the schedule component.
2. And we have created the below sample with the same customization shared in your snippets (Additionally field as Dropdown component and category color for the events).
3. And also we have ensured your problem by applying various themes (Fabric, Bootstrap and Bootstrap V4) to the Scheduler.

Sample: https://stackblitz.com/edit/angular-scheduler-additional-field-sample?file=app.component.html  

And for further reference, we have taken a screenshot of the above sample, 

 

Note: We suspect that you may override the CSS for the quick popup window or use quick info template that could be the reason for your reported problem. 

Kindly refer to the above sample, if the issue persist still share the below details to validate your reported issue and serve you better. 

 

• Code snippets of quick info template or any CSS used in your sample.
• Whether the issue occurs in any specific Scheduler package.
• If possible, replicate the issue in the above sample.
• Issue replicating sample(if possible) in order to validate further at our end.

We will happy to assist you..! 

Regards, 

Hareesh