web-dev-qa-db-ja.com

FullCalendarの「日付変更」のリスナー？

現在表示されている日付が変更されるたびに発生するリスナーをFullCalendarにアタッチする方法はありますか。つまり、月ビューの場合、翌月に移動すると、月の最初の日付の日付を渡してイベントが発生します。週ビューで週を変更したり、日ビューで日を変更したりする場合も同様です。

これに近い唯一の公開されたリスナーはdayClickコールバックですが、ユーザーが実際の日のセルをクリックしたときにのみ起動するため、たとえば、ヘッダーバーでNext/prev/todayコントロールが押されたときに起動するわけではありません。 。

この機能でFullCalendarで現在表示されている月をExtJSのdatepickerコンポーネントと同期できるようにしたいので、表示された月がFullCalendarで変更された場合、Datepickerが更新されて同じ月が表示されます。 （左上の「ミニカレンダー」が日付ピッカーであるGoogleカレンダーのUIを考えてください）。

javascriptdateextjsfullcalendardom-events
31
Bill Dami

ビル、

私はこの質問がかなり古くからあることを知っていますが、解決策が必要だったので、他の人のためにここに投稿すると思いました。 viewDisplayイベントをカレンダーに添付することで、自分で問題を解決しました（このイベントは FullCalendarのv2で削除されました 、 viewRender かもしれません代わりに使用されます）。

$("#calendar").fullCalendar({
    viewDisplay: function (element) {

    }
});

Elementパラメータにアクセスすると、element.startまたはelement.visStartを使用して日付を取得できます。月表示の場合、startは表示している月の最初の日を提供し、visStartは月の最初の表示日を提供します

26
Anthony Shaw

これは私がそれをした方法です：

$("#calendar").fullCalendar({

viewRender: function(view, element){
        var currentdate = view.intervalStart;
        $('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
    }

    });

月ビューでは、intervalStartは、最初の表示日（通常は前月の終わり近くの日）ではなく、FullCalendarに表示されている月の最初の日を返します。

12
user3241874

FullCalendar v4（執筆時の最新バージョン）の場合、正しいコールバックは次のとおりです。

viewSkeletonRender（ docs ）

function( info )

このコールバックは、最初のビューがレンダリングされたとき、またはユーザーがビューを変更したとき、ただしすべての日付/時刻セルがレンダリングされたときのコールバックである、datesRenderコールバックが起動する前にトリガーされます。

datesRender（ docs ）

function( info )

これは、viewSkeletonRenderコールバックの後、eventRenderコールバックの前にトリガーされます。

0
sr9yar

Fullcalendar V4の場合、

document.getElementById('my-button').addEventListener('click', function() {
  var date = calendar.getDate();
  alert("The current date of the calendar is " + date.toISOString());
});
0
ramamoorthy_villi