dayRender not working like resourceRender

Im using @fullcalendar/angular and ‘@fullcalendar/core’. And dayRender is not working for me. it doesnt matter if I console.log(event) or try to manipulate te object by giving it a new backgroundcolor. eventClick, datesRender and resourcerender ARE working like I would expect dayRender to work.

<full-calendar 
.......
[events]="events"
`(eventClick)="eventClick($event)"`
(datesRender)="datesRender($event)"
(dayRender)="dayRender($event)"
(resourceRender)="resourceRender($event)"
>
</full-calendar>

dayRender(model: any) {
    model.el.style.backgroundColor = 'blue';
    console.log(model);
}

 resourceRender(model: any) {
   model.el.style.backgroundColor = 'blue';
   console.log(model);
}

I’m using the resourceTimelinePlugin plugins: [bootstrap, resourceTimelinePlugin, interactionPlugin]

[therichpostajay]

Try this: dayCellContent : { html: ‘Your Text’ },

This helps to add html like dayrender.

THANKS

[amirul1000]

ngAfterViewInit(){ // Your CSS as text var styles = .fc td, .fc th { vertical-align: top; padding: 0; height: 100px; } a{ color:#3d1cba; }

let styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);


let arrTD = document.querySelectorAll('td.fc-timeline-slot');
let arrTR= document.querySelectorAll('td.fc-timeline-lane.fc-resource');
let arrInject= document.querySelectorAll('td.fc-timeline-lane.fc-resource>div.fc-timeline-lane-frame');
console.log(arrTR);

let k=-1;
arrTR.forEach(eachTR => {
    let i=1;
    let str = '';
    k++;

    let data_resource_id= eachTR.getAttribute('data-resource-id');
    console.log(data_resource_id);

    arrTD.forEach(eachTD => {          
        let  k=100*(i-1);
        i=i+1;
        let data_date= eachTD.getAttribute('data-date');
        console.log(data_date);

        let data_resource_id= eachTR.getAttribute('data-resource-id'); 
        console.log(data_resource_id);

        str = str + '<span data-date="'+data_date+'" data-resource-id="'+data_resource_id+'" class="plus_icon" style="position:relative;top: 0px; left: '+k+'px !important;width:500px;height:500px;z-index:3;-moz-border-radius:100px;border:1px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff;">+</span>';          
  
     
  });
    arrInject[k].innerHTML=str;

});


let elementList = this.elRef.nativeElement.querySelectorAll('span.plus_icon');
for(let i=0;i<elementList.length;i++){   
 elementList[i].addEventListener('click', this.plusClick.bind(this));
}

}