Javascript FullCalendar 中“日期更改”的监听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6412271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Listener for "date change" in FullCalendar?
提问by Bill Dami
Is there any way to attach a listener to FullCalendar that will be fired whenever the currently viewed date is changed, i.e. if you are in Month view, going to the next month would fire the event passing the Date for the first day of the month, and the same for changing weeks in Week view, day in Day view etc.
有什么方法可以将侦听器附加到 FullCalendar，每当当前查看的日期发生更改时都会触发该侦听器，即如果您处于月视图中，则转到下个月将触发通过该月第一天的日期的事件，在周视图中更改周，日视图中的天等也是如此。
The only exposed listener that would be close to this is the dayClick callback, but that's no good because it only fires when a user clicks in an actual day's cell, not for example when the Next/prev/today controls are pressed in the header bar.
唯一与此接近的公开侦听器是 dayClick 回调，但这并不好，因为它仅在用户单击实际一天的单元格时触发，例如在标题栏中按下 Next/prev/today 控件时不会触发.
I want this functionality to be able to sync the currently viewed month in FullCalendar with a ExtJS datepicker component, so if the viewed month is changed in FullCalendar, then the Datepicker is updated to show that same month. (think Google Calendar's UI with its "mini calendar" in the top left being the datepicker).
我希望此功能能够将 FullCalendar 中当前查看的月份与 ExtJS 日期选择器组件同步，因此如果查看的月份在 FullCalendar 中更改，则日期选择器会更新以显示同一月份。（想想谷歌日历的用户界面，左上角的“迷你日历”是日期选择器）。
采纳答案by Anthony Shaw
Bill,
账单，
I know this question is pretty much ancient, but I needed a solution and figured I'd post it here for others. I solved the problem myself by attaching the viewDisplayevent to my calendar (this event was removed in v2 of FullCalendar, viewRendermay be used instead).
我知道这个问题非常古老，但我需要一个解决方案，并认为我会在这里发布给其他人。我通过将viewDisplay事件附加到我的日历来解决了这个问题（这个事件在 FullCalendar 的 v2 中被删除，viewRender可以改用）。
$("#calendar").fullCalendar({
viewDisplay: function (element) {
}
});
Once you have access to the element parameter, you can get the date by using element.startor element.visStart. If you're in the month view, start will provide you with the first day of the month that you're viewing, visStart will give you the first visible day of the month
一旦您可以访问 element 参数，您就可以使用element.start或获取日期element.visStart。如果您在月视图中， start 将为您提供您正在查看的月份的第一天， visStart 将为您提供该月的第一个可见日
回答by user3241874
This is how I did it:
我是这样做的：
$("#calendar").fullCalendar({
viewRender: function(view, element){
var currentdate = view.intervalStart;
$('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
}
});
In month view, intervalStartwill return the first day of the month being displayed on the FullCalendar, rather than the first visible day, which is usually a day near the end of the previous month.
在月视图中，intervalStart将返回在 FullCalendar 上显示的月份的第一天，而不是第一个可见的日期，这通常是上个月月底附近的一天。
回答by sr9yar
For FullCalendar v4(the latest version at the time of writing ) the right callbacks are:
对于FullCalendar v4（撰写本文时的最新版本），正确的回调是：
viewSkeletonRender(docs)
viewSkeletonRender(文档)
function( info )
function( info )
This callback will get triggered when the initial view renders or when the user changes the view, but before the datesRender callback fires, which is a callback for when all date/time cells have been rendered.
当初始视图呈现或用户更改视图时，将触发此回调，但在 dateRender 回调触发之前，这是所有日期/时间单元格都已呈现的回调。
datesRender(docs)
日期渲染（文档）
function( info )
function( info )
This triggers after viewSkeletonRender callback but before the eventRender callbacks.
这在 viewSkeletonRender 回调之后但在 eventRender 回调之前触发。
回答by Philip Stratford
Truly ancient question now but in FullCalendar 4 the datesRendercallback is probably what you want. Per the docs, this is triggered "when a new set of dates has been rendered" which, in practice, would be whenever you navigated to the previous/next day/week/month or used the date picker or "Today" button to do so.
现在真正古老的问题，但在 FullCalendar 4 中，datesRender回调可能是您想要的。根据文档，这是“在呈现一组新日期时”触发的，实际上，每当您导航到上一天/下一天/周/月或使用日期选择器或“今天”按钮执行所以。
Example usage:
用法示例：
$("#calendar").fullCalendar({
datesRender: function (info) {
alert("The fist date on display is: " + info.view.activeStart);
}
});
回答by ramamoorthy_villi
For Fullcalendar V4,
对于 Fullcalendar V4，
document.getElementById('my-button').addEventListener('click', function() {
var date = calendar.getDate();
alert("The current date of the calendar is " + date.toISOString());
});
