AutoPositionnement dans un calendrier

**nolan76** · 28/09/2006, 11h46

Bonjour à tous,

Je poste mon problème dans HTML... même si il y a un peu de php dedans, parce que c'est surement solvable en terme de CSS. Je ne trouve pas la solution.

Je dois afficher un calendrier. Dans ce calendrier, je souhaite que les évenements prennent automatiquement leur position dans l'espace qui leur est reservé.

Voici à quoi ressemble un simple exemple :

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
 
<html>
<head><title>Document sans nom</title></head>
<body >
<?php
function compare($a, $b) 
{
    if ($a['debut'] == $b['debut']) {
      return 0;
    }
    return ($a['debut'] < $b['debut']) ? -1 : 1;
}
$debut=6;$fin=20;
for ($i=$debut;$i<=$fin;$i++)
{
echo '
<div style="position:absolute;left:30px;top:'.(20+($i-$debut)*42).'px;width:60px;height:42px;border-right:1px solid;background-image : url(fond.gif);">
'.$i.'</div>';
}
 
echo '<div style="position:absolute;left:91px;top:20px;width:600px;height:'.(42*($fin-$debut+1)).'px;background-image : url(fond.gif);">';
 
$tableau=array(
1=>array('debut'=>8,'fin'=>10,'nom'=>'evt1','color'=>'red'),
2=>array('debut'=>8,'fin'=>10,'nom'=>'evt2','color'=>'blue'),
3=>array('debut'=>9,'fin'=>12,'nom'=>'evt3','color'=>'green'),
4=>array('debut'=>14,'fin'=>16,'nom'=>'evt4','color'=>'yellow'),
5=>array('debut'=>13,'fin'=>15,'nom'=>'evt5','color'=>'magenta'),
6=>array('debut'=>7,'fin'=>11,'nom'=>'evt6','color'=>'pink'),
7=>array('debut'=>14,'fin'=>17,'nom'=>'evt7','color'=>'turquoise'),
8=>array('debut'=>12,'fin'=>14,'nom'=>'evt8','color'=>'violet'),
9=>array('debut'=>13,'fin'=>15,'nom'=>'evt9','color'=>'cyan')
);
usort ($tableau, "compare");
$left=0;
 
foreach ($tableau as $k=>$v)
{
  $top=($v['debut']-$debut)*42;
  $width=50;
  $height=($v['fin']-$v['debut'])*42;
  echo '<div style="position:absolute;left:'.$left.'px;top:'.$top.'px;width:'.$width.'px;height:'.$height.'px;background:'.$v['color'].'">
  '.$v['nom'].' de '.$v['debut'].' à '.$v['fin'].'
</div>';
  $left+=55;
}
 
?>
</div>
</body>
</html>

Dans cet exemple, on peut voir que l'evenement 8 devrait se positionner tout simplement en dessous de l'evenement 6. De + je souhaiterais que les evenements prennent le maximum de place sur la page : 100% de la largeur si ils ne sont pas chevauchés, 100/x % de la largeur si ils sont chevauché par x evenements.

J'ai beau retourner le problème dans tous les sens, mais je ne vois pas de solutions evidentes, à part celle d'augmenter la complexité en bouclant en php pour calculer les chevauchements et les tailles. Ceci ajoute trop de complexité au script et c'est ce que je cherche à éviter.

Merci d'avance de votre aide et de votre soutien.

**nolan76** · 02/10/2006, 08h00

Bien, j'ai toujours aucune solution, et pourtant je retourne le problème dans tous les sens.

**trotters213** · 02/10/2006, 11h06

je ne comprends vraiment ton problème et ce que tu veux faire. Tu veux faire un calendrier avec des cases (jours) pouvant contenir plusieurs évènements et tu veux qu'une case (jour) soit diviser de manière proportionnelle dans la largeur par le nombre d'évènement?
Un dessin vite fait sous paint nous aiderait je pense

**nolan76** · 06/10/2006, 08h26

En gros, j'ai des colonnes de journées, dans lesquelles peuvent apparaitre des évenements, mais j'aimerais que les évenements se placent de manière intelligente dans ces collones. Par exemple :

Dans cette exemple on voit que j'ai un chevauchement de l'évenement 3 et 4. J'ai beau chercher un algo ou une façon de créer le flux je n'arrive pas à obtenir le résultat escompté. Peut être est ce impossible, dans ce cas, que me conseilleriez vous pour parvenir à un résultat à la fois lisible et convenable.

Merci

**trotters213** · 06/10/2006, 08h48

à part en utilisant des hachures (donc des images) je vois pas trop comment tu pourrais faire.
Tu peux sinon faire en sorte que quand tu passes avec la souris sur un carré il se mette en surbrillance et en premier plan.

**MasterOfChakhaL** · 06/10/2006, 11h30

Salut,

Je n'ai pas très bien réussi à comprendre ce que tu entendais par positionnement intelligent...

Apparemment, c'est un problème de chevauchement, mais je ne sais pas trop où...

Dans ton php, tu calcules top, left, width et height.
De cette manière tu as totalement défini le positiennement et la dimension... Donc à priori, aucune chance qu'il se passe quelque chose d'intelligent que tu n'aurais pas écrit toi même.

Si tu veux laisser css s'occuper du positionnement, il faut que tu lui laisses certains degrés de liberté.

De ce que j'ai compris, je ne défirais que la hauteur, et peut-être le top...
J'enleverai le positionnement absolu. Peut-être aussi jouer sur les marges...

En gros, le truc que j'ai pas compris dans ton problème c'est:
est-ce que ton souci concerne une ou plusieurs colonnes et quel est précisément le problème ainsi que les resultats souhaités.

Si tu pouvais faire un petit schéma avec d'un coté un exemple du probleme et de l'autre côté le résultat que tu aurais attendu pour ce meme exemple...

Voilà, a plus...

AutoPositionnement dans un calendrier

HTML

Vue hybride

Discussions similaires

Partager

Partager