如何从 FullCalendar 上的 customButton 动态更改文本？答案

【问题标题】：How to change the text dynamically from a customButton on FullCalendar?如何从 FullCalendar 上的 customButton 动态更改文本？
【发布时间】：2017-10-23 04:13:05
【问题描述】：

我不知道如何在 customButton 初始化后更改它的文本。从下面的示例代码中，文本设置为“自定义！”。但我想动态改变它？有没有可以实现这个的jQuery方法调用？

$('#calendar').fullCalendar({
    customButtons: {
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
    header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }
});

【问题讨论】：

您可以像这样动态设置选项：fullcalendar.io/docs/utilities/dynamic_options - 您可能必须立即重新定义整个 customButtons 属性。试一试。
你到底想什么时候改变文本，我的意思是什么事件会触发它？当你点击它？事件何时加载？
@Don'tPanic 我想在单击自定义按钮时更改文本。

标签： javascript button text dynamic fullcalendar

【解决方案1】：

你已经快到了。 The docs say 表示在定义自定义按钮时，click 参数为：

单击按钮时调用的回调函数。接受一个参数，一个 jqueryEvent。

所以就用它吧，例如：

customButtons: {
    myCustomButton: {
        text: 'custom!',
        click: function() {
            $(this).text('Updated text!');
        }
    }
},

您可能想要传递一些动态数据，可能是关于当前显示的月份或星期或其他数据。例如（这只是一个例子，也许你不需要这样的东西）：

customButtons: {
    myCustomButton: {
        text: 'custom!',
        click: function() {
            var view = $('#calendar').fullCalendar('getView');
            $(this).text('First visible day is ' + view.start.format('YYYY-MM-DD'));
        }
    }
},

【讨论】：

@dont-panic ：这就是我要找的！它完全符合我的要求。谢谢。
当我们使用上一个和下一个按钮导航日期时，这个答案有问题

【解决方案2】：

在原版 JS 中：

customButtons: {
  showMore: {
    text: moreHoursTranslation,
    click: function (e) {
      if (this.classList.contains("more-hours")) {
        this.classList.remove("more-hours");
        this.innerText = moreHoursTranslation;
        this.closest(".fc").querySelector(".fc-view").style.height =
          "200px";
        this.closest(".fc").querySelector(".fc-view").style.overflow =
          "auto";
        return;
      }
      this.classList.add("more-hours");
      this.innerText = lessHoursTranslation;
      this.closest(".fc").querySelector(".fc-view").style.height = "auto";
      this.closest(".fc").querySelector(".fc-view").style.overflow = "auto";
    },
  },
},

【讨论】：

【解决方案3】：

您可以使用以下代码添加带有事件绑定的按钮。

$('.fc-toolbar .fc-left').prepend(
            $('<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right">+ room</button>')
                .on('click', function() {
                    var title = prompt('Room name');
                    if (title) {
                        $('#calendar').fullCalendar(
                            'addResource',
                            { title: title },
                            true // scroll to the new resource?
                        );
                    }
                })
        );

来自 Bellow Link 的参考。 Link

【讨论】：

这似乎与问题完全无关，问题是关于自定义按钮的使用，以及在按钮初始化后如何更改按钮的标题等。您的示例似乎是关于绑定到现有按钮并在单击按钮时添加资源。也许您可以更清楚地解释这如何回答这个问题，因为我看不出它会有什么帮助。
@ADyson 如果您注意到我们将附加为按钮 html，以便我们可以提供我们需要的标签。在上面的代码中，我为相同的（自定义按钮）使用提供了另一个选项。
是的，但我会重复一遍 - a) 问题是关于 customButtons 功能，b) 它询问如何在单击按钮后更改按钮的标题，而不是如何添加资源。特别是您的代码的那部分完全无关紧要。看起来您只是从另一个页面剪切和粘贴某些内容，甚至没有修改它以适应场景。