Objet qui permet la représentation graphique et la sélection d'une date dans un calendrier. Il s'utilise soit seul, soit conjointement avec un objet CHAMP DE SAISIE ou CHAMP EN SORTIE. Dans ce cas, l'objet CALENDRIER renseigne la valeur de la zone Adélia associée à l'objet CHAMP DE SAISIE ou CHAMP EN SORTIE ; l'objet CALENDRIER est alors dit lié à un contrôle.
Sa représentation graphique est composée d'une barre de titre (contenant le mois et l'année courante) et d'une zone centrale contenant les jours du mois courant.
Dans la barre de titre sont présents un certain nombre de boutons, à savoir (de gauche à droite) :
- Le premier bouton (flèche vers la gauche) permet de décrémenter le mois courant. Le maintenir enfoncé permet de décrémenter automatiquement.
- Le second bouton (double flèche vers la gauche) permet de décrémenter l'année courante. Le maintenir enfoncé permet de décrémenter automatiquement.
- Le troisième bouton (double flèche vers la droite) permet d'incrémenter l'année courante. Le maintenir enfoncé permet d'incrémenter automatiquement.
- Le quatrième bouton (flèche vers la droite) permet d'incrémenter le mois courant. Le maintenir enfoncé permet d'incrémenter automatiquement.
- Le cinquième bouton (flèche vers le bas) permet de se positionner sur la date sélectionnée.
- Le sixième bouton (croix, à droite) permet de fermer le calendrier.
Ce bouton n'est présent que si le calendrier est lié à un contrôle avec comme type d'affichage Cadre.
La notion de contrôle lié (objet CHAMP DE SAISIE OU CHAMP EN SORTIE utilisé conjointement avec le CALENDRIER) change la représentation graphique du calendrier dans la page :
- Non lié à un contrôle, le calendrier est représenté tel quel dans la page,
- Lié à un contrôle, le calendrier n'est pas visible dans la page. Sa représentation se limite à un bouton image. Si l'utilisateur clique sur ce bouton, il fait apparaître le calendrier (un autre clic le fait disparaître). Si l'utilisateur sélectionne une date en cliquant sur un jour, la valeur de cette date devient la valeur du contrôle lié.
Il est possible de déplacer (par glisser-déposer) un calendrier lié à un contrôle avec comme type d'affichage Cadre en plaçant le pointeur de la souris sur le texte du mois ou de l'année courante.
L'objet CALENDRIER utilise les caractéristiques (famille, taille et style) de la police par défaut du navigateur pour sa représentation graphique. Pour modifier ces paramètres, il faut :
- Pour les navigateurs Netscape, Mozilla et Firefox, définir une classe CSS en précisant une valeur pour les attributs parmi font-familly, font-size, font-style, font-weight et affecter cette classe à la propriété CLASSE_FOND_MOIS (en maquettage ou en execution),
- Pour les navigateurs Microsoft, il faut, en plus, définir une classe CSS avec les mêmes attributs et qui a pour sélecteur (nom) "#tableCal<Nom du Calendrier> table".
Par exemple
Pour un calendrier de nom CAL_1 :
<style type="text/css">
.calendarFontXSmall {font-size:x-small; background-color:chartreuse;}
#tableCalCAL_1 table {font-size:x-small; }
</style>
Dans le code Adélia :
CAL_1:CLASSE_COULEUR_FOND_MOIS = 'calendarFontXSmall'
Images
Il est possible de changer les images utilisées par défaut dans l'objet CALENDRIER et dans le bouton image créé lorsque cet objet est lié à un contrôle. Il est recommandé de respecter les dimensions des images remplacées pour conserver la qualité de l'affichage.
Pour changer des images de tous les objets CALENDRIER se trouvant dans la page, il faut définir une classe CSS ayant un nom prédéfini, en précisant une valeur pour l'attribut background-image :
- Pour changer l'image du premier bouton (flèche vers la gauche), il faut définir une classe de nom AWSCalendarImgDecrMonth,
- Pour changer l'image du second bouton (double flèche vers la gauche), il faut définir une classe de nom AWSCalendarImgDecrYear,
- Pour changer l'image du troisième bouton (double flèche vers la droite), il faut définir une classe de nom AWSCalendarImgIncrYear,
- Pour changer l'image du quatrième bouton (flèche vers la droite), il faut définir une classe de nom AWSCalendarImgIncrMonth,
- Pour changer l'image du cinquième bouton (flèche vers le bas), il faut définir une classe de nom AWSCalendarImgGotoDateSel,
- Pour changer l'image du sixième bouton (croix de fermeture), il faut définir une classe de nom AWSCalendarImgClose,
- Pour changer l'image du bouton faisant apparaître l'objet CALENDRIER (lorsqu'il est lié à un contrôle), il faut définir une classe de nom AWSCalendarImgOpen.
Exemple : Pour changer l'image du bouton de tous les objets CALENDRIER liés à un contrôle dans la page,
<style type="text/css">
.AWSCalendarImgOpen {background-image : URL("../images/open.gif";);}
</style>
- Pour changer des images d'un objet CALENDRIER se trouvant dans la page, il faut définir une classe CSS dont le nom d'identifiant est suivi du nom de l'objet, en précisant une valeur pour l'attribut background-image :
- Pour changer l'image du premier bouton (flèche vers la gauche), il faut définir une classe de nom decrMonth<Nom du Calendrier>,
- Pour changer l'image du second bouton (double flèche vers la gauche), il faut définir une classe de nom decrYear<Nom du Calendrier>,
- Pour changer l'image du troisième bouton (double flèche vers la droite), il faut définir une classe de nom incrYear<Nom du Calendrier>,
- Pour changer l'image du quatrième bouton (flèche vers la droite), il faut définir une classe de nom incrMonth<Nom du Calendrier>,
- Pour changer l'image du cinquième bouton (flèche vers le bas), il faut définir une classe de nom gotoDateSelect<Nom du Calendrier>,
- Pour changer l'image du sixième bouton (croix de fermeture), il faut définir une classe de nom closeCal<Nom du Calendrier>,
- Pour changer l'image du bouton faisant apparaître l'objet CALENDRIER (lorsqu'il est lié à un contrôle), il faut définir une classe de nom <Nom du Calendrier> BtnImg.
Exemple : Pour changer l'image du bouton de fermeture de l'objet CALENDRIER de nom CAL_1,
<style type="text/css">
#closeCalCAL_1 {background-image : URL("../images/close.gif";);}
</style>
Cliquez ci-dessous pour plus de détails sur :