2
votes

Comment utiliser correctement JSON pour transmettre des Events / EventSources à FullCalendar?

Mon objectif final est de transmettre des eventSources via JSON de manière dynamique. Avant même d'arriver à produire le contenu JSON dynamiquement, j'essaie d'utiliser l'exemple de documentation pour transmettre un simple événement unique via une URL JSON dans ma balise d'événement, écrite manuellement.

Je peux voir que l'URL fonctionne parce que je peux faire écho les résultats dans mon site Web wordpress via php, mais le script JS que je passe l'URL JSON fait simplement planter le calendrier. Je me gratte vraiment la tête sur celui-ci.

Il y a aussi mention des boutons précédent / suivant déclenchant un GET au JSON avec les dates du fuseau horaire local (par exemple, pour la plage du mois actuellement affiché). Comment suis-je censé syntaxer le json pour que l'appel d'événement trouve la plage de points de données? Je suis vraiment confus à propos de tout cela.

Fichier JSON: calendar.json

<?php
    //Wordpress function for URL to the file location
    $url = get_stylesheet_directory_uri() . '/calendar.json'; 
    $data = file_get_contents($url);
    $content = json_decode($data);

    echo $content->title; // Just to test if the URL works 
    echo $content->start; // This echos just fine

    ?>
<html lang='en'>
      <head>
        <meta charset='utf-8' />
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
              plugins: [ 'dayGrid' ],

              events: $url;
            });

            calendar.render();
          });
        </script>
      </head>
      <body>
        <div id='calendar'></div>
      </body>
</html>

Fichier PHP: page-calendar.php

{
    "title" : "something",
    "start" : "2019-04-23"  
}


1 commentaires

Cela ne fonctionne pas non plus: /. Je pense qu'être à l'intérieur de l'événement du DOM limite fortement le type de choses que je peux transmettre.Dans la documentation de FullCalendar, il semble définir explicitement une URL vers un fichier PHP (en se demandant si l'envoyer vers un fichier JSON est le problème ici.) un fichier PHP appelé avec un GET (dont je pense que la balise d'événement) renvoie une réponse JSON? Aucune idée de comment cela fonctionne honnêtement


3 Réponses :


-1
votes

1 commentaires

file_get_content fonctionne. Je l'utilise pour faire écho aux informations de mon URL à titre de test. Mais je n'utilise pas cette variable dans le script. J'utilise l'URL $ juste avant qui est le chemin vers l'emplacement du fichier JSON. Malheureusement, var_dump ne fonctionne pas non plus



2
votes

Le JSON doit être un tableau d'événements (même si le tableau ne contient qu'un seul objet). Actuellement, vous n'avez qu'un seul objet, et fullCalendar ne le lira pas.

Donnez à votre fichier calendar.json l'aspect suivant:

events: "<?php echo $url; ?>"

Vous devrez également changer un peu le code pour que votre variable PHP $ url soit traitée comme PHP et rendue, et aussi pour que la sortie soit traitée comme une chaîne par JS, et pas seulement injectée dans le JS tel quel:

[
  {
    "title" : "something",
    "start" : "2019-04-23"  
  }
]


1 commentaires

C'était ça. Merci beaucoup. Vous semblez que la personne active autour de la balise FullCalendar lol s'attend à voir plus de questions stupides de ma part apparaître. J'apprécie vraiment votre aide.



0
votes

Si votre php et votre fullcalendar sont sur la même page, vous pourriez avoir besoin de ce

            [
             {
              "title" : "something",
              "start" : "2019-04-23"  
             }
            ];

N'oubliez pas de vérifier votre sortie de calendar.json. Cela devrait ressembler à ceci

<?php
   $url = get_stylesheet_directory_uri() . '/calendar.json';
?>

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ],

          events: "<?php echo $url; ?>";
        });

        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>


2 commentaires

1) Quel est l'intérêt de faire lire le fichier par PHP puis de le passer sur la page, alors que l'URL du fichier JSON pourrait être donnée directement à fullCalendar? 2) Même s'il était nécessaire pour PHP de lire le fichier JSON, quel est l'intérêt de le décoder puis de le coder à nouveau immédiatement après? Vous vous retrouvez juste avec le même résultat que vous avez commencé. Cette réponse implique un travail inutile et un code inutile.


@ADyson vous avez raison. J'ai totalement manqué qu'il appelle déjà le fichier .json. Je pensais qu'il appelait une autre API qui est ensuite décodée en json. Je vais mettre à jour ma réponse.