1

FullCalendar は、表示されたイベントがクリックされたとき、および月ビューで日付がクリックされたときの JavaScript イベントを提供します。

ただし、日付がクリックされた場合、その日付内に含まれる最初のイベントのクリックをトリガーできるようにしたいと考えています。これは、誰かが (電話で) クリックまたはタップし、イベント自体を見逃して、代わりにセルにヒットした場合に備えています。

イベントがセルの DOM 内にレンダリングされた場合、それは簡単なことですが、FullCalendar はイベントを月表示の外にレンダリングし、代わりに月グリッドにオーバーレイします。

別の方法は、キャッシュされたデータで検索を実行して正しいイベントをトリガーすることですが、より洗練されたソリューションを望んでいます。

4

1 に答える 1

2

FullCalendar は、日やイベントをそれらを表す DOM 要素に関連付けるという点で、私たちに何の恩恵も与えていないようです。関係ありません：私たちは自分でそれを行うことができます.

作業例: http://jsfiddle.net/nNjFb/

var $calendar = $('#calendar');

$calendar.fullCalendar({
    dayClick: function (date) {
        // Create a string representing just the day/month/year of the date clicked
        dateString = date.getDate() + date.getMonth() + date.getFullYear();

        // Grab the events for that day using a custom filter function
        events = $('#calendar').fullCalendar('clientEvents', function (event) {
            eventDate = event.start;
            eventDateString = eventDate.getDate() + eventDate.getMonth() + eventDate.getFullYear();

            return dateString === eventDateString;
        });

        if (events.length) {
            // Find the first event's element by its class name
            var $event = $calendar.find('.' + events[0]._id);

            $event.trigger('click');
        }
    },
    eventClick: function (event) {
        console.log('event click!', event);
    },
    eventRender: function(event, element) {
        // Every time an event is rendered,
        // add its id as a class name so that
        // we can find it later
        $(element).addClass(event._id);
    }
});

// Add some events

var newEvent1 = {
    title: 'first event',
    start: new Date('October 31 2013 4:00 PM EST'),
    allDay: false
};

var newEvent2 = {
    title: 'second event',
    start: new Date('October 31 2013 6:00 PM EST'),
    allDay: false
};

$calendar.fullCalendar('renderEvent', newEvent1);
$calendar.fullCalendar('renderEvent', newEvent2);

ここには 2 つのキーがあります。

  1. eventRender フックを使用して、イベントに関連付けられた dom 要素に有用なクラス名をアタッチします。

  2. clientEvents メソッドとカスタム フィルターを使用して、クリックされた日に一致するイベントの配列を取得します。

于 2013-10-31T15:50:05.760 に答える