web-dev-qa-db-ja.com

FullCalendar dayClickイベントで、クリックされた日付にすでに存在するイベントを取得できますか？

FullCalendar dayClickイベントで、クリックされた日付にすでに存在するイベントを取得できますか？

http://arshaw.com/fullcalendar/docs/mouse/dayClick/

私のプロジェクトについて少し説明しましょう。私は、ユーザーがカレンダーでイベントを追加/編集できるようにする簡単なphpサイトを書いています。

  • 日付に追加できるイベントは1つだけです。
  • ユーザーが空の日付をクリックすると、新しいイベントポップアップが表示されます（私はdayclickイベントを使用しています）。
  • ユーザーが既存のイベントで日付をクリックすると、[イベントの編集]ポップアップが表示されます（私はeventclickイベントを使用しています）。

問題は、ユーザーが既存のイベントのある日付のイベント領域（上部領域または下部領域）の外側をクリックすると、eventclickではなくdayclickが発生することです。日付に既存のイベントがある場合、eventclickイベントをトリガーし、dayclickイベントをスキップするにはどうすればよいですか？

javascriptfullcalendar
12
zawmn83

イベントはクライアント側に保存されていますか、それともサーバー側に保存されていますか？クライアント側の場合、クリックされた時間内にイベントが必要な場合、これは特に機能するはずです。

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            $('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });
    }
});

これにより、クリックされた時間と重複し、クライアント側に保存されるイベントが発生します。終日スロットの場合、その日に重複するすべてのイベントが表示されます。

AllDayスロットまたはタイムスロットのどちらがクリックされたかに関係なく、その日付自体のすべてのイベントが必要な場合。

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            if(!allDay) {
                // strip time information
                date = new Date(date.getFullYear(), date.getMonth(), date.getDay());
            }
            $('#calendar').fullCalendar('clientEvents', function(event) {
                if(event.start <= date && event.end >= date) {
                    return true;
                }
                return false;
            });
    }
});

イベントがサーバーに保存されている場合は、dayClickコールバックで指定された日付を取得し、それを使用してサーバーへの呼び出しを作成し、必要な形式で情報を取得する必要があります。

[〜＃〜] edit [〜＃〜]往復をする場合、または他の方法で情報を取得しようとする場合

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
            var cache = new Date().getTime();
            $.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
                function(data) {
                    // do stuff with the JSOn data
                }
    }
});

また、往復が必要ない場合は、fullCalendar.jsのrefetchEventsなどで何が発生するかを確認することもできます。 fullCalendarトランクから分岐してもかまわない場合は、フェッチされたイベントをどこかに保存して、大量のDOM操作を行わないようにすることができます（イベントの数によって異なりますが、イベントが大きくなると扱いにくくなります）。

18
justkt

カレンダーに祝日を入力するための解決策を見つけているときに、私はこの問題に自分で遭遇しました。これは、終日のイベントに適したソリューションであることがわかりました。これが他の誰かの将来の助けになることを願っています。

$('#calendar').fullCalendar({                
    eventClick: function (event) {
        ShowEditScreen(event.id);
    },
    dayClick: function (date) {
        var events = $('#calendar').fullCalendar('clientEvents');
        for (var i = 0; i < events.length; i++) {
            if (moment(date).isSame(moment(events[i].start))) {
                ShowEditScreen(events[i].id);
                break;
            }
            else if (i == events.length - 1) {
                ShowCreateNew(date);
            }
        }
    }
});
7
Krizzy

Exestedの回答は私には機能しなかったので、機能するコードがあります：

dayClick: function (date, jsEvent, view) {
    var count = 0;

    date = date.toDate();
    var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
    var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);

    $('#calendar').fullCalendar('clientEvents', function (event) {
            if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
                || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
                        count++;
                    }
                });
    //count - number of events on this day
}
0
Alex

モーメントライブラリを使用できます。例えば：

$('#endDate').val(moment(endDate).format('YYYY-MM-DD hh:mm:ss'));

http://momentjs.com/docs/#/displaying/format/

0
Gabriel Zulian

これは、別の機能で当日のすべてのイベントが必要なことです。

            var date = $('.js-calendar').fullCalendar('getDate');
            date = date.toDate();
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
            var todaysEvents = $('.js-calendar').fullCalendar('clientEvents', function(event) {
                if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
                    || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
                    return true
                }
            });
0
derdida