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 :

Exemple de calendrier mis en forme

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 $activeLinks utiliseront le modèle en index 0 de la collection d’objet du paramètre links (ce qui conviendra dans la majorité des cas) ;
  • Le lien généré pointera par défaut sur l’action view du Contrôleur concerné, il est cependant possible de modifier celui-ci, voir les exemples précédent ;
  • Si le paramètre datefield de $activeLinks n’est pas précisé, le champs date par défaut sera automatiquement created ;
  • 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

Commentaires

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

Merci tout d’abord de ton intérêt pour ce composant.
Il y a en effet un problème sur les systèmes Windows lors de l’utilisation de la fonction strftime avec le paramètre %u. La solution est de remplacer la ligne 214 du fichier app/vendors/calendar/simple_calendar :
$weekDay = strftime(’%u’, $tstamp); par
$weekDay = strftime(’%w’, $tstamp) == 0 ? 7 : strftime(’%w’, $tstamp);

Je mets à jour l’archive avec cette correction dès que possible.

Réponse rapide et efficace!
Ce composant est très intéressant et très utile, ainsi que toutes les informations disponibles sur ce site.
Merci beaucoup.

Participez