Intégrer évenement calendrier à template HTML5

Bonjour à tous,

passionné d'open-source et Debian depuis 2004, je découvre petit à petit la construction de sites en autodidacte.
je suis en train de travailler bénévolement à un site internet pour une association loi 1901.
Je pense utiliser le template gratuit https://technext.github.io/educenter/index.html

Mais je n'arrive pas à voir comment faire pour intégrer les événements d'un calendrier (qui pourrait être GoogleCalendar au pire, vu qu'il est bien documenté, même si je préférerais quelque chose de libre) directement au site.

Je m'explique, j'aimerais que les bénévoles de l'association puissent alimenter directement un calendrier online (comme je disais au pire google calendar, mais https://docs.framasoft.org/fr/agenda/ ça serait bien) avec les événements de l'asso.

Et puis, qu'à travers une API je puisse "lire" ces informations (possiblement en json) et les intégrer dans le template avec javascript.

J'ai réussi à faire ça pour les articles wordpress dans un autre site (letterali.fr) en suivant ce tuto https://www.freecodecamp.org/news/how-to-integrate-a-static-website-with-wordpress/
J'ai donc pu intégrer les derniers articles de blog dans la page statique du site.

Comment je dois procéder pour faire la même chose mais pour les événements du calendrier ?

En gros, je voudrais éviter de modifier manuellement le html pour chaque nouveau événement, mais que cela se fasse automatiquement...

Si vous avez des tutos à suivre, des conseils de recherche je suis preneur.

Je ne poste pas le html ni le css car je ne crois pas soit utile mais si jamais je vais vous le mettre.

J'imagine qu'il faut que je crée ma clé API (selon ce tuto, par exemple : https://www.geeksforgeeks.org/how-to-integrate-google-calendar-in-node-js/ )
puis que je crée un fichier event.js

//Creating an aunthenticated client to call events.insert()
 
const auth = new google.auth.GoogleAuth({
    keyFile: '<FULL-PATH-OF-JSON-FILE>',
    scopes: 'https://www.googleapis.com/auth/calendar', //full access to edit calendar
  });
  auth.getClient().then(a=>{
    calendar.events.insert({
      auth:a,
      calendarId: GOOGLE_CALENDAR_ID,
      resource: event,
    }, function(err, event) {
      if (err) {
        console.log('There was an error contacting the Calendar service: ' + err);
        return;
      }
      console.log('Event created: %s', event.data);
      res.jsonp("Event successfully created!");
    });
  })

/**
   * Print the summary and start datetime/date of the next ten events in
   * the authorized user's calendar. If no events are found an
   * appropriate message is printed.
   */
  function listUpcomingEvents() {
    var request = gapi.client.calendar.events.list({
      'calendarId': 'primary',
      'timeMin': (new Date()).toISOString(),
      'showDeleted': false,
      'singleEvents': true,
      'maxResults': 10,
      'orderBy': 'startTime'
    });

    request.execute(function(resp) {
      var events = resp.items;
      appendPre('Upcoming events:');

      if (events.length > 0) {
        for (i = 0; i < events.length; i++) {
          var event = events[i];
          var when = event.start.dateTime;
          if (!when) {
            when = event.start.date;
          }
          appendPre(event.summary + ' (' + when + ')')
        }
      } else {
        appendPre('No upcoming events found.');
      }

    });
  }

Voilà, je vais faire quelques essais. Le fait d'écrire ce message m'a bien aidé car j'ai trouvé ça :
https://www.youtube.com/watch?v=SOsGToYI0MQ
et ça https://github.com/coding-in-public/google-calendar-event-page

C'est exactement ce que je cherche pour la page d'accueil. Mais j'aimerais éventuellement aussi pouvoir renseigner directement les infos dans la page event.html
Je vais tester, mais si jamais vous avez des samples utiles j'accueille volontiers vos conseils.

Merci du partage
Modifié par Egrevisse (08 Apr 2022 - 13:47)