Événements Discourse

Aucune erreur n’apparaît dans la console. Mais j’ai enregistré une vidéo à titre de référence.
Cela se produit sur Chrome, Firefox et Safari. Sur Safari mobile, cela ne se produit pas.

551e687bfbbedabde9921e4316eae103|vidéo

1 « J'aime »

ton lien de ta vidéo est cassé !

excuse moi je n’avais pas bien compris en effet tu as raison lorsqu’on clique dans le calendrier sur une date on ouvre le modal de création événement mais avec le bouton voulez vous abandonner. Oui en effet il y a un ptit bug :sweat_smile:

2 « J'aime »

Pour information de mon côté j’ai ajouté un bouton + d’infos pour mes utilisateurs qui ne pensent pas à cliquer sur le titre pour avoir accès au sujet. J’ai repris l’idée de @nathank sur son bouton ajouter au calendrier.

Mettre le script dans un thème composant dans la partie général /head

<script>
(() => {
    const eventInfoSelector = ".event-header .event-info";
    const eventCardSelector = ".fc-popover, .event-preview, .discourse-post-event";
    // CSS injecté propre et adapté aux thèmes Discourse (Clair/Sombre)
    const style = document.createElement("style");
    style.innerHTML = `
    .custom-topic-info-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40%; /* Prend toute la largeur pour un rendu propre sous le titre */
        box-sizing: border-box;
        margin: 12px 0 6px 0;
        padding: 10px 16px;
        
        /* Utilisation des variables natives Discourse */
        background-color: var(--tertiary) !important; /* Couleur accentuée (ex: bleu) */
        color: var(--secondary) !important;          /* Couleur de texte contrastée */
        
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s ease, transform 0.1s ease;
    }
    /* Effet au survol */
    .custom-topic-info-btn:hover {
        background-color: var(--tertiary-hover) !important;
        color: var(--secondary) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    /* Effet au clic */
    .custom-topic-info-btn:active {
        transform: translateY(0);
    }
    /* Style de l'icône SVG */
    .custom-topic-info-btn .btn-icon-svg {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    `;
    document.head.appendChild(style);
    const findTopicLink = (container) => {
        if (!container) return null;
        const links = [...container.querySelectorAll('a[href*="/t/"]')];
        if (links.length) return links[0].href;
        return null;
    };
    const createTopicInfoButton = () => {
        const eventInfo = document.querySelector(eventInfoSelector);
        if (!eventInfo || eventInfo.querySelector(".custom-topic-info-btn")) return;
        const card = eventInfo.closest(eventCardSelector) || document;
        const topicUrl = findTopicLink(card);
        if (!topicUrl) return;
        const button = document.createElement("a");
        button.className = "btn custom-topic-info-btn";
        button.title = "Voir le sujet complet";
        button.href = topicUrl;
        
        // Ajout d'une icône Info SVG harmonisée
        button.innerHTML = `
            <svg class="btn-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V240h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h40c13.3 0 24 10.7 24 24v120h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/>
            </svg>
            <span class="d-button-label">Plus d’infos</span>
        `;
        if (eventInfo.firstElementChild) {
            eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
        } else {
            eventInfo.appendChild(button);
        }
    };
    const observer = new MutationObserver(() => createTopicInfoButton());
    observer.observe(document.body, { childList: true, subtree: true });
    createTopicInfoButton();
})();
</script>

Voici l’aperçu

ou sinon

ce code là

<script>
(() => {
    const eventCardSelector = ".fc-popover, .event-preview, .discourse-post-event";

    // CSS injecté pour un rendu propre et moderne
    const style = document.createElement("style");
    style.innerHTML = `
    .custom-topic-info-wrapper {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--primary-low); /* Ligne de séparation subtile */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .custom-topic-info-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 16px;
        
        /* Style Outline élégant */
        background-color: transparent !important;
        color: var(--tertiary) !important;
        border: 1px solid var(--tertiary) !important;
        
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none !important;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* Effet de survol : le bouton se remplit */
    .custom-topic-info-btn:hover {
        background-color: var(--tertiary) !important;
        color: var(--secondary) !important;
        border-color: var(--tertiary) !important;
    }

    /* Alignement du logo information */
    .custom-topic-info-btn .btn-icon-svg {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    `;
    document.head.appendChild(style);

    const findTopicLink = (container) => {
        if (!container) return null;
        const links = [...container.querySelectorAll('a[href*="/t/"]')];
        if (links.length) return links[0].href;
        return null;
    };

    const createTopicInfoButton = () => {
        const cards = document.querySelectorAll(eventCardSelector);
        
        cards.forEach(card => {
            if (card.querySelector(".custom-topic-info-btn")) return;

            const topicUrl = findTopicLink(card);
            if (!topicUrl) return;

            const wrapper = document.createElement("div");
            wrapper.className = "custom-topic-info-wrapper";

            const button = document.createElement("a");
            button.className = "btn custom-topic-info-btn";
            button.title = "Consulter le sujet complet";
            button.href = topicUrl;
            
            // Icône "i" Information + Nouveau texte actionnable
            button.innerHTML = `
                <svg class="btn-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V240h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h40c13.3 0 24 10.7 24 24v120h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/>
                </svg>
                <span class="d-button-label">Consulter le sujet</span>
            `;

            wrapper.appendChild(button);

            // Positionnement au-dessus des options de réponse (Participera, etc.)
            const actionsContainer = card.querySelector(".status-and-options, .event-actions");
            const infoContainer = card.querySelector(".event-info");
            
            if (actionsContainer && actionsContainer.parentNode) {
                actionsContainer.parentNode.insertBefore(wrapper, actionsContainer);
            } else if (infoContainer) {
                infoContainer.appendChild(wrapper);
            } else {
                card.appendChild(wrapper);
            }
        });
    };

    const observer = new MutationObserver(() => createTopicInfoButton());
    observer.observe(document.body, { childList: true, subtree: true });

    createTopicInfoButton();
})();
</script>

l’aperçu du résultat

Vous avez le choix :rofl:

4 « J'aime »

Vous avez vraiment amélioré la facilité de créer un événement depuis les dernières mises à jours :+1:

Mais , je voulais savoir si il y a un paramètre qui empêche de créer un événement lorsqu un utilisateur clique dans l agenda. Des fois au lieu de cliquer sur l évènement il clique a côté donc cela ouvre un modal pour créer un événement :sweat_smile:

Merci

2 « J'aime »

Je sais que je suis pénible mais j’ai une autre question ou amélioration concernant les événements expirés. Elles peuvent être effacées automatiquement car elles n’ont plus t’intérêts d’être présent il me semble que le plugin évents le faisait automatiquement.

Actuellement, je le fais manuellement donc si il y a un moyen de gagner du temps :sweat_smile:

Merci à l’équipe

1 « J'aime »

Existe-t-il un moyen de permettre à l’emplacement d’un événement de réaliser une recherche, comme c’est le cas dans Google Agenda ou les événements Facebook, afin : a) d’aider l’utilisateur à choisir l’emplacement, et b) de rendre l’emplacement cliquable vers une application de cartes ?

(Je n’ai pas trouvé de solution en effectuant des recherches, mais peut-être que mes requêtes de recherche n’étaient pas optimales.)

2 « J'aime »

Le lien Locations Plugin 🌍 propose bien ce type de fonctionnalité, mais il ne s’intègre qu’avec l’alternative Events Plugin 📅.

Le développeur (@merefield) pourrait être ouvert à une intégration avec le plugin officiel, mais je suppose que cela demanderait un travail considérable pour être mis en place et maintenu — vous devriez donc absolument parrainer ce travail pour qu’il se réalise.

3 « J'aime »

J’ai essayé d’examiner cette extension Événements, mais je suis bloqué à

car le site est hors ligne depuis des mois.

1 « J'aime »

Il pourrait être utile de soumettre une demande de fonctionnalité officielle dans Contribute > Feature (balisé calendar-and-events) pour examen. Je peux imaginer que ce serait réalisable et que cela pourrait avoir une grande valeur pour beaucoup.


plus tard…
@lou l’a effectivement fait ici :

3 « J'aime »

Un message a été fusionné dans un sujet existant : Prise en charge de la carte des lieux de l’événement

Je prévois d’exporter les événements publics vers un site WordPress à l’aide d’une extension WordPress capable de lire le flux ICS issu de /discourse-post-event/events.ics. Jusqu’ici, tout va bien.

Certaines pages de ce site souhaitent afficher un sous-ensemble de ces événements, chaque page devant présenter un sous-ensemble différent.

J’espérais pouvoir étiqueter les événements avec une balise associée à chaque page, afin que celle-ci apparaisse dans la ligne CATEGORIES du fichier ICS et permette ainsi un filtrage selon la destination, mais cela ne semble pas se produire.

Je serais prêt à utiliser ?tag=[tag] dans l’URL et à faire en sorte que les différentes pages utilisent des URLs distinctes, bien que je n’aie pas trouvé de trace de cette fonctionnalité dans ce que j’ai pu consulter.

Y a-t-il quelque chose que j’aurais oublié de prendre en compte ?

Non, vous ne ratez rien (à ma connaissance).

La possibilité de filtrer le flux .ics du calendrier par catégorie et/ou par balise serait toutefois une excellente demande de fonctionnalité pour Contribute !

1 « J'aime »

Je finis par créer mon propre filtre de balises, mais je pense avoir appris que les événements « expirés » ne sont pas téléchargés via /discourse-post-event/events.ics. Je ne vois également aucun moyen de contrôler le moment où un événement devient « expiré ». Je pourrais devoir recourir à une requête Data Explorer au lieu d’utiliser /…/events.ics

[bien que je pense avoir trouvé une meilleure façon de faire cela en utilisant /discourse-post-event/event ]

1 « J'aime »

Salut, je cherche des retours sur un aspect concernant l’intégration des événements avec l’audio et le direct. Voir la dernière réponse ici → https://meta.discourse.org/t/discourse-desktop-mac-app/406912/10?u=nicolsdennis

Quelqu’un a-t-il réussi à intégrer VDO.Ninja dans le streaming en direct d’événements ? Je vois l’intégration avec Zoom et je me dis qu’il pourrait y avoir un moyen de bricoler une solution pour l’utiliser à la place de Zoom :thinking:

3 messages ont été déplacés vers un nouveau sujet : Questions sur l’intégration du direct Zoom

Les routes Événements à venir du Calendrier/Événements de Discourse semblent omettre toutes les métadonnées Open Graph et Twitter Card de la réponse HTML initiale rendue par le serveur.

Ce problème est reproductible sur un site Discourse hébergé où les pages normales émettent correctement les métadonnées sociales et où une image OpenGraph de site valide est configurée.

Exemple de route affectée :

https://www.mbacommons.com/upcoming-events/month/2026/8/1

Étapes pour reproduire

  1. Configurer une image OpenGraph de site valide.
  2. Vérifier que la page d’accueil ou un sujet normal émet les métadonnées Open Graph normales dans le HTML brut.
  3. Ouvrir /upcoming-events/month/2026/8/1.
  4. Examiner le view-source: brut / la réponse initiale du serveur, et non le DOM après exécution de JavaScript.

Résultat actuel

La route Événements à venir renvoie un code HTTP 200, mais le HTML brut contient :

  • aucun og:image
  • aucun og:title
  • aucun og:description
  • aucun og:url
  • aucune twitter:card
  • aucun twitter:image

J’ai également testé avec LinkedInBot/1.0 ; le résultat est identique.

Une audit de production en HTML brut sur le même site a compté :

  • page d’accueil : 11 balises de métadonnées sociales
  • sujet normal : 14
  • Événements à venir : 0

La page d’accueil et les sujets normaux utilisent correctement l’image OpenGraph de site configurée, donc la configuration de la marque au niveau du site fonctionne correctement.

Résultat attendu

Les routes Événements à venir devraient émettre des métadonnées sociales visibles par les robots d’indexation et rendues par le serveur, incluant au minimum :

  • og:title
  • og:description
  • og:url
  • og:image, avec repli sur l’image OpenGraph de site configurée
  • les métadonnées Twitter Card correspondantes

Ces informations doivent être présentes dans le HTML initial car LinkedIn et les robots sociaux similaires ne peuvent pas s’appuyer sur le JavaScript de thème côté client.

L’outil d’inspection de publication LinkedIn signale actuellement :

« Ajoutez une balise og:image à la page pour contrôler l’image du contenu sur LinkedIn. »

Une injection globale de head_tag dans un thème ne semble pas appropriée car les pages normales possèdent déjà des métadonnées correctes et cela pourrait créer des balises en double ou conflictuelles. Cela semble nécessiter une gestion côté serveur spécifique à la route pour les Événements à venir, ou l’utilisation du chemin de rendu des métadonnées sociales standard de Discourse.

2 « J'aime »

Peertube Live avec le calendrier et les événements de Discourse

Cela fonctionnait parfaitement avec Peertube l’été dernier (2025), en fournissant l’interface de chat avec le sujet (en utilisant l’URL vidéo /embed/xxx pour afficher la vidéo en direct, et en tenant compte du délai d’environ 30 secondes dû au P2P dans Peertube) lors de l’utilisation du tag #livestream.

Mais j’ai essayé à nouveau aujourd’hui et le chat ne semble plus être intégré à la mise en page comme avant (du moins selon mes souvenirs). De plus, il n’y a pas de bouton “Diffusion en direct” sur l’interface des événements. Est-ce normal ?

2 « J'aime »

As-tu vu les instructions récemment mises à jour ? Je pense que l’interface utilisateur a peut-être un peu changé lorsque tout a été intégré dans ce plugin.

1 « J'aime »