Modifier format date Evènement.

[photoclic]

Bonjour,

Serait-il possible de modifier le format des dates présentées dans le carré des évènements en l'agrandissant.
Au lieu du jour et du mois avoir la date en entier: jour mois en clair et année.

Spoiler:

Merci pour votre aide.

[Toryudo]

Bonjour !

Alors, on peut imaginer récupérer les dates qui sont écrites à côté.
Le plus gros problème, c'est que le format des dates qui sont écrites à côté est différent pour chaque membre inscrit.
Ca peut être de la forme :
Sam 6 Juil 2024 - 8:00
Sam 6 Juil - 8:00 (sans l'année)
06.07.24 8:00

Quand j'ai visité la page https://photoclic.forum-pro.fr/events, j'ai vu les trois tour à tour, ça veut dire que vos membres utilisent au moins ces trois-là. A cause de ça, la récupération est complexe, c'est pourquoi je vais partir de votre capture d'écran et le faire pour le format "Sam 6 Juil 2024 - 8:00". Je ne pourrai pas tous les faire, ça prendrait trop de temps et c'est un code qui deviendrait trop complexe (c'était déjà pas de la tarte rien que pour ce premier format). Voilà le script correspondant :

Code:

var mois = {
  "Jan":  "janvier",
  "Fév":  "février",
  "Mar":  "mars",
  "Avr":  "avril",
  "Mai":  "mai",
  "Juin": "juin",
  "Juil": "juillet",
  "Aoû":  "août",
  "Sep":  "septembre",
  "Oct":  "octobre",
  "Nov":  "novembre",
  "Déc":  "décembre"
};

$(function(){
  $('.EV_Item').each(function(){
    var dates = $(this).find('.EV_ItemTitle p').text().split('|');
    var format = '<p class="EV_Days">' + dates[0].trim().replace(/(\w{3}) (\d{1,2}) ([a-zA-ZÀ-ÖØ-öø-ÿ]*) (\d{4}) - [0-9:]*/, (match, p1, p2, p3, p4, p5) => { return `${p2}&nbsp;${mois[p3]}&nbsp;${p4}` }) + '</p>';

    if (dates[1]){
      format += '<hr><p class="EV_Days">' + dates[1].trim().replace(/(\w{3}) (\d{1,2}) ([a-zA-ZÀ-ÖØ-öø-ÿ]*) (\d{4}) - [0-9:]*/, (match, p1, p2, p3, p4, p5) => { return `${p2}&nbsp;${mois[p3]}&nbsp;${p4}` }) + '</p>';
    }

    $(this).find('.EV_ItemDate').html(format);
  });
});

Ne reste plus qu'à ajouter du CSS pour agrandir la case rouge :

Code:

.EV_Item .EV_ItemDate {
  width: 170px;
}

Et normalement, sur ce format, ça va fonctionner !

[photoclic]

Bonjour Toryudo.

Ce format va très bien.
Apparemment on peut régler la largeur du carré, mais pas sa hauteur.
J'ai donc élargi à 240px et c'est tout bon.

Un grand merci pour ton aide.