[javascript] Integrer evenement calendrier à site statique html5

Tags: #<Tag:0x00007f8a4c8c7188>

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.
Je pense utiliser le template gratuit Educenter

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 Framagenda / Nextcloud · Documentation Framasoft ç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 ( www.letterali.fr ) en suivant ce tuto 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 : How to integrate Google Calendar in Node.js ? - GeeksforGeeks )
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 :

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.

Et encore plus en utilisant du libre et non pas google :slight_smile:

Merci du partage

A priori le thème Educenter est relatif à Bootstrap. Il serait bon de le préciser si tu travailles sur cet environnement.
Il existe de nombreux plugins sous Wordpress ou Dollibar en Php pour la gestion des calendriers mais la plupart sont bridés ou proposent des options payantes; ils restent tout de même des bons points de départ, des sources d’inspiration.
Concernant Framagenda/Nextcloud, qu’en est-il de la protection des données ? En d’autres termes, envoyer des agendas sur ces plateformes (et sur bien d’autres) risque au final de partager des données personnelles, de communiquer les disponiblilités… Une solution plus sécurisée serait certainement de s’inspirer de ce qui existe déjà et de coder toi même le cryptage des données transmises/stockées sur un serveur de stokage séparé du serveur de l’application web.

Rebonjour à tous, j’avoue que j’avais un peu delaissé cette fonctionnalité…j’avais juste mis un iframe avec le framagenda et puis voilà.

Eh bah, maintenant, à niveau perso, je viens de paramétrer baikal pour synchroniser mes calendrier…et là je me demande si je ne peux pas me servir de baikal pour faire ce que je veux.
À priori, il y a un plugin pour le partage des calendriers (bien que ce ne soit pas implémenté d’office) et j’ai lu de certains forums qu’on pouvait se servir de caldav à la place d’une rest api pour y lire les informations.

En vrai tout cela dépasse un peu ma bien maigre compréhension de ce qui est développement web.

Mais si jamais il y en a qui passent par là et savent me donner une piste, ça serait top.

Sinon, il faudra vraiment que je fasse une formation sérieuse à la programmation :wink:

ps. oui, c’est un thème bootstrap, mais je ne connais pas ce framework, alors je m’en sers juste comme template, (j’en modifie le code html et css à la main avec atom). C’est une hérésie ? (c’est comme ça qu’on m’avait appris en cours d’informatique web à la fac). Certes, le responsive ça marche moins bien du coup :rofl: