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.
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 ![]()
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 ![]()
Vous avez vraiment amélioré la facilité de créer un événement depuis les dernières mises à jours ![]()
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 ![]()
Merci
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 ![]()
Merci à l’équipe
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.)
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.
J’ai essayé d’examiner cette extension Événements, mais je suis bloqué à
car le site est hors ligne depuis des mois.
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 :
Un message a été fusionné dans un sujet existant : Prise en charge de la carte des lieux de l’événement

