Ready For Web

Un calendrier bien calé verticalement

Petite expérimentation d'affichage de date sous un format calendrier habituel.

Au niveau des CSS, tout passe si flex passe, autant dire que c'est "ready for web".

Thu 01 Oct 2020

Pour des raisons de CSS, on a besoin de baliser notre date. Concrêtement:

Avant:
<div class="date-container">jeu 28 mai 2020</div>
Après:
<div class="date-container">
	<span class="date-ligne date-jour">
		<span>j</span><span>e</span><span>u</span>
	</span>
	<span class="date-ligne date-nombre">
		<span>2</span><span>8</span>
	</span>
	<span class="date-ligne date-mois">
		<span>M</span><span>a</span><span>i</span>
	</span>
	<span class="date-ligne date-annee">
		<span>2</span><span>0</span><span>2</span><span>0</span>
	</span>
</div>

La première chose à faire, c'est de récupérer une date, au format désiré. En ce qui nous concerne:

On décide d'écrire les accents: on convertit cette date obtenue en utf_8 en ISO-8859-1. A la fin du script, on fera le chemin inverse.

Ensuite, on convertit la date en tableau: chaque mot dans une cellule.


<?php $fiche_agenda_date_array = (explode(" ",utf8_decode(date('D d M Y')))); ?>

Chaque mot contenu dans ce tableau est scindé en lettres séparées, chaque lettre reçoit son balisage span, chaque mot est ensuite recomposé, puis on recompose la date en balisant chaque mot à son tour avec une balise span équipée de la bonne classe.


	<?php

	$lettre_prefix = '<span>';
	$lettre_suffix = '</span>';

	foreach($fiche_agenda_date_array as $key=>$mot) {

		$lettre_array = str_split($mot);

		foreach($lettre_array as $key2 => $lettre)

			{
				$lettre = $lettre_prefix.$lettre.$lettre_suffix;

				$lettre_array[$key2] = $lettre;

			}

		$mot = utf8_encode(implode('',$lettre_array));

		$fiche_agenda_date_array[$key]=$mot;

		}

	echo vsprintf('<span class="date-ligne date-jour">%s</span> <span class="date-ligne date-nombre">s</span> <span class="date-ligne date-mois">%s</span> <span class="date-ligne date-annee">%s</span>',$fiche_agenda_date_array);

	?>

Voilà pour la génération du code HTML. Il reste désormais à mettre en forme, en utilisant les CSS.

Le but est d'afficher les mots les uns en dessous de autres, mais alignés verticalement.


.date-container{
	text-transform: uppercase;
	background: #333;
	color: white;
	padding: 4px;
	width: 60px;}

.date-ligne{
	display: block;
	text-align: center;
	display: flex;
	justify-content: space-between;
	line-height: 0.9;
	margin: 0;}

.date-container .date-jour{ font-size: 160%;}

.date-container .date-nombre{font-weight: bold; font-size: 280%;}

.date-container .date-mois{font-weight: bold;  font-size: 120%;}

.date-container .date-annee{font-size: 90%;}

Il faudra reprendre le line-height et chaque font-size en % de façon à les adapter à la police utilisée. Bon, j'ai mis des couleurs.

jeu 28 Mai 2020
mer 12 août 2020
Dim 04 juil 2023

On peut pinailler un peu avec du position relative (ou le line-height) sur les chiffres qui composent le nombre du jour.

jeu 28 Mai 2020
mer 12 août 2020
Dim 04 juil 2023

On obtient le résultat voulu, avec une largeur fixe. Si on veut une largeur variable, on passe en vw.


.date-container3 {padding: 1vw; width: 30vw;}

.date-container3 .date-jour{ font-size: 10vw;}

.date-container3 .date-nombre{font-weight: bold; font-size: 20vw;}

.date-container3 .date-mois{font-weight: bold;  font-size: 10vw;}

.date-container3 .date-annee{font-size: 6vw;}

.date-container3 .date-nombre span:first-child{position: relative; left: -0.3vw;}

.date-container3 .date-nombre span:last-child{position: relative; right: -0.3vw;}
jeu 28 Mai 2020

P.S: usuellement, on utilise plutôt strftime pour avoir la date en français.


setlocale(LC_TIME, 'fr','fr_FR','fr_FR@euro','fr_FR.utf8','fr-FR','fra');

print strftime("%a %d %h %G");

Attention: en format raccourci du jour, il met un point à la fin du jour: "mar." plutôt que "mar". On passe un coup de rtrim au bon moment pour y remédier, mais là, on y perd plus qu'on y gagne. La conversion peut se faire avec le classique str_replace.