Introduction

Afin de pouvoir afficher un planning dans une page Adelia Web, on pourra utiliser une bibliothèque javascript externe.

Dans cet exemple nous utiliserons la bibliothèque FullCalendar (http://arshaw.com/fullcalendar/).

Pré-requis et installation

Afin de faire fonctionner de manière exhaustive l'objet planning, il faudra récupérer les fichiers suivants sur le site de téléchargement de l'objet FullCalendar (http://arshaw.com/fullcalendar/download/) :

fullcalendar.css,
fullcalendar.print.css,
jquery-1.5.2.min.js,
jquery-ui-1.8.11.custom.min.js,
fullcalendar.min.js.

Ces fichiers seront placés pour l'exemple dans le dossier planning de l'application web.

En-tête de page

Placer les 5 fichiers récupérés dans un dossier planning à la racine du site web.
Insérer en en-tête de page (entre les balises <head> et </head>) les liens d'inclusion suivants :

<head>
...

<!- Ajout des feuilles de style "planning" dans l'entete de la page -> 
<link rel='stylesheet' type='text/css' href='../planning/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../planning/fullcalendar.print.css' media='print' />

<!- Ajout des bibbliothèques javascript "jquery" et "planning" -> 
<script type='text/javascript' src='../planning/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../planning/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../planning/fullcalendar.min.js'></script>

...
</head>

Affichage

Pour pouvoir afficher le planning, on réservera dans la page html un espace dédié à l'aide d'une balise div (ici nommée planning).

Ceci sera fait à l'intérieur du corps du document (à l'intérieur de la balise <body> ... </body>).

<body>
...

<!-- Ajout du container --> 
<div id="planning" style="width: 900px; margin: 0 auto"></div>

...
</body>

Paramétrage

Le paramétrage de l'objet sera effectué au sein d'une fonction (ici nommée planning_init), laquelle fonction sera placée à l'intérieur du corps du document, avant la balise </body>.
Cette fonction sera appelée une fois la page chargée, par exemple sur l'événement onload de la balise <body> :

<body onload='planning_init();'>

La fonction planning_init pourra être écrite de la façon suivante :

<script type="text/javascript">

var calendar;
   function planning_init() {
   calendar = $('#planning').fullCalendar({
      monthNames : ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet','Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
      monthNamesShort : ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
      dayNames : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
      dayNamesShort : ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
      allDayText : 'Journ&eacute;e',
      firstDay : 1,
      buttonText : {
         prevYear: '&nbsp;&lt;&lt;&nbsp;',
         nextYear: '&nbsp;&gt;&gt;&nbsp;',
         today:    "aujourd'hui",
         month:    'mois',
         week:     'semaine',
         day:      'jour'
      },
      columnFormat : {
         month: 'ddd',
         week: 'ddd d/M',
         day: 'dddd d/M'
      },
      titleFormat : {
         month: 'MMMM yyyy',                         
         week: "d MMM yyyy{ '&#150;' d MMM yyyy}",
         day: 'dddd, d MMM, yyyy'
      },
      axisFormat : 'HH:mm',
      timeFormat: {
         agenda: 'HH:mm{ - HH:mm}',
         '': 'HH:mm'
      },
      slotMinutes : 30,
      header: {
         left: 'prev,next today',
         center: 'title',
         right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'agendaWeek',
      selectable: true,
      editable: true,
      selectHelper: true,
      events: [
         ::evenements(10000)
      ]
   })
};
</script>

Les données envoyées par le code Adelia via la variable évènements devront avoir la structure suivante :

{
   id : '01',
   title: 'Entretien hebdo',
   start: new Date(2011, 8, 5, 10, 30),
   end: new Date(2011, 8, 5, 12, 00),
   allDay: false
},
{
   id : '02',
   title: 'Réunion projet',
   start: new Date(2011, 8, 5, 15, 00),
   end: new Date(2011, 8, 5, 17, 00),
   allDay: false
}

Chaque événement est encadré par une accolade ouvrante et une accolade fermante.
Chaque événement est défini par les paramètres suivants :

id : identifiant de l'évènement, il pourra être renvoyé lors d'une action (clic, déplacement, agrandissement/réduction)
title : texte affiché à l'utilisateur à l'intérieur de l'évènement,
start : date et heure de début de l'évènement(année, mois, jour, heure, minutes),
end : date et heure de fin de l'évènement(année, mois, jour, heure, minutes),
allDay : true si l'événement doit durer toute la journée, false sinon.

A noter

Une virgule devra séparer chaque évènement et le dernier évènement ne devra pas être terminé par une virgule.

Attention

Dans le cas de l'utilisation de la fonction Date() il faudra prendre garde au fait que les numéros de mois commencent à partir de 0 et non pas de 1. Ainsi 0=Janvier, 1=Février, ... 11=Décembre.

Un exemple de programme Adélia pourra être le suivant :

/* __ Initialisation des données du planning ______________________________

evenements = *Blank
evenements = evenements /// '{'
evenements = evenements /// '   id : ''01'','
evenements = evenements /// '   title: ''Entretien hebdo'','
evenements = evenements /// '   start: new Date(2011, 8, 5, 10, 30),'
evenements = evenements /// '   end: new Date(2011, 8, 5, 12, 00),'
evenements = evenements /// '   allDay: false'
evenements = evenements /// '},'
evenements = evenements /// '{'
evenements = evenements /// '   id : ''02'','
evenements = evenements /// '   title: ''Réunion projet'','
evenements = evenements /// '   start: new Date(2011, 8, 5, 15, 00),'
evenements = evenements /// '   end: new Date(2011, 8, 5, 17, 00),'
evenements = evenements /// '   allDay: false'
evenements = evenements /// '},'
evenements = evenements /// '{'
evenements = evenements /// '   id : ''03'','
evenements = evenements /// '   title: ''Développement Adelia'','
evenements = evenements /// '   start: new Date(2011, 8, 6, 14, 00),'
evenements = evenements /// '   end: new Date(2011, 8, 6, 18, 30),'
evenements = evenements /// '   allDay: false'
evenements = evenements /// '},'
evenements = evenements /// '{'
evenements = evenements /// '   id : ''04'','
evenements = evenements /// '   title: ''Appel'','
evenements = evenements /// '   start: new Date(2011, 8, 6, 15, 45),'
evenements = evenements /// '   end: new Date(2011, 8, 6, 17, 00),'
evenements = evenements /// '   allDay: false'
evenements = evenements /// '},'
evenements = evenements /// '{'
evenements = evenements /// '   id : ''05'','
evenements = evenements /// '   title: ''Marketing'','
evenements = evenements /// '   start: new Date(2011, 8, 7, 14, 00),'
evenements = evenements /// '   end: new Date(2011, 8, 7, 19, 00),'
evenements = evenements /// '   allDay: false'
evenements = evenements /// '},'
evenements = evenements /// '{'
evenements = evenements /// '   id : ''06'','
evenements = evenements /// '   title: ''Congés'','
evenements = evenements /// '   start: new Date(2011, 8, 8),'
evenements = evenements /// '   end: new Date(2011, 8, 9),'
evenements = evenements /// '   allDay: true'
evenements = evenements /// '}'

Adelia Web - Planning

Introduction

Pré-requis et installation

En-tête de page

Affichage

Paramétrage