完整日历今天按钮自定义行为

fullCalendar today button custom behavior

本文关键字：自定义 按钮 今天 日历      更新时间：2023-09-26

我在使用完整日历时遇到问题。我正在使用周视图（默认视图："基本周"），以及工具栏按钮"今天"，"上一个"，"下一个"。当我单击"今天"按钮时，单击日历会导航回当前周，但日期选择不会更改。我希望日历导航到当前周并在日历上选择今天日期。但是我在重新定义"今天"按钮单击事件时遇到了麻烦。

代码示例：https://plnkr.co/edit/dv9yiq1CdJxfFTsDg4Yx?p=preview 

defaultView: 'basicWeek',
            defaultDate: '2016-01-12',
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
              console.log('select');
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); 
                }
                $('#calendar').fullCalendar('unselect');
            }

在这种情况下，我希望当我单击"今天"按钮时出现今天日期的弹出窗口（警报）。所以基本上按钮点击不仅可以将我导航到当前一周，还可以选择当前日期。

您可以手动收听今天的按钮单击，然后调用日历的 select 方法传递正确的参数。

请尝试以下代码：https://plnkr.co/edit/62Dx5pVrDDXnwoME5jbU?p=preview

calendar.find('.fc-today-button').click(function(){
  var start = new Date();
  start.setHours(0,0,0,0);
  var end = new Date();
  end.setDate(end.getDate() + 1);
  end.setHours(0,0,0,0);
  calendar.fullCalendar('select', start, end);
});

试试：

this.calendarComponent.calendar.today()

或

this.calendar.getApi().changeView('resourceTimelineWeek','2022-07-26')
相关文章：