Génération automatique d’un calendrier avec SimpleCalendarComponent
Nous souhaiterions agrémenter notre application CakePHP d’un calendrier, pour présenter agréablement des données par ordre chronologique. Nous allons utiliser la classe SimpleCalendar et le composant SimpleCalendarComponent.
1. Présentation de la classe SimpleCalendar
La classe SimpleCalendar permet de générer un calendrier au balisage valide (x)HTML 1.0 Strict, de manière simple et efficace.
Voici quelques exemples d’utilisation :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $cal = new SimpleCalendar(); // afficher le calendrier du mois et de l'année courante $cal->showCalendar(); // avancer le calendrier vers le mois prochain $cal->toNextMonth(); // ré-affichage du calendrier $cal->showCalendar(); // recule le calendrier d'un an $cal->toDate('previous year'); // ré-affichage du calendrier $cal->showCalendar(); // on souhaite afficher le calendrier de septembre 2008 en anglais avec l'affichage du nom complet des jours : $cal = new SimpleCalendar('09', '2008', array('locale' =>; 'en', 'fullDayName' => true)); |
Nous souhaitons à présent intégrer le calendrier dans notre application CakePHP, et rendre cliquables certaines dates en fonctions de nos données.
2. Installation de la classe et du composant
Nous devons dans un premier temps télécharger la classe SimpleCalendar et la placer dans le répertoire vendors/calendar de notre application. Après installation, nous obtenons le chemin suivant :
{app}/vendors/calendar/simple_calendar.php
Il faut à présent intégrer la classe SimpleCalendar au sein de notre application, pour cela, nous allons installer le composant spécialement créé à l’occasion : SimpleCalendarComponent. Celui-ci va charger et instancier la classe SimpleCalendar au sein l’application, à l’aide de la fonction vendor.
3. Usage simple
Imaginons la gestion d’un blog avec des articles (posts) et des commentaires (comments).
Soit les données du modèle suivant :
Post hasMany Comments
Comments belongsTo Post
Nous souhaitons afficher notre calendrier sur la page de liste des articles (/posts/index) afin de mettre en évidence leur date de publication.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // {app}/controllers/post_controller.php class PostsController extends AppController { var $name = 'Posts'; var $scaffold; // chargement du component var $components = array('SimpleCalendar'); function index() { // récupération de la liste des articles $posts = $this->Post->find('all'); $this->set('posts', $posts); // initialisation du composant $this->set('cal', $this->SimpleCalendar->setUp()); } } |
Nous avons créé une variable $cal, à l’aide de la fonction Controller::set contenant une instance de la classe SimpleCalendar. Il ne reste plus qu’a afficher le calendrier dans notre vue.
1 2 | // {app}/views/posts/index.ctp $cal->showCalendar(); |
Le calendrier du mois en cours s’affiche. Libre à nous de mettre ce dernier en forme à l’aide de CSS :

4. Usage avancé
Nous souhaitons à présent mettre en évidence des dates qui nous intéressent, par exemple la date de création d’un article, et faire de cette date un lien vers l’article.
Reprenons notre Contrôleur et modifions les paramètres d’appel de la fonction setUp() du SimpleCalendarComponent.
1 2 3 4 5 6 7 8 9 10 11 | // {app}/controllers/posts_controller.php function index() { // récupération de la liste des articles $posts = $this->Post->find('all'); $this->set('posts', $posts); $this->set('cal', $this->SimpleCalendar->setUp( null, null, array('activeLinks' => array('links' => $posts)) )); } |
Et voilà ! Comme par magie, nos liens pointent vers l’action view du Contrôleur PostsController avec l’id du post associé : /posts/view/{$post['Post']['id']}.
Nous souhaitons à présent afficher non plus la date de création, mais la date de publication des articles (supposons un champ published dans la table posts). Nous souhaitons d’autre part appeler nos articles par leur date de publication et leur titre : /posts/03/2007/my-first-post.
1 2 3 4 5 6 7 | $this->set('cal', $this->SimpleCalendar->setUp( null, null, array('activeLinks' => array( 'links' => $posts, 'path' => 'posts' . DS . date('m') . DS . date('Y'), 'identifier' => 'title', 'datefield' => 'published')) )); |
Pour notre dernier exemple, nous ne souhaitons non plus afficher les dates relatives aux articles mais les dates associées aux commentaire des articles.
1 2 3 4 5 6 7 8 9 10 | function index() { $posts = $this->Post->find('all'); $this->set('posts', $posts); $comments = Set::extract($posts, '{n}.Comment'); $this->set('cal', $this->SimpleCalendar->setUp( null, null, array('activeLinks' => array('links' => $comments, 'path' => 'comments/view')) )); } |
Quelques précisions :
- Par défault, les liens actifs
$activeLinksutiliseront le modèle en index0de la collection d’objet du paramètrelinks(ce qui conviendra dans la majorité des cas) ; - Le lien généré pointera par défaut sur l’action
viewdu Contrôleur concerné, il est cependant possible de modifier celui-ci, voir les exemples précédent ; - Si le paramètre
datefieldde$activeLinksn’est pas précisé, le champs date par défaut sera automatiquementcreated; - La classe et le composant ne sont pas en version finale, il se peut que des bugs subsistent ;
- Sur les systèmes *nix, vous pouvez obtenir la liste des locales disponibles à l’aide de la commande
locale -a.
Télécharger SimpleCalendar et SimpleCalendarComponent (fichier zip, 4,27 Ko)
Christophe Cholot
Merci pour ce super blog très riche en information.
Je rencontre cependant des difficultés dans l’utilisation de SimpleCalendar.
Il me semble tout avoir bien installé (fichiers copiés au bon endroit): je n’ai aucun message d’erreur de cakephp (v.1.2), mais déjà le point 3 “Usage simple” ne fonctionne pas… j’ai juste l’en-tête du calendrier avec la date et les jours de la semaine, ensuite une ligne de 7 “td” avec une classe “disabled”.
Pour faire plus simple, voici le résultat:
13 February 2007
MonTueWed ThuFriSatSun
Merci d’avance pour votre aide.
Guillaume
13 février 2008 à 22:20
Auteur : Guillaume Ryckelynck