PHPfrance

la communauté d'entraide francophone dédiée au PHP

[RESOLU] Modifier l'apparence d'un calendrier et en faire une image..

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Modifier l'apparence d'un calendrier et en faire une image..

Re: Modifier l'apparence d'un calendrier et en faire une ima

par niconicochan » 29 août 2014, 09:20

En fait il n'y a pas de problème :D
En modifiant les propriétés css je me suis rendu compte qu'il n'y a pas de décalage en fait.
C'était une impression du au style.
Désolé! C'est un peu bête. 8-|
Merci pour tout, l'apparence de mon calendrier me convient.

Re: Modifier l'apparence d'un calendrier et en faire une ima

par toytoy » 18 août 2014, 16:51

le décalage est minime, sa te dérange tant que ça ? ^^ Sinon mets un cadre à tes li, tu verras si les boutons dépasses, sinon mets leur un margin ou un padding au li

Re: Modifier l'apparence d'un calendrier et en faire une ima

par niconicochan » 18 août 2014, 08:48

Ah oui mais je ne peux pas mettre la valeur absolute puisque la date du jour
d'aujourd'hui change tous les jours!!
Ses abscisses aussi changent donc tous les jours!!

Re: Modifier l'apparence d'un calendrier et en faire une ima

par niconicochan » 18 août 2014, 08:38

Oui.

Aujourd'hui, nous sommes le 18, c'et le premier jour de la ligne:
18 19 20 21 22 23 24
Du coup, on ne voit pas le problème en tant qu'utilisateur.
Le problème n'apparaît pas à l'écran quand le jour d'aujourd'hui est le premier jour de la ligne.

Je devrais donc voir ça demain.
Mais je me demande si la déclaration 
padding: 0; position: relative;
que j'ai ajouté
au sélecteur 
.ligne
pour centrer le nombre correspondant au jour d'aujourd'hui n'y est pas pour quelque chose.
Peut-être devrais-je simplement changer la valeur relative en absolute.
Ca m'est venu à l'idée ce week-end. J'essayerai demain :)

Re: Modifier l'apparence d'un calendrier et en faire une ima

par toytoy » 16 août 2014, 17:47

tu veux dire le bord du input ?

Re: Modifier l'apparence d'un calendrier et en faire une ima

par niconicochan » 16 août 2014, 17:01

Merci.
Je vous montre mon code.

Première partie php 
<?php # fonctions utiles, $valeur 
 # représente une date au format AAAA-MM-JJ
 function getSecond($valeur) {
 return substr($valeur, 17, 2);
   }

   function getMinute($valeur) {
       return substr($valeur, 14, 2);
   }

  function getHour($valeur) {

      return substr($valeur, 11, 2);
  }

  function getDay($valeur)     {
     return substr($valeur, 8, 2);
  }

  function getMonth($valeur)     {
     return substr($valeur, 5, 2);
  }

  function getYear($valeur) {
     return substr($valeur, 0, 4);
 }

  function monthNumToName($mois) {
    $tableau = Array("", "Janvier", "Février", 
    "Mars", "Avril", "Mai", "Juin", "Juillet", 
    "Aôut", "Septembre", "Octobre", "Novembre", "Décembre");

    return (intval($mois) > 0 && intval($mois) 
    < 13) ? $tableau[intval($mois)] : "Indéfini";
}
?>
Deuxième partie php 
<?php
# Fonction pour afficher le calendrier
 function showCalendar($periode) {
    $leCalendrier = "";
    # Tableau des valeurs possibles pour un numéro 
    # de jour dans la semaine
    $tableau = Array("0", "1", "2", "3", "4", "5", "6", "0");

    $nb_jour = Date("t", mktime(0, 0, 0, getMonth($periode), 
    1, getYear($periode)));
    $pas = 0;
    $indexe = 1;

    # Affichage du mois et de l'année
    $leCalendrier .= "<h2>" . monthNumToName
    (getMonth($periode)) . " " . getYear($periode) . "</h2>";

    # Affichage des entêtes
    $leCalendrier .= "
    <ul id=\"libelle\">
        \t<li>L</li>
        \t<li>M</li>
        \t<li>M</li>
        \t<li>J</li>
        \t<li>V</li>
        \t<li>S</li>
        \t<li>D</li>
    </ul>";

    # Tant que l'on n'a pas affecté tous les jours du mois traité
      while ($pas < $nb_jour) {
        if ($indexe == 1) $leCalendrier .= 
        "\n\t<ul class=\"ligne\">";

        # Si le jour calendrier == jour de la semaine en cours
        if (Date("w", mktime(0, 0, 0, getMonth($periode), 
        1 + $pas, getYear($periode))) == $tableau[$indexe]) {
          # Si jour calendrier == aujourd'hui
          $afficheJour = Date("d", mktime(0, 0, 0, 
          getMonth($periode), 1 + $pas, getYear($periode)));
          if (Date("Y-m-d", mktime(0, 0, 0, getMonth($periode),
          1 + $pas, getYear($periode))) == Date("Y-m-d")) {
                $class = " class=\"itemCurrentItem\"";
          }
          else {
                # 1 est toujours vrai => on affiche 
                # un lien à chaque fois
                # A vous de faire les tests 
                # nécessaire si vous gérer un agenda par exemple
                if (1) {
                    $class = " class=\"itemExistingItem\"";
                    $var = Date("d", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode)));
                    $afficheJour = "<input type=\"submit\" name=\"datejour\" value=\"" . $var . "\"</input>";
                    }
                     else {
                          $class = "";
                          }
                     }
                     # Ajout de la case avec la date
                     $leCalendrier .= "\n\t\t<li$class>
                     $afficheJour</li>";
                     $pas++;
             }
             #
             else {

                    # Ajout d'une case vide
                    $leCalendrier .= "\n\t\t<li>&nbsp;</li>";
             }
             if ($indexe == 7 && $pas < $nb_jour) 
             { $leCalendrier 
             .= "\n\t</ul>"; $indexe = 1;} else {$indexe++;}
          }

          # Ajustement du tableau
          for ($i = $indexe; $i <= 7; $i++) {
               $leCalendrier .= "\n\t\t<li>&nbsp;</li>";
          }
          $leCalendrier .= "\n\t</ul>\n";

          # Retour de la chaine contenant le Calendrier
          return $leCalendrier;

     }
?>
Troisième partie php 
<?php
echo showCalendar (date("Y-m"));
?>
Partie CSS 
<style type="text/css">
calendrier.css?201208241130"css">#calendrier li{ list-style: none; } #libelle { width: 210px; margin: 0 auto; padding: 0; position: absolute; left: 387px; } .ligne { width: 210px; margin: 0 auto; padding: 0; position: relative; top: 50px; position: relative; right: 395px } #libelle li {  float : left; width : 30px; list-style-type: none; } .ligne li { float : left; width : 30px; list-style-type: none; } .ligne li a:hover{ color: #800080; list-style: none; text-decoration: none; font-weight: 800; } li.itemCurrentItem { color: #FF0000; position: relative; top: 4px; left: 6px; font-weight: 600;/* A vous de configurer l'apparence de la date du jour */ } li.itemSelectedItem { color: #0099FF;/* A vous de configurer l'apparence du jour sélectionné */ } li.itemExistingItem {}
</style>
Pour le postionnement CSS, je confirme que ça va mieux avec bottom :D
Merci
Pour le cadre avec border, je vais essayer, je devrais y arriver aussi :D

En attendant, est-ce que vous pouvez regarder mon code concernant le problème "du cadre du jour précédent" qui
empiète sur celui d'aujourd'hui?
Nous somme aujourd'hui le 16 et c'est le bord du carreau du chiffre 15 qui empiète sur la zone du 16.
Je dois dire que je galère pas mal avec ce soucis #-o

Re: Modifier l'apparence d'un calendrier et en faire une ima

par momox » 15 août 2014, 10:22

Hello,
pour le positionnement CSS down n'existe pas, c'est left, right, top et bottom ;)

Re: Modifier l'apparence d'un calendrier et en faire une ima

par toytoy » 14 août 2014, 19:31

Pour faire un cadre c'est border, tu as les propriétés largeur, type de trait et la couleur. Pour le reste est-ce que je pourrait avoir un petit screen histoire de mieux visualiser ? merci :)

Re: Modifier l'apparence d'un calendrier et en faire une ima

par niconicochan » 14 août 2014, 17:27

Ca marche, merci beaucoup! :D (du coup c'est très bien comme ça et je pense laisser tomber le javascript pour simplifier les choses :D )

Par contre j'ai encore quelques détails à régler :priere: 
<style type="text/css">
calendrier.css?201208241130"css">#calendrier li{ list-style: none; } #libelle { width: 210px; margin: 0 auto; padding: 0; position: absolute; left: 387px; } .ligne { width: 210px; margin: 0 auto; padding: 0; } #libelle li {  float : left; width : 30px; list-style-type: none; } .ligne li { float : left; width : 30px; list-style-type: none; } .ligne li a:hover{ color: #800080; list-style: none; text-decoration: none; font-weight: 800; } li.itemCurrentItem { color: #FF0000; position: relative; top: 4px; left: 6px; font-weight: 600;/* A vous de configurer l'apparence de la date du jour */ } li.itemSelectedItem { color: #0099FF;/* A vous de configurer l'apparence du jour sélectionné */ } li.itemExistingItem {}
</style>
J'ai aligné sur la gauche mes jours de la semaine L M M J V S D grçace au code (voir ci-dessus première ligne) 
position: absolute; left: 387px;
J'aimerais maintenant aligner l'ensemble de mes jours de la semaine juste sous la ligne L M M J V S D
Je n'y arrive pas. Non seulement j'arrive très rarement à faire bouger cette partie du dessous, mais en plus elle ne garde pas ses rangées comme il faut.
Peut-être que ça vient du php.
J'ai essayé des choses comme 
position: relative; down: 20px;
pour que ça vienne se mettre juste sous L M M J V S D, et ce à plusieurs endroits
mais ça ne fonctionne pas :(

Deuxième point, aujourd'hui nous somme le 14. Le jeudi étant le 4ème jour de la semaine ma rangée de jours pour cette semaine est donc
11 12 13 14 15 16 17
Comme tous les chiffres du mois sont entourés dans un carreau sauf le jour d'aujourd'hui (très certaienement du fait de l'ajout d'un input antérieurement
dans le php pour ajouter un GET), les chiffre 11 12 13 15 16 et 17 sont entourés d'un carreau, mais pas le 14.
J'ai un petit soucis, le bord droit du carreau du chiffre 13 déborde/empiète sur la zone normalement consacrée au carreau du 14.
Elle empiète donc sur la droite. D'après la logique, demain ça devrait être le bord droit du carreau du chiffre 14 qui empiète sur la zone du 15.
Je ne sais pas pourquoi et n'arrive pas non plus à régler ce petit soucis :(

Troisième point, mais c'est beaucoup plus du détail, j'aimerais bien donner des bord (ce que j'appelle un carreau plus haut) à mon numéro
du jour d'aujourd'hui.

Re: Modifier l'apparence d'un calendrier et en faire une ima

par toytoy » 13 août 2014, 17:25

enlève ce que je t'ai dit en fait et regarde dans ton code css, dès que tu vois un li, mets list-style-type: none;

Re: Modifier l'apparence d'un calendrier et en faire une ima

par niconicochan » 13 août 2014, 13:09

Je l'ai fait mais rien ne change:
<style type="text/css">
calendrier.css?201208241130"css">#calendrier li{ list-style: none; } # calendrier ul li {list-style-type: none;} #libelle { width: 210px; margin: 0 auto; padding: 0; } .ligne { width: 210px; margin: 0 auto; padding: 0; } #libelle li {  float : left; width : 30px; } .ligne li { color: transparent; float : left; width : 40px; } .ligne li a:hover{ color: #800080; list-style: none; text-decoration: none; } li.itemCurrentItem { color: #FF0000;/* A vous de configurer l'apparence de la date du jour */ } li.itemSelectedItem { color: #0099FF;/* A vous de configurer l'apparence du jour sélectionné */ } li.itemExistingItem { color: transparent; }
</style>
Dans le code suivant , j'ai pu faire en sorte que toutes les puces des jours de la semaine sauf celle du jour d'aujourd'hui
soient transparentes.
Je cherche maintenant à faire en sorte que la puce du jour d'aujourd'hui et les 7 puces du libellé des jours le soient aussi.

Re: Modifier l'apparence d'un calendrier et en faire une ima

par toytoy » 13 août 2014, 12:45

Garde tes ul et li !

dans ton code css tu mettras simplement ça :
#calendrier ul li {
list-style-type: none;
}

Modifier l'apparence d'un calendrier et en faire une image..

par niconicochan » 13 août 2014, 10:58

Bonjour,

J'ai utilisé un calendrier avec du code php déjà préparé
mais qui à l'air facilement modifiable.
Ca aurait été un pru trop difficile pour moi
de faire le calendrier entièrement par moi-même.
Je vous montre le programme:
<?php
/*première partie*/
 # fonctions utiles, $valeur 
 # représente une date au format AAAA-MM-JJ
 function getSecond($valeur) {
 return substr($valeur, 17, 2);
   }

   function getMinute($valeur) {
       return substr($valeur, 14, 2);
   }

  function getHour($valeur) {

      return substr($valeur, 11, 2);
  }

  function getDay($valeur)     {
     return substr($valeur, 8, 2);
  }

  function getMonth($valeur)     {
     return substr($valeur, 5, 2);
  }

  function getYear($valeur) {
     return substr($valeur, 0, 4);
 }

  function monthNumToName($mois) {
    $tableau = Array("", "Janvier", "Février", 
    "Mars", "Avril", "Mai", "Juin", "Juillet", 
    "Aôut", "Septembre", "Octobre", "Novembre", "Décembre");

    return (intval($mois) > 0 && intval($mois) 
    < 13) ? $tableau[intval($mois)] : "Indéfini";
}
?>

/*deuxième partie*/
<?php
# Fonction pour afficher le calendrier
 function showCalendar($periode) {
    $leCalendrier = "";
    # Tableau des valeurs possibles pour un numéro 
    # de jour dans la semaine
    $tableau = Array("0", "1", "2", "3", "4", "5", "6", "0");

    $nb_jour = Date("t", mktime(0, 0, 0, getMonth($periode), 
    1, getYear($periode)));
    $pas = 0;
    $indexe = 1;

    # Affichage du mois et de l'année
    $leCalendrier .= "<h2>" . monthNumToName
    (getMonth($periode)) . " " . getYear($periode) . "</h2>";

    # Affichage des entêtes
    $leCalendrier .= "
    <ul id=\"libelle\">
        \t<li>L</li>
        \t<li>M</li>
        \t<li>M</li>
        \t<li>J</li>
        \t<li>V</li>
        \t<li>S</li>
        \t<li>D</li>
    </ul>";
	
    # Tant que l'on n'a pas affecté tous les jours du mois traité
      while ($pas < $nb_jour) {
        if ($indexe == 1) $leCalendrier .= 
        "\n\t<ul class=\"ligne\">";

        # Si le jour calendrier == jour de la semaine en cours
        if (Date("w", mktime(0, 0, 0, getMonth($periode), 
        1 + $pas, getYear($periode))) == $tableau[$indexe]) {
          # Si jour calendrier == aujourd'hui
          $afficheJour = Date("d", mktime(0, 0, 0, 
          getMonth($periode), 1 + $pas, getYear($periode)));
          if (Date("Y-m-d", mktime(0, 0, 0, getMonth($periode),
          1 + $pas, getYear($periode))) == Date("Y-m-d")) {
                $class = " class=\"itemCurrentItem\"";
          }
          else {
                # 1 est toujours vrai => on affiche 
                # un lien à chaque fois
                # A vous de faire les tests 
                # nécessaire si vous gérer un agenda par exemple
                if (1) {
                    $class = " class=\"itemExistingItem\"";
                    $var = Date("d", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode)));
                    $afficheJour = "<input type=\"submit\" name=\"tonNomTropSawgIci\" value=\"" . $var . "\"</input>";
                    }
                     else {
                          $class = "";
                          }
                     }
                     # Ajout de la case avec la date
                     $leCalendrier .= "\n\t\t<li$class>
                     $afficheJour</li>";
                     $pas++;
             }
             #
             else {

                    # Ajout d'une case vide
                    $leCalendrier .= "\n\t\t<li>&nbsp;</li>";
             }
             if ($indexe == 7 && $pas < $nb_jour) 
             { $leCalendrier 
             .= "\n\t</ul>"; $indexe = 1;} else {$indexe++;}
          }

          # Ajustement du tableau
          for ($i = $indexe; $i <= 7; $i++) {
               $leCalendrier .= "\n\t\t<li>&nbsp;</li>";
          }
          $leCalendrier .= "\n\t</ul>\n";

          # Retour de la chaine contenant le Calendrier
          return $leCalendrier;

     }
?>

/*troisième partie*/
<style type="text/css">
calendrier.css?201208241130"css">#calendrier li{ list-style: none; } #libelle { width: 210px; margin: 0 auto; padding: 0; } .ligne { width: 210px; margin: 0 auto; padding: 0; } #libelle li {  float : left; width : 30px; } .ligne li { color: #000000; float : left; width : 40px; text-decoration: none; } .ligne li a:hover{ color: #800080; list-style: none; text-decoration: none; } li.itemCurrentItem { color: #FF0000;/* A vous de configurer l'apparence de la date du jour */ } li.itemSelectedItem { color: #0099FF;/* A vous de configurer l'apparence du jour sélectionné */ }li.itemExistingItem { color: #3300FF; }
</style>
En fait, je souhaitais au départ remplacer les points par des cases (les points des <li>...</li>),
mais l'input rajouté dans: 
 if (1) {
                    $class = " class=\"itemExistingItem\"";
                    $var = Date("d", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode)));
                    $afficheJour = "<input type=\"submit\" name=\"tonNomTropSawgIci\" value=\"" . $var . "\"</input>";
                    }
me donne les cases du coup.
Je souhaiterais maintenant enlever les points.
Je peux enlever les balises <ul> </ul> <li> et </li> dans 
    # Affichage des entêtes
    $leCalendrier .= "
    <ul id=\"libelle\">
        \t<li>L</li>
        \t<li>M</li>
        \t<li>M</li>
        \t<li>J</li>
        \t<li>V</li>
        \t<li>S</li>
        \t<li>D</li>
    </ul>";
mais ça risque d'être compliqué à gérer avec le fichier: 
<style type="text/css">
calendrier.css?201208241130"css">#calendrier li{ list-style: none; } #libelle { width: 210px; margin: 0 auto; padding: 0; } .ligne { width: 210px; margin: 0 auto; padding: 0; } #libelle li {  float : left; width : 30px; } .ligne li { color: #000000; float : left; width : 40px; text-decoration: none; } .ligne li a:hover{ color: #800080; list-style: none; text-decoration: none; } li.itemCurrentItem { color: #FF0000;/* A vous de configurer l'apparence de la date du jour */ } li.itemSelectedItem { color: #0099FF;/* A vous de configurer l'apparence du jour sélectionné */ }li.itemExistingItem { color: #3300FF; }
</style>
Je ne sais pas si vous pouvez m'aider, me donner des conseils?

Egalement, j'aimerais pouvoir faire du mon calendrier un bloc, une image.
Je souhaiterais créer une animation javascript par la suite avec une fonction moveSprite et deux variables.
Du coup, je dois définir l'image sur laquelle je souhaite affecter une animation avec src="..." dans ma page js.
Comment avec css et le html je pourrais faire pour faire de mon calendrier un bloc, une image
sur laquelle je pourrai travailler avec une animation?