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

我想为日历设置编辑/只读按钮

一切正常，但当我在单击后更改视图/天时，按钮的默认名称被添加到自定义名称中，例如：“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";
      }
    }
  }
}

---

我以前从未使用过Fullcalendar，但在重新渲染时，Fullcalendar似乎通过在DOM中添加文本来设置按钮文本，按钮文本由

文本定义：“编辑”

（第3行）。由于您已经通过

innerHTML

设置了内容，因此在这些情况下，您将获得

editedit

或

stopedit

在其他组件的DOM中乱动总是很危险的，因为我们自己的更改经常与组件的呈现逻辑相冲突，并且很难找到正式（或非正式）和足够好的扩展点。因此，如果可能的话，最好遵守组件规则。）

由于不公开任何渲染逻辑，在运行时使用更改

文本

选项是下一个最好的主意

一些组件库（例如DevExpress）提供了类似于

calendar.setOption（'customButtons.toggleEditButton.text'，'stop'）的路径语法

，但这不起作用

但幸运的是，在替换整个

customButtons

选项时，Fullcalendar会尊重这些更改并重新呈现按钮：

var custombuttonspoption=calendar.getOption（'customButtons'）；
calendar.setOption（“自定义按钮”{
…自定义按钮选项，
切换编辑按钮：{
…customButtonsOption.toggleEditButton，
文本：“编辑”
}
});

完整工作示例：

---

注意：我使用对象扩展操作符

…

，根据构建环境和目标浏览器的不同，该操作符可能不可用。在这种情况下，一个（非常详细的）解决方法是使用。

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

并手动设置默认值：

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

---

是，但每次Fullcalendar决定重新呈现按钮时，按钮文本将变为空。组件的当前版本可能不会发生这种情况（在执行一些可能不完整的测试之后），但将来可能会发生变化。这是一种风险，或者必须通过找到一个好的事件来修补按钮文本来修复（Fullcalendar是否提供某种

渲染
事件？）