Solution 1 :

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.

Solution 2 :

Alternative solution that I was using until the answer above:
set toggleEditButton.text to an empty string

and set the default value manually:

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

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

Problem :

I want to have edit/read-only button for the calendar.

Everything works, but when I change view/day after click then default name of the button got added to the custom one, like this: “stopedit” instead of just “stop”

Any idea how to resolve it?

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

Comments

Comment posted by Sebastian B.

Yes, but every time Fullcalendar decides to re-render the buttons, the button text will become empty. It’s possible that this won’t happen with the current release of the component (after performing some possibly incomplete tests), but then it may change in the future. This is either a risk, or has to be fixed by finding a good event to patch the button text (does Fullcalendar provide some kind of

By