Jean le Chauve a écrit :Une autre manière de procéder et qui te donnera entière maîtrise de la mise en page du calendrier est d'utiliser Calendar Visualization
Très simple d'emploi !
Procédure : coller le code suivant dans le contenu de la page (wysiwyg décoché) :
Code :
<div align="center">
<img src='dot.gif' style='position:absolute; top: -1000px;'>
<table style="width: 800px;">
<tr>
<td colspan="2" valign="top">
<div style="float: left;" id="loginControlDiv"></div>
<div style="float: right;" id="statusControlDiv"></div>
</td>
</tr>
<tr>
<td valign="top">
<div id="navControlDiv"></div>
</td>
<td valign="top" align="right">
<div id="viewControlDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="calendarBodyDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="eventDisplayDiv"></div>
</td>
</tr>
</table>
</div>
Dans les options de page (Métadonnées spécifiques pour cette page)
Code :
{* Modifier les chemins des 2 fichiers suivants vers leur emplacement sur ton serveur *}
<link rel="stylesheet" type="text/css" href="http://gcal.appspot.com/calvis/default.css" />
<script type="text/javascript" src="http://gcal.appspot.com/calvis/calvis.js"></script>
<script type="text/javascript">{literal}
window.onload = function() {
calvis.ready(main);
}
function main() {
// insérer l'id de l'agenda
var calId = 'ID de ton agenda. Ex: 97bk20g5vstn3l5tc94panama4@group.calendar.google.com';
var calendar = new calvis.Calendar();
// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');
calendar.setEventCallback('mouseover', displayEvent);
// set the calendar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);
calendar.setLoginControl('loginControlDiv');
calendar.setDefaultView('month');
// display the calendar
calendar.render();
}
function displayEvent(event) {
var title = event.getTitle().getText();
var date = event.getTimes()[0].getStartTime().getDate();
var content = event.getContent().getText();
var eventHtml = [];
eventHtml.push(date.toString());
eventHtml.push('<br><br>');
eventHtml.push('<b>Titre :</b> ');
eventHtml.push(title);
eventHtml.push('<br>');
eventHtml.push('<br>');
eventHtml.push('<b>Description :</b>');
eventHtml.push('<p style="font-size: 11px;">');
eventHtml.push(content);
eventHtml.push('</p>');
eventHtml.push('<br>');
document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}{/literal}
</script>
Il faut, bien entendu, télécharger les
JS et
CSS pour ne pas encombrer la bande passante du concepteur et en cas de disparition de ce site.
La seule opération est de donner l'ID de ton agenda ici :
Code :
function main() {
// insérer l'id de l'agenda
var calId = 'ID de ton agenda. Ex: 97bk20g5vstn3l5tc94panama4@group.calendar.google.com';
Le script est pour un agenda public, pour un agenda privé : modifier la ligne
Code :
// set the calendar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);
de cette manière :
Code :
// set the caledar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
Tu as la possibilité d'insérer la google map de l'événement ou même une vidéo
(
http://gcal.appspot.com/calvis/demo2.html)
