自定义按钮上的动态更改文本

Question

我想要日历的 edit/read-only 按钮。

一切正常，但是当我在单击后更改 view/day 时，按钮的默认名称被添加到自定义名称中，如下所示："stopedit" 而不仅仅是 "stop"

知道如何解决吗？

customButtons: {
  toggleEditButton: {
    text: "edit",
    click: function () {
      if (calendar.getOption("editable")) {
        calendar.setOption("editable", false);
        calendar.setOption("selectable", false);
        event.target.innerHTML = "edit";
      } else {
        calendar.setOption("editable", true);
        calendar.setOption("selectable", true);
        event.target.innerHTML = "stop";
      }
    }
  }
}

https://codepen.io/DimaKompot/pen/NWGJJxB?editors=0011

Answer 1

我以前从未使用过Fullcalendar，但似乎在重新渲染时，Fullcalendar通过appending文本来设置text: "edit"定义的按钮文本（第3行）在 DOM。由于您已经通过 innerHTML 设置了内容，因此在这些情况下您会得到 editedit 或 stopedit。

在其他组件的DOM中fiddle总是很危险的，因为我们自己的改动经常会和组件的渲染逻辑发生冲突，很难找到官方（或非官方）和足够好的扩展点。因此，如果可能的话，最好遵守组件规则。）

因为 customButtons API doesn't expose any rendering logic, changing the text option at runtime with setOption 是次佳的主意。

一些组件库（例如 DevExpress）提供了类似 calendar.setOption('customButtons.toggleEditButton.text', 'stop') 的路径语法，但这没有用。

但幸运的是，在替换 whole customButtons 选项时，Fullcalendar 尊重该更改并重新呈现按钮：

var customButtonsOption = calendar.getOption('customButtons');
calendar.setOption("customButtons", {
    ...customButtonsOption,
    toggleEditButton: {
        ...customButtonsOption.toggleEditButton,
        text: 'edit'
    }
});

完整的工作示例：https://codepen.io/sbusch/pen/abvxYXm?editors=0010

注意：我使用对象展开运算符 ...，它可能不可用，具体取决于您的构建环境和目标浏览器。在这种情况下，一个（非常冗长的）解决方法是使用 Object.assign.

Answer 2

在回答上述问题之前我一直在使用的替代解决方案：将 toggleEditButton.text 设置为空字符串

并手动设置默认值：

document.getElementsByClassName("fc-toggleEditButton-button")[0].innerHTML = "edit"

https://codepen.io/DimaKompot/pen/yLYrjKa?editors=0011

自定义按钮上的动态更改文本

Dynamic change text on customButtons

javascript

html

fullcalendar

fullcalendar-4