web-dev-qa-db-fra.com

Jquery Full Calendar syntaxe de source d'événement json

J'essaie d'utiliser un calendrier complet pour charger des événements à partir d'une source JSON. Le json provient d'une URL semblable à un flux, "mysite.com/getEvents" (qui renvoie un objet événement json). En ce moment, il retourne un objet 

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

J'ai essayé 

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

Mais rien ne se passe. Je sais que mon json manque le titre et l'identifiant. Nous avons donc 2 questions.

  1. Quelle est la bonne façon d'obtenir les événements à partir d'une URL JSON
  2. Comment puis-je générer un identifiant pour chaque événement créé?
jqueryfullcalendar
15
EKet

Vous devriez essayer de former le JSON afin qu'il contienne tous les champs obligatoires. Par exemple, sur mon projet, ce qui suit suffit:

  • identifiant
  • titre
  • début
  • fin
  • toute la journée

Je pense que l'ID doit uniquement être unique pour cette instance du flux JSON. Vous pouvez donc avoir un compteur incrémenté dans le script côté serveur qui génère le JSON. 

Exemple de sortie du script 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

Lorsque j'utilise la syntaxe dans la réponse acceptée, le calendrier contient quatre événements, et non deux. Les deux extra sont bizarrement intitulés "12:44". Sur un pressentiment, j'ai supprimé les lignes "0" et "1" et maintenant cela fonctionne parfaitement:

[
  {
    "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

Je sais que c'est un ancien post, mais d'autres peuvent être à la recherche de cela ...

Vous devez placer des crochets autour de votre réponse json, il semble s’attendre à un tableau d’objets:

[
    {
        "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"
    }
]
4
Jeff K

J'ai essayé fullcalendar avec Cakephp 3, j'ai eu des problèmes similaires. si vous récupérez les événements via ajax eventsource. alors vous aurez besoin de sérialiser le tableau avant de vous l'envoyer appel ajax.

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

donc, il sortira correctement comme ci-dessous:

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

Ensuite, dans le calendrier complet, appelez les sources de votre événement:

$('#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