How add color in other columns in scheduler agenda view like event.

[Brijesh Pandey]

How add color in other columns in scheduler agenda view like event or how inject own css in column data.

Code

private queryCellInfo(args: any) {

        if (args.requestType === 'agendacells'

            && $(args.element).hasClass('e-timecolumn')) {

            $(args.element).hide();

        }

        if (args.requestType === 'agendacells' && args.cellType === 'agendaeventcell') {

            let dataDesign = "

" +

                "" +

                args.appointment.Status +

                "

" +

                args.appointment.ResponsibleUser +

                "

" +

                args.appointment.State +

                "

" +

                args.appointment.Description +

                '

';

            $(args.element).after(dataDesign);

        }

        if (args.requestType === 'agendacells'

            && args.cellType === 'agendaheadercells'

            && $(args.element).hasClass('e-eventcolumn')

            && $('.e-headercells.statuscolumn').length === 0) {

            let headerDesign =

                "

" +

                this.localization.translate('status') + '

' +

                "

" +

                this.localization.translate('property-tax/responsible-person') + '

' +

                "

" +

                this.localization.translate('state') + '

' +

                "

" +

                this.localization.translate('details') + '

';

            args.element.after(headerDesign);

        }

    }

[Nevitha Ravi]

Hi Brijesh, 

Thank you for contacting Syncfusion Support. 

We have prepared a sample to customize the background color of agenda view columns which can be viewed from the below link. 

http://jsplayground.syncfusion.com/bcvno2sa 

<Code> 

     function onQueryCellinfo(args) { 

          if (args.requestType === 'agendacells' && args.cellType === 'agendaheadercells') { 

             args.element.css("background-color", "#faa41a"); //to add color in header 

          } 

          if (args.requestType === 'agendacells' && $(args.element).hasClass('e-timecolumn')) { 

             $(args.element).hide(); 

          } 

          if (args.requestType === 'agendacells' && args.cellType === 'agendaeventcell') { 

              args.element.css("background-color", "#ffe9cc");  //to add color in event column 

          } 

          if (args.requestType === 'agendacells' && args.cellType === 'agendadatecell') { 

              args.element.css("background-color", "#dcf1f8");  //to add color in date column   

          } 

          if (args.requestType === 'agendacells' && args.cellType === 'agendaresourcecell') { 

              args.element.css("background-color", "#ebf1c4"); //to add color in resource column   

          } 

     } 

</Code> 

Regards, 

Nevitha. 

[Brijesh Pandey]

Thanks.

[Nevitha Ravi]

Hi Brijesh, 

We are happy to hear from you. Kindly let us know if you need any assistance. 

Regards, 

Nevitha.