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

Question

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 · Answer

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

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

Regards, Nevitha.

Brijesh Pandey · Answer

Thanks.

Nevitha Ravi · Answer

Hi Brijesh, 

We are happy to hear from you. Kindly let us know if you need any assistance. 

Regards, 
Nevitha.