【问题标题】:Rendering a Resource Area Cell after an Event is added to the Resource lane将事件添加到资源通道后渲染资源区域单元
【发布时间】:2020-05-11 08:17:14
【问题描述】:

当日历被加载并渲染时,cellDidMount 被调用并且单元格被渲染为绿色或红色,这可以正常工作。我想要做的是在一段时间后将事件添加到资源通道时将单元格重新渲染为不同的颜色。如何在调用 select 或 dateClick 等事件函数并添加新事件后调用此 cellDidMount 以获得特定资源或执行其他操作。

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";
        }
    }
],

【问题讨论】:

  • 你指的是fullCalendar 5吗?还是其他版本?如果我们知道会有所帮助
  • 不管怎样,我猜如果你 refetch the resources 它可能会导致它们重新渲染,这反过来会运行渲染钩子
  • 抱歉 v5.2 但重新获取/重新渲染不会重新运行挂钩。从文档 cellDidMount - 在将 添加到 DOM 后立即调用 请参阅 fullcalendar.io/docs/v5/resourceAreaColumns 我只是在查看 cellContent 这是一个钩子,但无法从这个例程中弄清楚如何执行上述操作
  • 嗯,您将资源指定为静态列表还是可以从 URL 获取的数据?如果你提供了一个静态列表,那么 refetch 不会做任何事情。据我所知,没有其他方法可以强制资源重新渲染。也许你可以提出一个关于它的功能请求,这样你就可以从静态列表中重新渲染?要么,要么你必须想办法在 DOM 中手动找到正确的 <td>

标签: javascript html fullcalendar fullcalendar-5


【解决方案1】:

我发现 cellClassNames 可以返回一个类并改变颜色

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

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签