I never used Fullcalendar before, but it seems that when re-rendering, Fullcalendar sets the button text defined by text: "edit"
(line 3) by appending the text in the DOM. As you already set content via innerHTML
, you get editedit
or stopedit
in those cases.
It’s always dangerous to fiddle in the DOM of other components, as our own changes often collide with the rendering logic of the component, and it’s hard to find official (or unofficial) and good-enough extension points. So it’s best to play by the components rules, if possible.)
As the customButtons
API doesn’t expose any rendering logic, changing the text
option at runtime with setOption
was the next-best idea.
Some component libraries (e.g. DevExpress) offer a path-syntax like calendar.setOption('customButtons.toggleEditButton.text', 'stop')
, but that didn’t work.
But fortunately, when replacing the whole customButtons
option, Fullcalendar respects that change and re-renders the button:
var customButtonsOption = calendar.getOption('customButtons');
calendar.setOption("customButtons", {
...customButtonsOption,
toggleEditButton: {
...customButtonsOption.toggleEditButton,
text: 'edit'
}
});
Full working example: https://codepen.io/sbusch/pen/abvxYXm?editors=0010
Note: I use the Object spread operator ...
, which may not be available depending on your build environment and targeted browsers. A (very verbose) workaround in that case is to use Object.assign
.