Discussion :

[Ennicolem]

Bonjour,

Voilà plusieurs heures que j'essaie d'arriver à ajouter des évènements provenant d'un calendrier google public dans un plugin calendario qui accepte les éléments sous la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var calendarEvents = {
'mm-dd-yyyy' : 'Event',
'mm-dd-yyyy' : 'Event',
'mm-dd-yyyy' : 'Event',
'mm-dd-yyyy' : 'Event',
'mm-dd-yyyy' : 'Event',
'mm-dd-yyyy' : 'Event',
}

Pour un futur besoin, il n'est pas possible d'avoir 2 fois la même date dans 2 entrées différentes. Une date équivaut à une valeur. Or à l'avenir je vais avoir besoin de sélectionner 2 calendriers... il va me falloir merger des évènements pour une même date. Ca me semble compliqué.

Pour le moment mon problème n'est pas là. J'ai récupéré le JSON du calendrier sauf que j'ai eu des soucis. Tout d'abord, le plugin ne permet pas d'utiliser une date de début et une date de fin, donc, vu que GC me fournit ces dates de début et de fin, j'ai utilisé une fonction permettant de récupérer l'ensemble des jours entre 2 dates (j'ai bien galéré).

Mais pour faire tout ça, j'ai utilisé un tableau et des .push().

Quand je fais un alert de mon tableau final, il semble comporter les bonnes data, sauf que je suis obligé (le suis-je vraiment) de faire fonctionner mon plugin calendario au sein de $.getJSON car sinon, je perds mon tableau (qui redevient vide).

Or dès que je l'intègre, ça ne fonctionne plus.

Quelqu'un aurait-il une idée sur comment faire (puis après comment merger les events) ?

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$.getJSON("url", function(data) {
    var calendarEvents = [];
    $.each(data.items, function (items, data) {
 
        var startDate = data.start.dateTime,
            endDate = data.end.dateTime
        ;
 
        startDate = startDate.slice(0, -15);
        endDate = endDate.slice(0, -15);
 
        startDate = startDate.replace(/-/gi, ',');
        endDate = endDate.replace(/-/gi, ',');
 
        var currentDate = new Date(startDate),
            endDate = new Date(endDate)
            allDays = [];
        ;
 
        while (currentDate <= endDate) {
            dateTemp = new Date(currentDate);
            dateTemp = dateTemp.toLocaleDateString();
            dateTemp = dateTemp.replace(/\//gi, '-');
 
            allDays.push('\''+ dateTemp +'\' : \'<span class="event">Occupé</span>\'');
            currentDate.setDate(currentDate.getDate() + 1);
        }
 
        calendarEvents.push(allDays);
    });
 
    $('#calendar').calendario({
        caldata : calendarEvents
    }),
    $month = $('#custom-month').html(cal.getMonthName()),
    $year = $('#custom-year').html(cal.getYear());
});

Merci d'avance pour votre aide.

Bonne journée,

[bm]

Faudrait aussi le html , pour voir ce qui bloque entre les deux ..

[Ennicolem]

Le HTML, en fait n'est qu'une simple div, vide, qui est remplie par le plugin calendario.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="calendar"></div

[bm]

Calendario , c'est rigide comme plugin

http://plugins.jquery.com/tag/calendar/

D'autres sont plus abordables ..

[Ennicolem]

Bonjour,

Merci pour ces liens. La majorité des ressources contient malheureusement des datePicker donc ce n'est pas ce que je recherche.
J'en ai essayé d'autres et notamment Kalendar, mais la customization de l'UI est compliquée... et ne fait de toute façon pas vraiment ce que je désire.

Hier je m'y suis remis et j'ai réussi à afficher le calendrier (sans event) via l'appel JSON. Déjà une victoire.

Après j'ai essayé de faire fonctionner à nouveau la génération d'events et là j'obtiens un scénario vraiment bizarre. Je fais donc ma génération, je fais un alert du résultat et je lance le plugin calendario. Aucun event ne s'affiche.
Donc ce que je fais pour tester, est de copier/coller ce que l'alert me donne et de l'intégrer en dur (statique) dans la variable des events et là... ca fonctionne.

N'y a-t-il pas une solution pour passer de mon array à ce que souhaite calendario ?

Voici mon code mis à jour :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$.getJSON("url", function(data) {
		var $calendarEvents = [];
		$.each(data.items, function (items, data) {
 
			var startDate = data.start.dateTime,
				endDate = data.end.dateTime
    		;
 
			startDate = startDate.slice(0, -15);
			endDate = endDate.slice(0, -15);
 
			startDate = startDate.replace(/-/gi, ',');
			endDate = endDate.replace(/-/gi, ',');
 
			var currentDate = new Date(startDate),
				endDate = new Date(endDate)
				allDays = [];
			;
 
			while(currentDate <= endDate) {
				dateTemp = new Date(currentDate);
				dateTemp = dateTemp.toLocaleDateString();
				dateTemp = dateTemp.replace(/\//gi, '-');
				allDays.push('\''+ dateTemp +'\' : \'<span class="event-a">occupé</span>\'');
				currentDate.setDate(currentDate.getDate() + 1);
			}
 
			$calendarEvents.push(allDays);
		});
 
    	var calendarEvents = '{'+$calendarEvents.toString()+'}';
    	//calendarEvents = calendarEvents.toString();
    	//alert(calendarEvents.toString());
 
    	//var calendarEvents = //Fonctionne si je mets le résultat de l'alerte au dessus dans en dur dans la variable
 
		$('#calendar').calendario({
			caldata : calendarEvents
		}),
		$month = $('#custom-month').html( cal.getMonthName() ),
		$year = $('#custom-year').html( cal.getYear() );
	});

Encore merci pour votre aide.

[Ennicolem]

Bonsoir,

J'ai encore fait quelques tests et naturellement cela ne fonctionne toujours pas, sinon je ne serais pas là
Néanmoins j'ai peut-être une piste mais mon niveau de compréhension du JS est bien trop limité pour débuguer et corriger mon erreur.

Donc j'ai essayé quelque chose que je n'avais pas encore essayé. En utilisant les variables fournies par le plugin calendario, et en faisant une alerte dessus, j'obtiens comme résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[object Object]

Alors que si je fais un alert de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert($calendarEvents)

, à la fin, j'obtiens les valeurs à utiliser, donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'date' : 'contenu', 'date' : 'contenu'

, etc.

Je pense que mon souci vient de là. Comment faire en sorte que mon contenu $calendarEvents soit un objet (c'est bien ce que m'indique l'information [object Object] ?) ?
Par ailleurs, pourquoi ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var calendarEvents = { +$calendarEvents+ };

ne fonctionne pas ? Ca me renvoie du vide et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var calendarEvents = { $calendarEvents };

fait planter mon JS.

Merci d'avance pour votre aide et bonne nuit.