22/10/2011, 13:22:15
(Modification du message : 22/10/2011, 14:41:21 par Jean le Chauve.)
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 VisualizationTrè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>
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>
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);
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)