Json Framagenda : intégrer évenements HTML5 avec JS

Codeurs Sites web
1

Bonjour à tous,

je suis en train de contribuer bénévolement à une association 1901 en créant leur site internet.

J’utlise un template bootstrap que je modifie. J’ai installé WP, mais pour la gestion du blog uniquement.

Le souhait des membres de l’association serait d’intégrer les évenements parus sur le framagenda directement au template.
J’avais fait cela pour intégrer les nouveaux billets du blog WP à la page d’accueil, en « pechant » à travers le ficher JSON le contenu, en modifiant le css et en créant un fichier Javascript.
En gros, chaque nouveau billet de blog est directement stylé sur la page d’accueil.

Je souhaiterais faire la même chose avec Framagenda, mais je ne trouve pas de documentation au sujet.
Pour l’instant j’ai juste integré un

Je reste naturellement à votre disposition pour vous fournir les fichiers HTML, CSS et JS si jamais cela pourrait être utile.

Merci beaucoup pour toute piste à suivre :slight_smile:

2

Bonjour,

Une fois l’agenda publié en ligne, vous pouvez copier le lien vers le fichier ICS (du type https://framagenda.org/remote.php/dav/public-calendars/[code-secret]?export

Après avoir récupéré le fichier avec une requête GET (par exemple avec fetch ou axios), vous pouvez utiliser un outil comme GitHub - mozilla-comm/ical.js: Javascript parser for ics (rfc5545) and vcard (rfc6350) data pour parser les données.

Notez que vous devrez avoir une politique CSP cohérente pour autoriser l’appel réseau à framagenda.org depuis votre site.

3

Merci beaucoup pour ta reponse !

Je me penche sur la question selon tes suggestions et je reviens pour présenter mes doutes ou la solution trouvée grâce à cette piste :slight_smile:

4

Merci de ta réponse, comme il s’agit d’un projet associatif en bénévole, il n’y a pas le feu.

Du coup, six mois après je suis toujours au même point…mais j’ai bien peur que cela soit en dehors de ma porté si je ne trouve pas quelque tuto de base…

J’ai essayé de suivre tes conseils. Alors, nickel l’adresse de mon agenda, je l’ai.
J’ai donc crée mon event.js (que je rappelle dans mon HTML) en commençant par fech

onst spinner = document.getElementById("spinner");

fetch('https://framagenda.org/remote.php/dav/calendars/andiamo-association/andiamo/').then(function (response) {
	// The API call was successful!
	if (response.ok) {
        return response.json();
	} else {
		return Promise.reject(response);
	}
}).then(function (data) {
    spinner.remove()
    for (let i = 0; i < 3; i++) {

        cardCreation = '<div class="col-md-4 mb-5">'
        cardCreation += '<div class="card h-100">'
        cardCreation += '<div class="card-body">'
        cardCreation += '<h2 id="test" class="card-title">' + data[i].title.rendered + '</h2>'
        cardCreation += '<p class="card-text">' + data[i].excerpt.rendered + '</p>'
        cardCreation += '</div>'
        cardCreation += '<div class="card-footer"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-' + data[i].id + '">Read More</button></div>'
        cardCreation += '</div>'
        cardCreation += '</div>'

        modalCreation = '<div class="modal fade" id="modal-' + data[i].id +'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">'
        modalCreation += '<div class="modal-dialog" role="document">'
        modalCreation += '<div class="modal-content">'
        modalCreation += '<div class="modal-header">'
        modalCreation += '<h5 class="modal-title" id="exampleModalLongTitle">' + data[i].title.rendered + '</h5>'
        modalCreation += '</div>'
        modalCreation += '<div class="modal-body">' + data[i].content.rendered + '</div>'
        modalCreation += '<div class="modal-footer">'
        modalCreation += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>'
        modalCreation += '</div>'
        modalCreation += '</div>'
        modalCreation += '</div>'
        modalCreation += '</div>'

        document.querySelector("#wrapper").insertAdjacentHTML("beforeend",cardCreation)
        document.querySelector("#wrapper").insertAdjacentHTML("beforeend",modalCreation)
      }
}).catch(function (err) {
	// There was an error
    spinner.remove();
    errorMsg = '<div class="alert alert-danger" role="alert">'
    errorMsg += 'Sorry, we can\'t retrieve posts at the moment. Please visit www.ourblog.com'
    errorMsg += '</div>'

    document.querySelector("#wrapper").insertAdjacentHTML("beforeend",errorMsg)

	console.warn('Something went wrong.', err);
});

Sauf que je dois modifier les variables "title.rendered ", « excerpt.rendered » avec celles des informations des events, j’imagine !
Mais je ne sais pas quoi mettre…
Dans le cas des articles WP, je pouvais accéder aux json avec les informations et donc les modifier dans le JS. Mais là, je ne sais pas trop quoi faire de l’outil que tu m’as passé…

Encore merci