Module calendrier = date du jour en gras

[Zaydia]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lubiscrap.meilleurforum.com/

Description du problème

Bonjour,

Je souhaiterais mettre la date du jour de mon module Calendrier de la colonne de gauche en gras.

Sur la page principale du calendrier, la date du jour est bien en bold (voir screen partie centrale) mais il m'est impossible de le faire sur le module.

J'ai bien essayé de trouver le bout de code dans les templates "Calendrier" mais en vain...

Si quelqu'un pouvait m'aider ?

Merci d'avance


Zaydia

[Invité]

Bonjour,

Peut-être pouvez-vous simplement vous inspirer de la réponse ici :
https://forum.forumactif.com/t334150-calendrier-date-du-jour

avec :

Code:

.quote {
font-weight:bold;}

Cordialement.

[Invité]

Salut Zaydia et Kinotto,

Bonjour,
Peut-être pouvez-vous simplement vous inspirer de la réponse ici :
https://forum.forumactif.com/t334150-calendrier-date-du-jour
avec :

Code:

.quote {
font-weight:bold;}


Cordialement.

Hum je ne vois pas le rapport avec le sujet .

Zaydia ,

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style


ajoutes ceci:

Code:



/*Les jours de la semaine du widget calendrier*/
#left #calendar .table1 tr th{color:red;font-weight:bold;}
/*Les cellules du widget du calendrier*/
#left #calendar .table1 tr td{color:green;font-weight:bold;}



Penses à cliquer sur le bouton

J'ai volontairement changé la couleur pour les deux parties , à toi de les personnaliser ensuite .

a++

[Zaydia]

Merci à vous deux malheureusement le problème n'est pas résolu . Les codes css que vous m'avez proposé ne correspondent pas à ma demande.

Ce que j'aimerais c'est mettre en gras UNIQUEMENT le texte de la cellule du jour actuel. ( et non toutes les cellules ou ligne )

Encore merci à la personne qui saura m'aider

Zaydia

[Invité]

Hello Zaydia

Ce que j'aimerais c'est mettre en gras UNIQUEMENT le texte de la cellule du jour actuel et non toutes les cellules ou ligne

Hum sur la page du calendrier alors ?

Sur la page principale du calendrier, la date du jour est bien en bold (voir screen partie centrale) mais il m'est impossible de le faire sur le module.

Si tu veux avoir le jour en caractère gras sur le widget (module) cela ne sera pas possible chère amie .


a++

[Neptunia]

Coucou Zaydia et Milouze ^^

Si tu veux avoir le jour en caractère gras sur le widget (module) cela ne sera pas possible chère amie .

Chez Forumactif rien n'est possible jusqu'à ce qu'on démontre le contraire !!

Code fonctionnel sous phpBB3 (et il me semble aussi sur toutes les autres versions)
Javascript à activer sur toutes les pages

Code:

$(function() {
    var timeSince1970 = new Date();
    var dayOTM = timeSince1970.getDate();
switch (dayOTM) {
  case 31:
$('div#calendar td:contains("31")').css('font-weight','bold');
    break;
  case 30:
$('div#calendar td:contains("30")').css('font-weight','bold');
    break;
  case 29:
$('div#calendar td:contains("29")').css('font-weight','bold');
    break;
  case 28:
$('div#calendar td:contains("28")').css('font-weight','bold');
    break;
  case 27:
$('div#calendar td:contains("27")').css('font-weight','bold');
    break;
  case 26:
$('div#calendar td:contains("26")').css('font-weight','bold');
    break;
  case 25:
$('div#calendar td:contains("25")').css('font-weight','bold');
    break;
  case 24:
$('div#calendar td:contains("24")').css('font-weight','bold');
    break;
  case 23:
$('div#calendar td:contains("23")').css('font-weight','bold');
    break;
  case 22:
$('div#calendar td:contains("22")').css('font-weight','bold');
    break;
  case 21:
$('div#calendar td:contains("21")').css('font-weight','bold');
    break;
  case 20:
$('div#calendar td:contains("20")').css('font-weight','bold');
    break;
  case 19:
$('div#calendar td:contains("19")').css('font-weight','bold');
    break;
  case 18:
$('div#calendar td:contains("18")').css('font-weight','bold');
    break;
  case 17:
$('div#calendar td:contains("17")').css('font-weight','bold');
    break;
  case 16:
$('div#calendar td:contains("16")').css('font-weight','bold');
    break;
  case 15:
$('div#calendar td:contains("15")').css('font-weight','bold');
    break;
  case 14:
$('div#calendar td:contains("14")').css('font-weight','bold');
    break;
  case 13:
$('div#calendar td:contains("13")').css('font-weight','bold');
    break;
  case 12:
$('div#calendar td:contains("12")').css('font-weight','bold');
    break;
  case 11:
$('div#calendar td:contains("11")').css('font-weight','bold');
    break;
  case 10:
$('div#calendar td:contains("10")').css('font-weight','bold');
    break;
  case 9:
$('div#calendar td:contains("9")').css('font-weight','bold');
$('div#calendar td:contains("19")').css('font-weight','normal');
$('div#calendar td:contains("29")').css('font-weight','normal');
    break;
  case 8:
$('div#calendar td:contains("8")').css('font-weight','bold');
$('div#calendar td:contains("18")').css('font-weight','normal');
$('div#calendar td:contains("28")').css('font-weight','normal');
    break;
  case 7:
$('div#calendar td:contains("7")').css('font-weight','bold');
$('div#calendar td:contains("17")').css('font-weight','normal');
$('div#calendar td:contains("27")').css('font-weight','normal');
    break;
  case 6:
$('div#calendar td:contains("6")').css('font-weight','bold');
$('div#calendar td:contains("16")').css('font-weight','normal');
$('div#calendar td:contains("26")').css('font-weight','normal');
    break;
  case 5:
$('div#calendar td:contains("5")').css('font-weight','bold');
$('div#calendar td:contains("15")').css('font-weight','normal');
$('div#calendar td:contains("25")').css('font-weight','normal');
    break;
  case 4:
$('div#calendar td:contains("4")').css('font-weight','bold');
$('div#calendar td:contains("14")').css('font-weight','normal');
$('div#calendar td:contains("24")').css('font-weight','normal');
    break;
  case 3:
$('div#calendar td:contains("3")').css('font-weight','bold');
$('div#calendar td:contains("13")').css('font-weight','normal');
$('div#calendar td:contains("23")').css('font-weight','normal');
$('div#calendar td:contains("30")').css('font-weight','normal');
$('div#calendar td:contains("31")').css('font-weight','normal');
    break;
  case 2:
$('div#calendar td:contains("2")').css('font-weight','bold');
$('div#calendar td:contains("12")').css('font-weight','normal');
$('div#calendar td:contains("20")').css('font-weight','normal');
$('div#calendar td:contains("21")').css('font-weight','normal');
$('div#calendar td:contains("22")').css('font-weight','normal');
$('div#calendar td:contains("23")').css('font-weight','normal');
$('div#calendar td:contains("24")').css('font-weight','normal');
$('div#calendar td:contains("25")').css('font-weight','normal');
$('div#calendar td:contains("26")').css('font-weight','normal');
$('div#calendar td:contains("27")').css('font-weight','normal');
$('div#calendar td:contains("28")').css('font-weight','normal');
$('div#calendar td:contains("29")').css('font-weight','normal');
    break;
  case 1:
$('div#calendar td:contains("1")').css('font-weight','bold');
$('div#calendar td:contains("10")').css('font-weight','normal');
$('div#calendar td:contains("11")').css('font-weight','normal');
$('div#calendar td:contains("12")').css('font-weight','normal');
$('div#calendar td:contains("13")').css('font-weight','normal');
$('div#calendar td:contains("14")').css('font-weight','normal');
$('div#calendar td:contains("15")').css('font-weight','normal');
$('div#calendar td:contains("16")').css('font-weight','normal');
$('div#calendar td:contains("17")').css('font-weight','normal');
$('div#calendar td:contains("18")').css('font-weight','normal');
$('div#calendar td:contains("19")').css('font-weight','normal');
$('div#calendar td:contains("21")').css('font-weight','normal');
$('div#calendar td:contains("31")').css('font-weight','normal');
    break;
}
});

Je pense qu'on peut faire beaucoup plus court, mais je n'ai pas trouvé.

[Invité]

Hello Neptunia ,
pas besoin pour le widget le jour est déjà balisé par font-weight:bold .
Ensuite Zaydia demande que le jour soit mit en évidence et non les cases numérotées!!

Ajoutes ceci et tu comprendras pour les widgets:

Code:

#left #calendar .table1 tr th {font-weight: 700;color: red;}

Enfin c'est ce que j'ai pu traduire .

a++

[Neptunia]

Bah non, le jour est bien en gras, mais sur la page du calendrier, et non sur le widget (seuls les jours avec événement(s) sont en gras.

En revanche, mon code me fournit plus de questions que de réponses.
En l'état il me graisse la date du 8 juillet sans graisser les 18 et 28 comme à mon premier jet. Mais si je change la date système, et bien la fin du script semble ne plus fonctionner. Alors que le début fonctionne (j'avais mis deux alert, l'une sur le nombre de millisecondes écoulées depuis 1970, l'autre sur le numéro du jour dans le mois).

[Invité]

Re,

Bah non, le jour est bien en gras, mais sur la page du calendrier, et non sur le widget (seuls les jours avec événement(s) sont en gras.

Hum autant pour moi j'avais créé un événement pour cette journée justement .

En l'état il me graisse la date du 8 juillet sans graisser les 18 et 28 comme à mon premier jet. Mais si je change la date système, et bien la fin du script semble ne plus fonctionner. Alors que le début fonctionne (j'avais mis deux alert, l'une sur le nombre de millisecondes écoulées depuis 1970, l'autre sur le numéro du jour dans le mois).

De mon côté j'ai le même rendu mais ne comprend pas trop le fonctionnement avec mes faibles connaissances
dans ce domaine:
Toutes les occurrences "case" correspondent aux cases du Widget ?
Merci

Avec peu de style on arrive à nos fins pour coloriser la case du jour:
Pour la version phpbb2 , phpbb3 et Invision

Code:


/*Les cases du calendrier*/
#left #calendar .table1 td.row3.hover-td.center ,
#left #calendar .table1 td.row2.hover-td.center
{
background:white !important;
font-weight:normal !important;
color:green !important;
}
/*La case du jour*/
#left #calendar .table1 td.hover-td.center
{
background:black !important;
font-weight:bold !important;
color:violet !important;
}


Pour la version punbb

Code:


    /*Les jours du calendrier*/

#left #calendar .table tr th{font-weight:bold;}
#left #calendar .table td.row3.hover-td.center ,
#left #calendar .table td.row2.hover-td.center
{
background:white !important;
font-weight:normal !important;
color:green !important;
}

#left #calendar .table td.hover-td.center
{
background:black !important;
font-weight:bold !important;
color:violet !important;
}


a++

[Neptunia]

Ici case veut dire cas (anglais) et non cases (français)

Code:

var timeSince1970 = new Date();

me donne un nombre de millisecondes écoulées depuis le 1^er janvier 1970. Que je stocke dans une variable.

Code:

var dayOTM = timeSince1970.getDate();

Ensuite depuis ce nombre de millisecondes je vais récupérer la date du jour (résultat, un entier de 1 à 31). Même chose, j'enregistre le résultat dans une variable.

Et là où ça devient interessant, j'utilise

Code:

switch (valeur) {
...
}

On sait donc que dayOTM prend une valeur de 1 à 31 et on va donc définir 31 blocs d'instructions

Code:

case xxx:
... instructions;
break;

De 10 à 31, c'est facile, il n'y a qu'à récupérer la seule cellule qui contienne cette valeur et la passer en gras.
De 1 à 9 c'est plus compliqué parce qu'un :contains va nous sortir pour aujourd'hui non seulement le 8, mais aussi le 18 et le 28. Je graisse donc la cellule ciblée avant de dégraisser les cellules impactées contre notre volonté.

P.S. L'instruction break ordonnne au script d'ignorer les cas de figure qui suivent et de sortir aussitôt de la boucle switch.

switch sur Mozilla Developer Network

---

Code:

.table1 td.hover-td.center

Je n'ai pas testé, mais le souci avec ton CSS est qu'il s'applique à toutes les cellules du calendrier puisqu'elles ont toutes pour class hover-td et center

Avec un peu de nth on pourrait cibler une ligne (donc une semaine) ou une colonne (lundi, mardi etc etc) mais il me semble qu'il est impossible de sélectionner un jour précis (et vide) sans recourir à un script.

[no_way]

Bonjour d'après ce que j'ai compris:

Code:

$(function() {
$('div#calendar td:contains('+new Date().getDate()+')').css('font-weight','bold');
});

Sinon par l'assignation d'une classe CSS:

Code:

$(function() {
$('div#calendar td:contains('+new Date().getDate()+')').addClass('calendrier_aujourdhui');
});

et la classe CSS en question:

Code:

.calendrier_aujourdhui{
font-weight:bold
}

Edit:
je viens de voir d'où provient le souci, je fais une test rapide et reviens

[Neptunia]

Bonjour no_way


Je note soigneusement ton code, parce que je n'étais pas parvenue à mettre une variable comme argument d'un :contains (d'où mon code à rallonge)

Cependant il reste le problème des 9 premiers jours.
Si nous sommes le 8, le code va graisser les dates du 8, 18 et 28.

[no_way]

Oui j'avais lu en diagonale (pour changer tiens ...)

Voici le code pour l'ajout de la classe calendrier_aujourdhui:

Code:

$(function () {
    var aujourdhui = new Date().getDate();
    $('div#calendar td').each(function () {
        if ($(this).text() == aujourdhui) $(this).addClass('calendrier_aujourdhui')
    })
});

[Invité]

Re Neptunia,

Merci beaucoup pour ces explications .

Je n'ai pas testé, mais le souci avec ton CSS est qu'il s'applique à toutes les cellules du calendrier puisqu'elles ont toutes pour class hover-td et center

Hum le code source du widget:






Pour la version phpbb3 car je n'ai pas testé les autres,
pour le widget calendrier:
Le jour actif a bien cette class (dépourvue de la class .row3 et .row2):

Code:


.hover-td.center


Et les autres celle-ci :

Code:


.row3.hover-td.center


Et

Code:


.row2.hover-td.center


Donc un simple style fait l'affaire .

Hello no_way

a++

[Neptunia]

Cette fois on recherche non plus la présence d'une chaîne mais une égalité stricte et le code fonctionne à merveille, merci !

---

Milouze,

Maintenant je saisis ton raisonnement mais :

Si tu commence par formater les cellules avec row2/row3 et qu'ensuite tu formate les cellules td.hover-td.center avec le paramètre !important ça devrait écraser le réglage précédent parce que td.hover-td.center va inclure toutes les cellules ayant pour classes hover-td et center que ces classes soient seules ou accompagnées par exemple d'un row2.

Donc ok pour l'approche, mais en formattant d'abord td.hover-td.center avant de se pencher sur le cas des .row2.hover-td.center et .row3.hover-td.center

[no_way]

De rien mais je viens de penser à une solution plus simple et qui raccourcit encore le script si jamais ...

le script raccourci:

Bonjour Milouze

[Zaydia]

C'est parfait! Vous avez très bien saisi le problème que j'avais du mal à résoudre. (je me doutais bien qu'il fallait du javascript... mais je suis encore novice dans ce domaine)

Merci beaucoup