web-dev-qa-db-ja.com

fullcalendarはイベントを動的に追加します

フルカレンダーに動的にイベントを作成しようとしています。

私が持っています：

$('#calendar').fullCalendar({
                viewRender: function (view) {

                    var h;
                    if (view.name == "month") {
                        h = NaN;
                    }
                    else {
                        h = 2500; // high enough to avoid scrollbars
                    }


                    $('#calendar').fullCalendar('option', 'contentHeight', h);
                },
                lang: 'fr',
                events: [
                    {
                        title: '8 présents',
                        start: data[0]
                    },
                    {
                        title: '8 excusés',
                        start: data[1]
                    },
                    {
                        title: '8 excusés',
                        start: '2015-01-08'
                    },
                    {
                        title: '8 présents',
                        start: '2015-01-08'
                    },
                ],
                dayClick: function (date, jsEvent, view) {
                    window.location.replace(Routing.generate('dateChoisie', {date: date.format()}));
                }
            })

イベントのすべての日付を含む配列であるvarデータがあります。 data [0]、data [1]などを挿入したのと同じ方法で、イベントにこれを挿入しますが、すべての日付に対して動的に挿入します。

私はforをしようとしました：

events: [
    for (var i = 0, max = data.Lenght; i < max; i++) {
         {
                 title: '8 présents',
                 start: data[i]
           },
    }
                                {
                                    title: '8 excusés',
                                    start: data[1]
                                },
                                {
                                    title: '8 excusés',
                                    start: '2015-01-08'
                                },
                                {
                                    title: '8 présents',
                                    start: '2015-01-08'
                                },
                            ],

ただし、リスト内では機能しません。

誰も私がこれを行う方法を知っていますか？

javascriptjqueryfullcalendar
9
anubis

カレンダー全体をレンダリングした後、イベントを動的に追加できます。

var event={id:1 , title: 'New event', start:  new Date()};

$('#calendar').fullCalendar( 'renderEvent', event, true);
36
Mohammed Safeer

しばらく探していましたが、可能性を見つけました。

最後はとても簡単でした...

ここでこれを許可します。おそらく誰もが興味を持っています。

for (var i in data)

    var monthSource = new Object();
    monthSource.title = data[i]+' présents'; 
    monthSource.start = i; // this should be date object
    monthSource.end = new Date(y, m, d); //to now
    month[a] = monthSource;
    a++;

    }
$('#calendar').fullCalendar({
viewRender: function (view) {

    $('#calendar').fullCalendar( 'removeEvents');
    $('#calendar').fullCalendar('addEventSource', month);
}
8
anubis

ソース： http://fullcalendar.io/docs/event_data/addEventSource/

イベントソースを動的に追加できます。イベントソースは、たとえばjsonデータを返すことができるURLです。

イベントデータを変更した後、refetchイベントを発生させるだけで十分かもしれません。

.fullCalendar( 'refetchEvents' )

ソース： http://fullcalendar.io/docs/event_data/refetchEvents/

5
Marcel Burkhard

ウェブサイトの例にあるようにやってみましょう：

https://fullcalendar.io/docs/renderEvent-demo

そのため、イベントを追加し、それをバックエンドに追加するものは何でも使用します。

または、イベントをバックエンドに追加し、データベースの新しいIDを返し、それをタイムラインに追加して、IDを適切に設定できます。

または、あなたのボートを揺るがすものは何でも、戻りメッセージでIDを更新します。

0
Jannunen

（受け入れられたソリューションは、複雑な操作を行うとイベントを失います。追加されたイベントは一時的なものであり、激しく点滅すると自然に消えます。このソリューションは堅牢で、より複雑な操作を行うと機能します。）

永続的なイベントのサポートは少し洗練されていません。カレンダーの状態全体をダンプ、リロード、レンダリングする必要があるかもしれません...：

var CAL, EVENTS;

$(document).ready(function() {
    // set up calendar with an EventSource (in this case an array)
    EVENTS = [...];
    $('#calendar').fullCalendar({...});

    // calendar object
    CAL = $('#calendar').fullCalendar('getCalendar');
    // extend object (could be its own function, etc.)
    CAL.refresh = function() {
        CAL.removeEvents();
        CAL.addEventSource(EVENTS);
    }

    // finish setting up calendar
    CAL.refresh();
});

デモ：

EVENTS.pop();  // remove last event
refresh();     // refresh calendar; last event no longer there

https://stackoverflow.com/a/18498338 を参照してください

0
ninjagecko