IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Google calendar JSON et jQuery plugin calendario


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 32
    Points : 17
    Points
    17
    Par défaut Google calendar JSON et jQuery plugin calendario
    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,

  2. #2
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    Faudrait aussi le html , pour voir ce qui bloque entre les deux ..

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 32
    Points : 17
    Points
    17
    Par défaut
    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

  4. #4
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    Calendario , c'est rigide comme plugin

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

    D'autres sont plus abordables ..

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 32
    Points : 17
    Points
    17
    Par défaut
    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.

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2010
    Messages : 32
    Points : 17
    Points
    17
    Par défaut
    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 : Alors que si je fais un alert de , à 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.

Discussions similaires

  1. Jquery + plugin + JSON
    Par GWIT_dev dans le forum jQuery
    Réponses: 0
    Dernier message: 04/04/2012, 17h44
  2. Equivalent Google Calendar
    Par Empty_body dans le forum Autres Logiciels
    Réponses: 2
    Dernier message: 08/10/2008, 23h47
  3. [SimpleXML] Analyse de Google Calendar
    Par regis1_1 dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 09/02/2008, 16h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo