web-dev-qa-db-ja.com

フルカレンダーで日のクリック時にイベントの詳細を表示する方法

こんにちは、私はイベント配列を持っています。日のクリックで、別のパネルにイベントの詳細を表示したいと思います。配列形式の配列を持つ配列がありますが、これをレンダリングして、クリックされた日のサブ配列の詳細を含むイベントのすべての詳細を取得する方法がわかりません。あなたがこれで私を助けることができるか、またはそれに何かを提案することができるかどうか見てください。これが私のコードです。

$(window).load(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        eventRender: function(event, element, view) {
            for (var i = 0; i <= event.products.length - 1; i++) {
                element.append('<span>' + event.products[i].name + '<span>');
            };
        },
        events: [{
            title: 'EventName',
            start: '2016-05-02',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'Event',
            start: '2016-05-03',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }, {
                name: 'ProductName3'
            },]
        }, {
            title: 'EventName',
            start: '2016-05-13',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Event',
            start: '2016-05-15',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'EventNAme',
            start: '2016-05-21',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Event',
            start: '2016-05-23',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Eventname',
            start: '2016-05-25',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'Event',
            start: '2016-05-29',
            products: [{
                name: 'ProductName'
            }]
        }],
        dayClick: function(date, allDay, jsEvent, view) {
            console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view)
        }
    });
})

イベント配列があり、各イベントに製品配列がある場合は、日付をクリックするたびに、タイトルと、同じ製品名などの製品の詳細を表示します。これが私がこれまでカレンダーで試したことです。

したがって、表示したいイベントがある日をクリックするとイベントのクリックで表示したくないので、今すぐ1日クリックできる必要があります以下の回答によると、イベントをクリックしたときにのみ表示されます。

イベントタイトルproduct_name

コードが長すぎるので、コードペンを作成しました。これを編集できるかどうか確認してください。よろしくお願いします [〜＃〜] demotrial [〜＃〜]

javascriptjqueryfullcalendar
6
Sudarshan Kalebere

あはぁ！最後に、dayClickでイベントをレンダリングするソリューションを見つけました。完全なカレンダーアクション（dayClick、eventClickなど）内のイベントをフェッチできるclientEventsオブジェクトと呼ばれるものがあります。その機能を使用してイベントをレンダリングしました。これが私の作業です デモ ...

そして私が熱心に検索していたdayClickコードは以下のとおりです

dayClick: function(date, allDay, jsEvent, view) {
  $('#calendar').fullCalendar('clientEvents', function(event) {
    // match the event date with clicked date if true render clicked date events
    if (moment(date).format('YYYY-MM-DD') == moment(event._start).format('YYYY-MM-DD')) {
      // do your stuff here
      console.log(event.title);

      // if you have subarray i mean array within array then 
      console.log(event.subarray[0].yoursubarrayKey);
    }
  }
}
9
Sudarshan Kalebere

イベントクリック はあなたが探しているものです。

eventClick: function(calEvent, jsEvent, view) {

      console.log('Event: ' + calEvent.title);
      console.log('Event: ' + calEvent.products[0].name);
}

更新されたcodepen を参照してください

これは、すべての製品名をループする方法です。

      for (var i = 0;i < calEvent.products.length;i++){
        console.log('Event: ' + calEvent.products[i].name);
      }

パネル内にプロパティを挿入するには、次のようにします。

eventClick: function(calEvent, jsEvent, view) {

      // this is a little function to manipulate the dom
      function insert(title, product){
        var dom = $("#insert_here")
        var template = '<tr><td class="o-box-name">'+product+'</td><td><a href="" class="postpone-del-text">'+title+'</a></td><td><a href="" class="cancel-del-text">Cancel</a></td></tr>' 
        dom.append(template);
      };


      // this is the loop
      for (var i = 0;i < calEvent.products.length;i++){
        //console.log('Event: ' + calEvent.products[i].name);
        insert(calEvent.title, calEvent.products[i].name);
      }
}

別の更新されたcodepen 5月23日をクリックします

2
Enrico