Planning/Emploi du temps de la semaine

**Napalm51** · 05/02/2008, 18h07

Bonjour, dans le cadre de l'évolution d'un projet de filtrage de contenu, j'aimerais pouvoir ajouter un petit emploi du temps. Je m'explique :

J'ai actuellement un système de filtrage de contenu web
Ce système filtre selon des catégories (piratage, porno, jeux etc ...)
Ce système permet de bloquer l'accès à une catégorie de telle heure à telle heure

Je gère la configuration des ce système via une interface web développée par ma société, et on me demande d'y ajouter, via un clic sur un bouton, un petit calendrier de la semaine style emploi du temps, avec la possibilité de sélectionner des cases, pour régler les horaires de filtrage de la catégorie.

En clair si je sélectionne les cases 8h-9h et 9h-10h du Lundi sur mon emploi du temps, je devrais activer cette catégorie uniquement le lundi entre 8h et 10h. Niveau code "métier", pas de souci, mais par contre niveau affichage du calendrier ...

C'est pourquoi je vous demande si vous n'auriez pas des morceaux de code qui traîne pour faire quelque chose de "jolie", quand je clic sur une case du tableau la couleur change etc ...
Je sais bien que la politique du forum n'est pas de fournir quelque chose clé en main mais bon, même des conseils sur la méthode à appliquer seraient les bienvenues

Mes maigres connaissances en javascript datant un peu (trop ?)

Merci d'avance

**picwic** · 05/02/2008, 20h10

Salut,

Tu peux déjà aller voir du côté de la librairie Yahoo qui gère les calendriers :
http://developer.yahoo.com/yui/calendar/

Des exemples ici :
http://developer.yahoo.com/yui/examp...dar/index.html

+

**Napalm51** · 06/02/2008, 08h30

Merci pour ces liens, c'est intéressant, mais peut être un peu lourd à implémenter pour "si peu" non ?

**picwic** · 06/02/2008, 10h15

Si tu veux du "joli", cross-browser, tout javascript et ne pas réinventer la roue, je ne vois guère d'autre solution que d'employer une librairie robuste comme YUI (environ 1000 lignes; en comparaison le framework Prototype en compte + de 4000) ou GoogleWebToolkit.

Tu peux également envisager de générer ton calendrier directement côté serveur et de le charger en AJAX. En revanche, tu devras implémenter toute la gestion des évènements.. et là bon courage avec IE.

Bref, à toi de voir selon le temps mis à ta disposition.

**Napalm51** · 06/02/2008, 11h13

Ok

En fait je ne suis pas du tout développeur Web, loin de là, je code plutôt en Java. Mais on me demande de modifier une page Perl pour ajouter cette fonctionnalité, et je galère un peu.

J'ai fait quelques tests de javascript ce matin est mon but n'est autre que de récupérer quelque chose comme l'image ci-dessous, avec juste la possibilité de sélectionner des cases en cliquant dessus, puis une fois terminé de récupérer par exemple l'id des cases sélectionnées, afin de me faire mon tableau d'horaires. Je me dis qu'implémenter un framework pour quelque chose qui semble si simple, c'est un peu gros ... Et la beauté n'est pas primordial, mon interface n'est pas iGoogle

**picwic** · 06/02/2008, 12h00

Oke. Commence par trouver un script Perl qui gère l'affichage de planning (HTML-Calendar par exemple).

Ensuite, il te suffira d'ajouter tes évènements onclick sur chaque case grâce aux IDs.

**Napalm51** · 06/02/2008, 14h14

Merci de t'intéresser à mon problème

HTML-Calendar (Perl ou JS) ne permet d'afficher que des mois malheureusement :/

Perso j'ai tapé ce 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
<html>
  <head>
    <title>Test calendrier</title>
    <style type="text/css">
      td.cell { background-color : red; }
      td.hours { font-size : 10px; vertical-align : middle ; text-align:center; }
    </style>
    <script type="text/javascript">
      //Permet de changer la couleur de fond d'une cellule
      function click(tdID) {
        var cell = document.getElementById(tdID);
        if(cell.style.backgroundColor == "red")
          cell.style.backgroundColor = "green";
        else
          cell.style.backgroundColor = "red";
      }
      //Permet de générer le tableau
      function createTimeTable() {  
        // table
        document.write("<table id='calendrier' class='mytable'>");
        // header
        document.write("<tr>");
        document.write("<td align='center' width='12,5%'>&nbsp</td>");
        document.write("<td align='center' width='12,5%'>Lundi</td>");
        document.write("<td align='center' width='12,5%'>Mardi</td>");
        document.write("<td align='center' width='12,5%'>Mercredi</td>");
        document.write("<td align='center' width='12,5%'>Jeudi</td>");
        document.write("<td align='center' width='12,5%'>Vendredi</td>");
        document.write("<td align='center' width='12,5%'>Samedi</td>");
        document.write("<td align='center' width='12,5%'>Dimanche</td>");
        document.write("</tr>");
        // contenue
        for(i=0;i<24;i++)
        {
          document.write("<tr>");
          document.write("<td class='hours'>"+i+"h-"+(i+1)+"h</td>");
          document.write("<td class='cell' id='LU"+i+"' onclick='click(this.id)'></td>");
          document.write("<td class='cell' id='MA"+i+"' onclick='click(this.id)'></td>");
          document.write("<td class='cell' id='ME"+i+"' onclick='click(this.id)'></td>");
          document.write("<td class='cell' id='JE"+i+"' onclick='click(this.id)'></td>");
          document.write("<td class='cell' id='VE"+i+"' onclick='click(this.id)'></td>");
          document.write("<td class='cell' id='SA"+i+"' onclick='click(this.id)'></td>");
          document.write("<td class='cell' id='DI"+i+"' onclick=click(this.id)></td>");
          document.write("</tr>");
        }      
        document.write("<form id='myform'><input type='button' onclick='getSelectedCells()' value='Go'></form>");
        // fin table
        document.write("</table>");
      }
      //Permet de récupérer l'ensemble des cellules sélectionnées
      function getSelectedCells() {
        Cells = document.getElementById("calendrier").getElementsByTagName("td");
        var text = "";
        for (i=0;i<Cells.length;i++)
        {
          debID = Cells[i].id.substr(0,2);
          if(debID=="LU" || debID=="MA" || debID=="ME" || debID=="JE" || debID=="VE" || debID=="SA" || debID=="DI")
          {
            if(Cells[i].style.backgroundColor == "green")
              text += Cells[i].id+"\n";
          }
        }
        alert(text);
      }
    </script>
  </head>
  <body>
    <script type="text/javascript">createTimeTable();</script>
  </body>
</html>

Qui fonctionne pas trop mal, si ce n'est que lors du premier clic sur une case la propriété style.backgroundColor n'est pas considérée comme "red" malgrés le style, alors qu'en mettant directement style="background-color : red" dans ma balise td cela fonctionne ?!

Mais bon le rendu est quand même moyen (c'est peu dire)

**picwic** · 06/02/2008, 17h14

Envoyé par Napalm51

Merci de t'intéresser à mon problème

Bah! On a tous des problèmes!!! mdr

Effectivement, le premier clic merdoit.. Tu peux contourner en rajoutant une condition (pas top mais je ne vois pas ce qui coince) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function click(tdID) {
  var cell = document.getElementById(tdID);
  if (cell.style.backgroundColor == "" || cell.style.backgroundColor == "red") {
    cell.style.backgroundColor = "green";
  }
  else {
    cell.style.backgroundColor = "red";
  }
}

**Napalm51** · 06/02/2008, 18h00

Hehe en effet je n'y avais même pas pensé

Bon bah au final je me suis fait ma table perso, avec mon algo de tri afin de récup ce que je veux, et même si c'est super moche ça fait son boulot alors bon ... soit :p

Merci encore pour ton aide, peut-être @+ dans un autre sous-forum

**picwic** · 06/02/2008, 18h57

ca roule !!
+

Planning/Emploi du temps de la semaine

JavaScript

Discussions similaires

Partager

Partager