Rendering a Resource Area Cell after an Event is added to the Resource lane

Question

When the calendar is loaded and rendered cellDidMount is called and the cell is rendered green or red this works fine. What I want to do is re-render the cell a different colour when an event is added to the recource lane some time later. How can I call this cellDidMount for a partiular resouce or do somethign else after an event function like select or dateClick is called and a new event is added.

resourceAreaColumns: [
    {
        headerContent: 'Resource',
        field: 'title'
    },
    {
        headerContent: 'Tasks',
        field: 'tasks',
        width: 50,
        headerDidMount: function(arg) {
            arg.el.style.textAlign = "center";
        },
        cellDidMount: function (arg) {
            var parentId = arg.resource._resource.parentId;
            var tasks = arg.resource._resource.extendedProps.tasks;
            if (parentId != "" && tasks == 0)
                arg.el.style.backgroundColor = 'red';
            else
                arg.el.style.backgroundColor = 'green';
            arg.el.style.textAlign = "center";
        }
    }
],

Are you referring to fullCalendar 5? Or another version? It would help if we knew — ADyson, May 11 '20 at 14:11
Either way I would guess if you [refetch the resources](https://fullcalendar.io/docs/v5/refetchResources) it will probably cause them to re-render, which in turn will run the rendering hooks — ADyson, May 11 '20 at 14:13
Sorry yes v5.2 but refetch / re-render does not re-run the hooks. From the doc cellDidMount - called right after the was added to the DOM See fullcalendar.io/docs/v5/resourceAreaColumns I am just looking at cellContent which is a hook but cant work out how to do the above from this routine — Yidna, May 13 '20 at 07:37
Hm did you specify your resources as a static list, or as data which can be fetched from a URL? If you supplied a static list, then refetch will not do anything. As far as I can see there is no other way to force the resources to re-render. Perhaps you could raise a feature request about it, so you can re-render from a static list? Either that or you'll have to figure out a way to find the correct `` manually in the DOM — ADyson, May 13 '20 at 08:17

score 0 · Answer 1 · answered May 13 '20 at 19:29

I worked out that cellClassNames can return a class and change the color

cellClassNames: function (arg) {
    var args = arg.resource._resource.ui.classNames;
    var parentId = arg.resource._resource.parentId;
    var tasks = arg.resource._resource.extendedProps.tasks;
    if (parentId != "" && tasks == 0) 
        return ['cellcolorred']                               
    else
        return ['cellcolorgreen']                              
}

Rendering a Resource Area Cell after an Event is added to the Resource lane

1 Answers1