Web 2.0
Multimédia
Internet - AI
Programmation...

Intégrateur Web Multimédia - Raphael Lecerf Gestionnaire Plateforme
bandeau

Comment créer un planning interactif de conférence sur 3 jours avec FullCalendar.js (responsive & RGAA)

03 juin 2025 HTML5, JAVASCRIPT & JQUERY, LABO & TESTS, ACCESSIBILITE
FullCalendar CSS Accessibilité Web RGAA Développement Web Agenda Interactif Planning Événementiel JavaScript Script HTMLCSSJS

Vous organisez une conférence, un séminaire ou un événement sur plusieurs jours ? Un planning clair, interactif et responsive est un atout indispensable pour vos visiteurs.

Dans cet article, découvrez comment créer un planning interactif sur 3 jours avec la bibliothèque JavaScript FullCalendar.js, tout en respectant les bonnes pratiques d’accessibilité numérique (RGAA 4.1).

 

aperçu FullCalendar

 

🧰 Technologies utilisées

  • HTML5 + CSS3

  • JavaScript ES6

  • FullCalendar.js v6

  • Responsive design

  • Accessibilité ARIA & RGAA 4.1

📆 Cas concret : conférence du 19 au 21 juin 2025

Dans cet exemple, nous construisons le programme d’une conférence sur 3 jours avec des tables rondes, des pauses café et des débats. L'utilisateur peut cliquer sur un événement pour afficher les détails juste en dessous du calendrier.

🧩 Les points techniques clés

🔹 1. Limiter la navigation aux 3 jours

validRange: {
  start: '2024-06-19',
  end: '2024-06-22' // le 22 est exclu
}

🔹 2. Afficher les détails sous le calendrier

eventClick: function(info) {
  document.getElementById('eventDetailTitle').innerText = info.event.title;
  document.getElementById('eventDetailStart').innerHTML = `<strong>Début :</strong> ${info.event.start.toLocaleString('fr-FR')}`;
  document.getElementById('eventDetailDescription').innerHTML = `<strong>Description :</strong><br>${info.event.extendedProps.description || 'Aucune description.'}`;
  document.getElementById('eventDetail').style.display = 'block';
}

📱 Responsive + Accessibilité

  • 💡 Sur smartphone : affichage jour par jour

  • 🦻 Tous les titres et contenus sont accessibles aux lecteurs d’écran

  • 🧩 Structure claire : balises HTML sémantiques, aria-label, sr-only

💡 Améliorations possibles du script

  • Ajout d’un filtre par type d’événement

  • Affichage des lieux ou salles

  • Intégration dans un CMS comme WordPress, Joomla ou Drupal

  • Impression ou export PDF du programme

📚 Ressources utiles

📌 Demonstration du Calendrier interactif

📢 Conclusion

Grâce à FullCalendar.js, vous pouvez intégrer un planning événementiel clair, responsive et accessible sur votre site sans base de données. Ce type de solution s’adapte parfaitement à des conférences, séminaires, événements associatifs ou scolaires.

En limitant la navigation, en personnalisant les entêtes de colonnes et en affichant les détails de manière fluide, vous améliorez nettement l’expérience utilisateur tout en respectant les normes d’accessibilité web.

 

🧰 Le code complet

<!-- ✅ FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" />

<style>
  #calendar {
    max-width: 1200px;
    margin: auto;
  }

  .fc-col-header-cell-cushion {
    display: block;
    text-align: center;
  }

  .fc-col-header-cell-cushion span {
    display: block;
  }

  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #eventDetail {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 20px;
    border-top: 3px solid #0d6efd;
    background: #f8f9fa;
    border-radius: 8px;
    display: none;
  }

  #eventDetail h4 {
    color: #0d6efd;
  }

  #eventDetail p {
    color: #212529;
  }
</style>

<!-- ✅ Calendrier -->
<div id="calendar" aria-label="Conference agenda, time grid view over three days"></div>

<!-- ✅ Bloc de détail -->
<div id="eventDetail" aria-live="polite">
  <h4 id="eventDetailTitle"></h4>
  <p id="eventDetailStart"></p>
  <p id="eventDetailEnd"></p>
  <p id="eventDetailDescription"></p>
</div>

<!-- ✅ FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const isMobile = window.innerWidth < 768;

    const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
      initialView: isMobile ? 'timeGridDay' : 'timeGridThreeDay',
      views: {
        timeGridThreeDay: {
          type: 'timeGrid',
          duration: { days: 3 },
          buttonText: '3 days'
        }
      },
      headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: isMobile ? 'timeGridDay,listDay' : 'timeGridThreeDay,timeGridDay,listDay'
      },
      locale: 'en',
      initialDate: '2025-06-19',
      validRange: {
        start: '2025-06-19',
        end: '2025-06-22' // exclusive: 22 is not included
      },
      slotMinTime: "08:00:00",
      slotMaxTime: "19:00:00",
      allDaySlot: false,

      // ✅ En-têtes <p> au lieu de <a>
      dayHeaderContent: function(arg) {
        const date = arg.date;
        const weekday = date.toLocaleDateString('en-US', { weekday: 'long' });
        const shortDay = date.toLocaleDateString('en-GB', { weekday: 'short', day: '2-digit', month: '2-digit' });
        return {
          html: `
            <p aria-label="${date.toLocaleDateString('en-US')}" class="fc-col-header-cell-cushion">
              <span aria-hidden="true">${shortDay}</span>
              <span class="sr-only">${weekday}, ${date.toLocaleDateString('en-US')}</span>
            </p>`
        };
      },

      // ✅ Affichage des détails en dessous
      eventClick: function(info) {
        info.jsEvent.preventDefault();

        const event = info.event;
        const start = event.start.toLocaleString('en-GB');
        const end = event.end ? event.end.toLocaleString('en-GB') : '';
        const description = event.extendedProps.description || 'No additional description.';

        document.getElementById('eventDetailTitle').innerText = event.title;
        document.getElementById('eventDetailStart').innerHTML = `<strong>Start:</strong> ${start}`;
        document.getElementById('eventDetailEnd').innerHTML = end ? `<strong>End:</strong> ${end}` : '';
        document.getElementById('eventDetailDescription').innerHTML = `<strong>Description:</strong><br>${description}`;

        const detailBlock = document.getElementById('eventDetail');
        detailBlock.style.display = 'block';
        detailBlock.scrollIntoView({ behavior: 'smooth' });
      },

      // ✅ Événements
      events: [
        {
          title: 'Roundtable: Artificial Intelligence',
          start: '2025-06-19T09:00:00',
          end: '2025-06-19T10:30:00',
          color: '#2980b9',
          description: 'Discussion among experts on the evolution of AI in public and private sectors.'
        },
        {
          title: 'Coffee Break',
          start: '2025-06-19T10:30:00',
          end: '2025-06-19T11:00:00',
          color: '#95a5a6',
          description: 'Coffee and pastries in the central atrium.'
        },
        {
          title: 'Debate: AI and Employment',
          start: '2025-06-19T11:00:00',
          end: '2025-06-19T12:00:00',
          color: '#27ae60',
          description: 'What jobs for tomorrow? Perspectives from economists and sociologists.'
        },
        {
          title: 'Roundtable: Digital Ethics',
          start: '2025-06-20T09:00:00',
          end: '2025-06-20T10:30:00',
          color: '#8e44ad',
          description: 'Ethical implications of data collection and use.'
        },
        {
          title: 'Coffee Break',
          start: '2025-06-20T10:30:00',
          end: '2025-06-20T11:00:00',
          color: '#95a5a6'
        },
        {
          title: 'Debate: Freedom and Technology',
          start: '2025-06-20T11:00:00',
          end: '2025-06-20T12:00:00',
          color: '#27ae60',
          description: 'Debate about surveillance, censorship and civil liberties.'
        },
        {
          title: 'Roundtable: Education & Tech',
          start: '2025-06-21T09:00:00',
          end: '2025-06-21T10:30:00',
          color: '#d35400',
          description: 'Hybrid learning, MOOCs, and flipped classrooms for future education.'
        },
        {
          title: 'Coffee Break',
          start: '2025-06-21T10:30:00',
          end: '2025-06-21T11:00:00',
          color: '#95a5a6'
        },
        {
          title: 'Debate: Teaching in Digital Era',
          start: '2025-06-21T11:00:00',
          end: '2025-06-21T12:00:00',
          color: '#27ae60',
          description: 'How to adapt teaching to the fast-changing digital environment.'
        }
      ]
    });

    calendar.render();
  });
</script>

Catégories

Derniers Articles

Mots clés