web-dev-qa-db-ja.com

jqueryフルカレンダーjsonイベントソース構文

フルカレンダーを使用してjsonソースからイベントをロードしようとしています。 jsonは、フィード「mysite.com/getEvents」（jsonイベントオブジェクトを返す）のようなURLからのものです。現在、オブジェクトを返します

{"allDay":false,"end":1325577600,"start":1325577600}

私は試した

$('#calendar').fullCalendar({
    events: 'mysite.com/getEvents'
});

しかし、何も起こりません。私のjsonにはタイトルとIDがありません。したがって、2つの質問があります。

  1. JSON URLからイベントを取得する適切な方法は何ですか
  2. 作成されたすべてのイベントのIDを生成するにはどうすればよいですか？
jqueryfullcalendar
16
EKet

JSONを作成して、必要なフィールドがすべて含まれるようにしてください。たとえば、私のプロジェクトでは、以下で十分です。

  • id
  • 題名
  • 開始
  • 終わり
  • 一日中

IDはJSONフィードのそのインスタンスに対してのみ一意である必要があると思います。そのため、JSONを生成するサーバー側スクリプトでカウンターをインクリメントすることができます。

JSONスクリプトからの出力例：

[
    "0",
    {
        "allDay": "",
        "title": "Test event",
        "id": "821",
        "end": "2011-06-06 14:00:00",
        "start": "2011-06-06 06:00:00"
    },
    "1",
    {
        "allDay": "",
        "title": "Test event 2",
        "id": "822",
        "end": "2011-06-10 21:00:00",
        "start": "2011-06-10 16:00:00"
    }
]
16
Matt Healy

受け入れられた回答で構文を使用すると、カレンダーに2つではなく4つのイベントが表示されます。 2つの追加は奇妙に「12:44」というタイトルが付けられています。直感的に、「0」と「1」の行を削除しましたが、完全に機能します。

[
  {
    "title": "Ceramics",
    "id": "821",
    "start": "2014-11-13 09:00:00",
    "end": "2014-11-13 10:30:00"
  },
  {
    "title": "Zippy",
    "id": "822",
    "start": "2014-11-13 10:00:00",
    "end": "2014-11-13 11:30:00"
  }
]
17
shacker

私はこれが古い記事であることを知っていますが、他の人がこれを探しているかもしれません...

あなたのjson応答を括弧で囲む必要があります、それはオブジェクトの配列を期待しているようです：

[
    {
        "title":"foo1",
        "id":"123",
        "start":"2016-02-12T10:30:00",
        "end":"2016-02-12T12:30:00"
    },

    {
        "title":"foo2",
        "id":"456",
        "start":"2016-02-14T10:30:00",
        "end":"2016-02-14T12:30:00"
    }
]
5
Jeff K

Cakephp 3でフルカレンダーを試しましたが、同様の問題がありました。 ajax eventsourceを介してイベントをフェッチする場合。次に、配列をajax呼び出しに送信する前にシリアル化する必要があります。

  $this->set(array(
    'events' =>  $this->xyzCalls->getAllEvents(),
    '_serialize' => 'events'
));

したがって、以下のように正しく出力されます：

 [
    {
        "id": 22,
        "title": "event1",
        "start": "2018-09-13T13:30:00+00:00",
        "end": "2018-09-13T14:00:00+00:00"
    }
]

次に、フルカレンダーで、イベントソースを呼び出します。

$('#calendar').fullCalendar({

  eventSources: [

    // your event source
    {
      url: '/myfeed.php',
      type: 'POST',
      data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
      },
      error: function() {
        alert('there was an error while fetching events!');
      },
      color: 'yellow',   // a non-ajax option
      textColor: 'black' // a non-ajax option
    }

    // any other sources...

  ]

});
0
Invincible