Angular UI日历在更新单元格时重新呈现整个日历视图

时间:2019-06-20 18:59:06

标签: javascript jquery angular angular-ui dom-events

在我的 AngularJS v1.5.x 应用程序中,我正在使用Angular UI日历(angular-ui-calendar v1.0.2)模块开发日历。日历公开了某些事件,例如eventClickeventRender等,这些事件我根据需要实施以注入HTML。

直到今天,当我发现对日历的任何更新都重新呈现整个日历视图时,一切都一样好。

例如,如果我更新一天的记录,那么它将只是为了单个单元格更新而调用其事件以呈现整个日历视图。

我已经尝试过的是,我有条件地跳过了生成HTML的eventRender函数中的逻辑,因此如果我修改单个单元格,它不会更新每个单元格,但是这样做是因为它设置了所有单元格为空字符串。

有什么方法可以强制组件仅更新当前单元格或任何其他可以提高渲染性能的解决方案?

这是 eventRender 实现:

eventRender: (event, element) => {
const contentEl = element.find('div.fc-content');

if (!contentEl.length) {
return;
}

if (event.end && event.end.valueOf() < moment().valueOf()) {
element.addClass('fc-event-past');
}

let html = `<div class="eventTitle">
<span class='fc-time'> ${moment(event.startDate).format('hh:mma')} - ${moment(event.endDate).format('hh:mma')}
</span>
<span class='fc-title'>${event.title || ''}</span></div>`;
contentEl.empty();

html += '<span class="cal-name">No Provider Assigned</span>';
if (event.label) {
providerHtml += `<span class="cal-name">${event.label}</span>`;
}
contentEl.append(html);
}

这是angular ui日历组件的链接:https://github.com/angular-ui/ui-calendar

任何帮助将不胜感激。

0 个答案:

没有答案