Discussion :

[Kontas]

Bonjour à tous.

J'ai un souci avec le plugIn fullcalendar.

Il est configuré avec 3 sources de données, elles s'affiche correctement. Seulement j'ai deux select qui permet d'affiner les choix en exécutant la fonction afficherCalendrier(), et c'est la que les galères commencent.

Si je demande a fullCalendar de supprimer les évents, et que je redéfini les sources dans ma fonction afficherCalendrier(), les événements du mois en cours sont ok, mais pour les autres mois j'aurais autant de doublons que de fois ou ma fonction afficherCalendrier() a été exécuté. J'ai fais plein de test avec différentes méthode de FullCalendar mais je n'arrive à rien.

Voici le 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<script type="text/javascript">
    $(document).ready(function() {
 
 
        var cheminRecupStage    = 'creneauxStages/ad_recupCreneauxStage.php?typeStage='+$('#selectTriParType').val()+'&filiere='+$('#selectTriParFiliere').val();
        var cheminRecupFerie    = 'creneauxStages/ad_recupFerie.php';
        var cheminRecupVacances = 'creneauxStages/ad_recupVacances.php';
 
 
        $('#calendarTest').fullCalendar({
            theme: false,
            disableDragging: true,
            disableResizing: true,
            firstDay: 1,
            weekends: false,
            lang: 'fr',
 
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
 
            selectable: true,
            selectHelper: true,
            eventClick: function (event, jsEvent, view) {
 
                if(event.className=="stageTest"){
 
                    stageInformation(event.id);
                    $('#dialog-stageInformation').modal('show');
 
                }
 
            },
            editable: false,
 
            /*events: {
                url: cheminRecupStage,
                color: true
            },*/
 
            eventSources: [
 
                // your event source
                {
                    url: cheminRecupStage,
                    color: true
                },
 
                {
                    url: cheminRecupFerie,
                    color: true
                },
 
                {
                    url: cheminRecupVacances,
                    color: true
                }
 
            ]
 
 
        });
    });
 
function AfficherCalendrier() {
 
        $("#calendarTest").fullCalendar( 'removeEvents');
 
         var cheminRecupStage = 'creneauxStages/ad_recupCreneauxStage.php?typeStage=' + $('#selectTriParType').val() + '&filiere=' + $('#selectTriParFiliere').val();
         var cheminRecupFerie = 'creneauxStages/ad_recupFerie.php';
         var cheminRecupVacances = 'creneauxStages/ad_recupVacances.php';
 
        $('#calendarTest').fullCalendar('addEventSource', cheminRecupStage);
        $('#calendarTest').fullCalendar('addEventSource', cheminRecupFerie);
        $('#calendarTest').fullCalendar('addEventSource', cheminRecupVacances);
    }
</script>

En vous remerciant

[Kontas]

Solution trouvé.

Pour expliquer un petit peut le problème se situer au niveau de la liste des sources. Effectivement pour pouvoir supprimer une source, le paramètre source doit être exactement le même .fullcalendar( 'removeEventSource', source ).

Donc si je défini une sources en récupérant les valeurs dynamique de mes selects, et que je demande de supprimer la source -> source = 'creneauxStages/ad_recupCreneauxStage.php?typeStage=' + $('#selectTriParType').val() + '&filiere=' + $('#selectTriParFiliere').val(); Les select n'ayant plus les mêmes valeurs ca ne risque pas de marcher.

Je me suis également acharné en essayant d'attribuer des id au sources, ce qu'on peut faire, comme ca pour supprimer une source c'était simple, mais je viens de me rendre compte d'un truc à l'instant, après y avoir passé deux heures .. Cette methode fait parti d'un pack premium http://fullcalendar.io/docs/resource...emoveResource/

Bref, j'ai fini par trouvé la solution, en passant les valeurs par POST, comme ca le lien de la source est toujours le même quel que soit l'état de mes select, et les valeurs des select sont récupéré dynamiquement par fullcalendar à chaque fois que la source est sollicité. Donc mes select n'ont plus qu'a appeler .fullCalendar( 'refetchEvents' ) et le tour est joué

Ouf

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
38
 
function AfficherCalendrier() {
 
        $("#calendarTest").fullCalendar( 'refetchEvents' );
 
 }
 
 
$('#calendarTest').fullCalendar({
            eventSources: [
                {
                    id:'stage',
                    url: 'creneauxStages/creneauxRecup.php',
                    type: 'POST',
                    data: function() {
                            return {
                                typeStage: $('#selectTriParType').val(),
                                filiere: $('#selectTriParFiliere').val()
                        };
                    },
                    error: function() {
                        alert('there was an error while fetching events!');
                    }
                },
                {
                    id:'vacances',
                    url: 'creneauxStages/ad_recupVacances.php',
                    type: 'POST',
                    rendering: 'background'
                },
                {
                    id:'ferie',
                    url: 'creneauxStages/ad_recupFerie.php',
                    type: 'POST',
                    rendering: 'background'
                }
            ]
        });