Bonjour,

J'utilise la librairie Fullcalendar pour afficher un calendrier sur mon site où les données de mon calendrier sont en format .ics. J'arrive à afficher le calendrier, mais afficher les données dedans est une autre histoire. Alors, je souhaite que l'on m'aide à trouver comment afficher les données d'un fichier ics dans le calendrier proposé par Fullcalendar. Merci de votre attention !

Pour l'instant j'ai fais ça et j'obtiens comme résultat :

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<?php
	$file = "http://adelb.univ-lyon1.fr/jsp/custom/modules/plannings/anonymous_cal.jsp?resources=9311&projectId=1&calType=ical&firstDate=2021-08-30&lastDate=2022-02-10";

	
	$source = fopen($file, "r");
	$xml = "";
	                   
	if(gettype($source) == "resource") { // Check here !
	    while (!feof($source)) {
	        $xml .= fgets($source, 4096);
	    }
	}

	echo $xml;


?>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='src/css/main.css' rel='stylesheet' />
<script src='https://github.com/mozilla-comm/ical.js/releases/download/v1.4.0/ical.js'></script>
<script src='src/js/main.js'></script>
<script src='src/js/main.global.js'></script>

<style>

  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #external-events {
    float: left;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
    text-align: left;
    margin-left: 3em;
    margin-top: 12em;
  }

  #external-events h2 {
    margin-top: 1em;
    margin-left: 2.5em;
  }

  #external-events .fc-event {
    margin: 10px 0;
    cursor: pointer;
  }

  #external-events .edtp{
    margin-left: 1.5em;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  #external-events p {
    margin: 1.5em 0;
    font-size: 11px;
    color: #666;
  }

  #external-events p input {
    margin: 0;
    vertical-align: middle;
  }

  #calendar {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 10px;
  }

</style>
</head>
<body>

  <?php
    $file = "http://adelb.univ-lyon1.fr/jsp/custom/modules/plannings/anonymous_cal.jsp?resources=9311&projectId=1&calType=ical&firstDate=2021-08-30&lastDate=2022-02-10";

    
    $source = fopen($file, "r");
    $xml = "";
                       
    if(gettype($source) == "resource") { // Check here !
        while (!feof($source)) {
            $xml .= fgets($source, 4096);
        }
    }
  ?>
  <script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
      },
      events: {
        url: <?php $xml; ?>,
        format: 'ics',
      },
    });

    calendar.render();
  });

</script>
    <div id='external-events'>
      <h2>EDT</h2>
      <div id='external-events-list'>
        <div class='fc-event'><b>Semestre 1</b></div>  
        <select s1="Semestre1" size="1">
          <option>G1S1
          <option>G2S1
          <option>G3S1
          <option>G4S1
          <option>G5S1
          <option>G6S1
        </select>
        <div class='fc-event'><b>Semestre 2</b></div> 
        <select s2="Semestre2" size="1">
          <option>G1S2
          <option>G2S2
          <option>G3S2
          <option>G4S2
          <option>G6S2
        </select>
        <div class='fc-event'><b>Semestre 3</b></div> 
        <select s3="Semestre3" size="1">
          <option>G1S3
          <option>G2S3
          <option>G3S3
          <option>G4S3
          <option>G6S3
        </select>
        <div class='fc-event'><b>Semestre 4</b></div> 
        <select s4="Semestre4" size="1">
          <option>G1S4
          <option>G2S4
          <option>G3S4
          <option>G4S4
          <option>G6S4
        </select>
        <div class='fc-event'><b>Salles info</b></div>
        <select si="Salles info" size="1">
          <option>S01
          <option>S03
          <option>S13
          <option>S14
          <option>S16
          <option>S17
          <option>S22
          <option>S24
        </select>
        <div class='fc-event'><b>Salles TD</b></div>
        <select st="Salles TD" size="1">
          <option>S10
          <option>S11
          <option>S12
          <option>S15
          <option>S26
        </select>
        <div class='fc-event'><b>Autres salles</b></div>
        <select sa="Autres salles" size="1">
          <option>S18 - TP Réseau
          <option>S21
          <option>S23 - TP Réseau
          <option>S25 - Salle de réunion
        </select>
        <input class="edtp" type="button" value="EDT Personnel">
      </div>
    </div>
    <div id='calendar'></div>
    <div style='clear:both'></div>
  </div>


</body>
</html>

-
Edité par IteWaseMi 16 septembre 2021 à 18:06:13

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Fichier ics)

Forums des Zéros

Fichier ics avec librairie Fullcalendar

Fullcalendar extension icalendar

Mauvais titre

Fichier ics avec librairie Fullcalendar

Fichier ics avec librairie Fullcalendar

Fullcalendar extension icalendar

Mauvais titre

Fichier ics avec librairie Fullcalendar

Supprimer

Modérer

Signaler le message aux modérateurs