Module calendrier = date du jour en gras

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Module calendrier = date du jour en gras

Message par Zaydia le Mer 6 Juil 2016 - 9:40

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 ? Smile

Merci d'avance
Angel

Zaydia


Dernière édition par Zaydia le Ven 8 Juil 2016 - 22:42, édité 1 fois

Zaydia
Nouveau membre

Messages : 10
Inscrit(e) le : 24/05/2016

http://lubiscrap.meilleurforum.com/
Zaydia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Kinotto le Mer 6 Juil 2016 - 13:58

Bonjour,

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

avec :

Code:
.quote {
font-weight:bold;}


Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Milouze14 le Mer 6 Juil 2016 - 16:58

Salut Zaydia et Kinotto,

@Kinotto a écrit:Bonjour,
Peut-être pouvez-vous simplement vous inspirer de la réponse ici :
http://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 Wink .

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 Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Zaydia le Ven 8 Juil 2016 - 11:16

Merci à vous deux malheureusement le problème n'est pas résolu scratch . 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 Very Happy

Zaydia

Zaydia
Nouveau membre

Messages : 10
Inscrit(e) le : 24/05/2016

http://lubiscrap.meilleurforum.com/
Zaydia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Milouze14 le Ven 8 Juil 2016 - 13:28

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 Wink .


a++



Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Neptunia le Ven 8 Juil 2016 - 16:16

Coucou Zaydia et Milouze ^^

@Milouze14 a écrit:
Si tu veux avoir le jour en caractère gras sur le widget (module) cela ne sera pas possible chère amie Wink .

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é.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Milouze14 le Ven 8 Juil 2016 - 16:57

Hello Neptunia Wink ,
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 Very Happy .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Neptunia le Ven 8 Juil 2016 - 17:16

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).

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Milouze14 le Ven 8 Juil 2016 - 17:30

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 Very Happy .



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 Wink

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++


Dernière édition par Milouze14 le Ven 8 Juil 2016 - 19:38, édité 2 fois (Raison : Modifications versions)

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Neptunia le Ven 8 Juil 2016 - 18:04

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 1er 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.

Right 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.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par no_way le Ven 8 Juil 2016 - 18:46

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



no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Neptunia le Ven 8 Juil 2016 - 18:57

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.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par no_way le Ven 8 Juil 2016 - 19:06

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')
    })
});



no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Milouze14 le Ven 8 Juil 2016 - 19:26

Re Neptunia,

Merci beaucoup pour ces explications Wink .


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 Wink .

Hello no_way Yes

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Neptunia le Ven 8 Juil 2016 - 19:47

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

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par no_way le Ven 8 Juil 2016 - 20:38

De rien mais je viens de penser à une solution plus simple et qui raccourcit encore le script si jamais ...
le script raccourci:
Code:
$(function () {
    $('div#calendar td:contains('+new Date().getDate()+')').eq(0).addClass('calendrier_aujourdhui')
});
et utiliser la classe CSS:
Code:
.calendrier_aujourdhui{
    font-weight:bold
}

Bonjour Milouze Wink



no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Module calendrier = date du jour en gras

Message par Zaydia le Ven 8 Juil 2016 - 22:41

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 cheers cheers cheers

Zaydia
Nouveau membre

Messages : 10
Inscrit(e) le : 24/05/2016

http://lubiscrap.meilleurforum.com/
Zaydia a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum