影响“今天全日历”按钮 .fc-today-按钮

Affecting Fullcalendar today button .fc-today-button

本文关键字：按钮 fc-today- 今天全日历 日历 今天 影响      更新时间：2023-09-26

单击作为 Fullcalendar 一部分的"今天"按钮时，我无法让自定义控件工作。

我能找到的所有文档都告诉我，Fullcalendar 的内置控件可以使用两种方法受到影响：

因此，当它应用于上一个，下一个，一个月，议程周和议程日时，这个对我有用，但不适用于"今天"（button.fc-today-button）：

    $('body').on('click', 'button.fc-next-button', function() {
            console.log('I Clicked Next');
    });

一些文档还说这有效，尽管我无法在任何按钮上做到这一点：

    $('.fc-next-button span').click(function(){
            console.log('I Clicked Next');
    });

有谁知道为什么会这样，我做错了什么？

好吧，你想影响"今天"按钮，但你正在为"下一个"按钮添加代码。您想执行以下操作：

$(".fc-today-button").click(function() {
    alert('Clicked Today!');
});

这会将单击事件应用于具有类"fc-today-button"（即"今天"按钮将具有的类）的任何内容。

工作示例：

$('#fullCal').fullCalendar({
    events: [{
        title: 'Event 1',
        start:  moment().add(1, 'h'),
        end: moment().add(2, 'h'),
        allDay: false
    }], 
    header: {
        left: '',
        center: 'prev title next today',
        right: ''
    },
    timezone:'local',
    defaultDate: '2014-11-15',
    editable: false,
    eventLimit: false,
    firstDay: 6,
    defaultView: 'agendaWeek',
});
               
$(".fc-today-button").click(function() {
    alert('Clicked Today!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>

经过调查和 MikeSmithDev 的帮助（感谢 Mike - 您的帮助非常宝贵），似乎"今天"事件只有在物理上位于日历下方/之后才会被触发，其余的标题控件（button.fc-next-button等）似乎并不介意它们的实际位置。

可能在日历完成加载之前执行第一个函数......所以它可以工作，只是没有按钮可以绑定它。

我能够或多或少地通过各种本机解决方法来实现这一点。您可以结合使用"自定义按钮"和"headerToolbar"来有效地删除原始的今天按钮并将其替换为您自己的按钮，该按钮可以在单击时触发自定义函数代码。

我实际上在 VueJS 中使用了它，但对于 Vanilla JS，应该同样可行。

// these are the options you can pass when initializing a fullcalendar
    customButtons: {
      focusButton: {
        text: "focus",
        click: this.scrollToCurrentDay // this is a vue component function, but you could just as well pass a vanilla JS function
      }
    },
    headerToolbar: { // this effectively removes the original today button and adds our custom button to the header of the calendar
      left: '',
      center: 'title',
      right: 'prev focusButton next'
    }

我想这样做，因为我不仅想关注点击今天的月份，还想将日历滚动到当天（在使用手机等小屏幕时很有用）。

我的自定义今日按钮单击处理程序：

scrollToCurrentDay: function(arg) {
  let CalendarAPI = this.$refs.calendar.getApi();
  CalendarAPI.today();
  var todayElement = document.getElementsByClassName('fc-day-today')[0];
  var calendarElement = document.getElementsByClassName('fc')[0];
  if (todayElement) {
    todayElement.scrollIntoView();
  } else {
    calendarElement.scrollIntoView();
  }
},
相关文章：