IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Une aide sur un calendrier en javascript


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Inscrit en
    Août 2011
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Août 2011
    Messages : 5
    Points : 2
    Points
    2
    Par défaut Une aide sur un calendrier en javascript
    Bonjour,
    Je suis nouveau sur le forum et j'aurai besoin d'un âme charitable pour modifier le script ci-dessous.
    Il s'agit d'un calendrier affichant les 3 mois de l'année en cours. Ce script fonctionne très bien mais j'aimerai pouvoir en quelques lignes de codes modifier la couleurs de fond de certains jours. Le fond étant beige par défaut, j'aimerai modifier en rouge ou vert par ememple une semaine ou un jour directement en modifiant quelques lignes de codes.
    Merci d'avance de votre aide.
    Voici le code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    <html>
     
    <head>
     
    <style type="text/css">
     
    .main {
    width:200px;
    border:1px solid black;
    }
     
    .month {
    background-color:black;
    font:bold 12px verdana;
    color:white;
    }
     
    .daysofweek {
    background-color:gray;
    font:bold 12px verdana;
    color:white;
    }
     
    .days {
    font-size: 12px;
    font-family:verdana;
    color:black;
    background-color: lightyellow;
    padding: 2px;
    }
     
    .days #today{
    font-weight: bold;
    color: red;
    }
     
    </style>
     
     
    <script type="text/javascript">
    /***********************************************
    * Basic Calendar-By Brian Gosselin at <a href="http://scriptasylum.com/bgaudiodr/" target="_blank">http://scriptasylum.com/bgaudiodr/</a>
    */ 
    function buildCal(m, y, cM, cH, cDW, cD, brdr){
    var mn=['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre'];
    var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
     
    var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
    oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
     
    var todaydate=new Date() //DD added
    var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
     
    dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
    var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
    t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
    for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
    t+='</tr><tr align="center">';
    for(i=1;i<=42;i++){
    var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
    if (x==scanfortoday) //DD added
    x='<span id="today">'+x+'</span>' //DD added
    t+='<td class="'+cD+'">'+x+'</td>';
    if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
    }
    return t+='</tr></table></div>';
    }
    </script> 
     
    </head>
     
    <body>
     
    <script type="text/javascript">
    var todaydate=new Date()
    var curmonth=todaydate.getMonth()+1 //get current month (1-12)
    var curyear=todaydate.getFullYear() //get current year
    </script>
    <table border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth-1 ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    </table> 
    <p><font face="verdana" size="1">Powered and Generated by </font><a href="http://www.lesite.com" target="_blank"><font face="verdana,arial,helvetica" size="1" color="black">http://www.<b>espacejavascript</b>.com</font></a></p>
     
    </body>
     
    </html>

  2. #2
    Expert confirmé
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    Tu veux faire une modif "définitive", en dur ? ou bien pouvoir le changer à l'exécution, par exemple suite à un événement ?

    Tu as un lien d'une page en ligne avec ce calendrier ? Histoire de pouvoir tester le rendu "en live" plutot que de suivre ce jeu de pistes à base de tableaux et de document.write ... ^^

    ...pour les linguistes et les curieux >>> générateur de phrases aléatoires

    __________________

  3. #3
    Candidat au Club
    Inscrit en
    Août 2011
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Août 2011
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    Citation Envoyé par RomainVALERI Voir le message
    Tu veux faire une modif "définitive", en dur ? ou bien pouvoir le changer à l'exécution, par exemple suite à un événement ?

    Tu as un lien d'une page en ligne avec ce calendrier ? Histoire de pouvoir tester le rendu "en live" plutot que de suivre ce jeu de pistes à base de tableaux et de document.write ... ^^
    Merci pour ta réponse.

    Je voudrais effectivement rendre certains jours ou semaines d'une autre couleur de fond "en dur" que je modifierai en code directement et ensuite je mets à jour la page concernée. Genre une ligne de code pour afficher la semaine du 15 au 20 aout 2011 sera une semaine en rouge, par exemple. Je modifierai donc directement avec FrontPage mon code en dur et ensuite je mets à jour la page. C'est pour un site de gîte (d'un ami) pour mettre les semaines déjà réservées.
    Merci d'avance, si on peut faire assez simple car je ne suis pas un expert dans le JavaScript !

  4. #4
    Candidat au Club
    Inscrit en
    Août 2011
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Août 2011
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    Voici le lien de la page en question :

    http://www.moulindelaboulaye.fr/reservations.htm

    C'est un site que j'ai fait avec Frontpage pour un ami qui a un gîte.
    Il aimerait faire apparaitre les semaines ou jours occupés en rouge par exemple (les jours libres en vert). Et pour plus de clarté, ce serait mieux d'avoir le mois en cours à gauche et les deux, voire trois, mois suivants à sa droite.
    Je suis nul en JavaScript et se serait sympa de pouvoir réaliser ce petit projet.
    Merci d'avance.

  5. #5
    Expert confirmé
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    [DISCLAIMER PSYCHOLOGIQUE]
    Les observations qui suivent n'ont pas pour but de vexer, offenser ou condamner ni l'auteur (Brian Gosselin) ni l'actuel utilisateur (klara56) du code incriminé. Alors s'il vous plait, je vous en prie.
    [/DISCLAIMER PSYCHOLOGIQUE]

    Dans un tableau écrit en HTML, la modification prendrait 1 minute.

    Avec un tableau construit dynamiquement, sur la base d'un code sain et rationnel, ça prendrait 30 secondes.

    Mais là, avec un tableau construit comme ici, à la fois sur la base de mauvaises pratiques, d'éléments obsolètes, sans indentation, avec des noms de variables "muets"... ("je dois stocker le nombre de passagers du train... comment vais-je l'appeler : « skfey_g44qe » quelle bonne idée ")

    Question aussi lâche que saine () >>> Sais-tu qu'il y a un excellent calendrier dans les contributions que propose notre forum... Ce n'est pas exactement le même besoin puisqu'au départ c'est plutot un "datepicker" pour sélectionner une date ^^ mais nul doute que son auteur et les nombreuses personnes ayant participé à sa création préfèreront t'aider à l'implémenter chez toi (tiens, tu n'es pas seul(e) dans ce cas on dirait ) que de retravailler un code antique, visiblement "conçu pour" ne plus être modifié...

    Mais ce n'est pas forcément souhaitable, ça dépend aussi du temps, de la motivation et de la compétence que tu pourras/voudras y investir.
    Qu'en dis-tu ? ^^

    ...pour les linguistes et les curieux >>> générateur de phrases aléatoires

    __________________

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 961
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 961
    Points : 44 133
    Points
    44 133
    Par défaut
    Bonjour,
    même si il est vrai que document.write a mauvaise presse, et à juste titre dans certains cas, son utilisation pour insérer des éléments dans le flux du document est tout à fait envisageable. C'est le pendant de echo en PHP.

    On pourrait lui préférer la méthode avec innerHTML mais est ce bien plus "propre"?

    Dans ces 2 cas le code inséré doit être "propre" avec tous les échappements des caractères spéciaux qui le compose, entre autre.

    Le "must" étant bien sûr l'utilisation des méthodes DOM d'insertion d'élément tel createElement et appendChild et autre createTextNode, ou encore les méthodes applicables directement au TABLE comme insertRow ou insertCell.

    Pour en revenir au code utilisé, il date un peu ce qui peut expliquer la mise en TABLE des 3 TABLE dans une TABLE.
    Néanmoins la fonction retournant du code HTML on peut rapidement remplacer les document.write par des innerHTML, en remplaçant la TABLE conteneur par une DIV dans laquelle prendrait place le code une fois celle ci présente dans le DOM, le reste n'étant qu'une question de CSS.

    Concernant la mise à jour des données, la création de data de réservation, sous forme JSON par exemple, pourrait permettre, toujours via le CSS, de modifier l'apparence des cellules concernées.

    exemple data :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var data = {
      '2011_8_13' : 1,
      '2011_8_14' : 1,
      '2011_8_15' : 0,
      '2011_8_16' : 1,
      '2011_8_14' : 0,
      '2011_10_7' : 1,
      '2011_10_8' : 1,
      '2011_10_9' : 1,
      '2011_11_13' : 1
    }
    lorsque l'on rempli la case 2011,8,15, par exemple on affecte la class reserve à la cellule, le tour est joué.

    Pour la maintenance, il suffira de modifier le fichier contenant les données de réservation.

    On se retrouve donc avec
    - 1 fichier HTML
    - 1 fichier CSS
    - 1 fichier JS

    la structure du fichier HTML devenant...
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>R&eacute;servation</title>
    <link href="calendrier.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div id="page">
      <h1>Calendrier des disponibilit&eacute;s</h1>
      <div id="calendrier"></div>
    </div>
    <script type="text/javascript" src="calendrier.js"></script>
    </body>
    </html>
    et un appel dans le fichier JS du style, sur base de innerHTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var sHtml  = buildCal( curmonth,   curyear, "main", "month", "daysofweek", "days", 0);
        sHtml += buildCal( curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 0);
        sHtml += buildCal( curmonth+2 ,curyear, "main", "month", "daysofweek", "days", 0);
    document.getElementById('calendrier').innerHTML = sHtml;
    il va de soit que le code de la fonction est à "dépoussiérer" légérement et à factoriser...

    Voila en gros l'approche

  7. #7
    Candidat au Club
    Inscrit en
    Août 2011
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Août 2011
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    Bonjour,
    Merci pour vos réponses.
    RomainVALERI: Effectivement le "calendrier-v3-beta" me parait une bonne base pour commencer mon petit projet.
    NoSmoking : Merci pour les explications, il faut que je regarde tout cela bien attentivement pour essayer d'assimiler toutes ces commandes inconnues de mes neurones.

  8. #8
    Candidat au Club
    Inscrit en
    Août 2011
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Août 2011
    Messages : 5
    Points : 2
    Points
    2
    Par défaut
    Bonjour,
    J'ai finalement trouvé un calendrier qui correspondait à mes attentes.

    Merci à vous.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. je veut une aide sur l'implementation de liste chainee
    Par oussama0013 dans le forum C++
    Réponses: 2
    Dernier message: 11/12/2007, 00h20
  2. Une aide sur la modification d'un code HTML/CSS d'un blog
    Par nanas dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 02/08/2007, 14h04
  3. Une aide sur une version de SMDBGrid
    Par frmahe dans le forum Bases de données
    Réponses: 3
    Dernier message: 21/09/2006, 08h21
  4. [Système] Besoin d'aide sur un calendrier
    Par joxbl dans le forum Langage
    Réponses: 5
    Dernier message: 03/06/2006, 16h02
  5. une aide sur un regex svp :)
    Par hansaplast dans le forum Langage
    Réponses: 2
    Dernier message: 19/10/2005, 11h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo