Js cacher un div

Bonjour,
Je viens pour vous demander une solution a mon problème que je n'arrive pas à résoudre depuis deux jours.
Je travaille avec le calendrier Fullcalendar.
Qd j'arrive sur la page, j'ai calendrier avec des événements et un petit calendrier dans lequel je peux sélectionner une autre semaine.

Mon problème:
Lorsque je sélectionne une autre semaine, j'ai un nouveau calendrier avec les évenements qui s'affiche (c'est ce que je veux). Et j'ai aussi ds la fenêtre, le premier calendrier. Donc je me retrouve avec deux calendriers avec des événements.

Comment je peux faire pour cacher le premier calendrier lorsque je sélectionne un autre calendrier ?

Merci de votre aide.

Code:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<?php
session_start();
require '../scriptphp/core.php';
require '../scriptphp/selectCal.php';
require 'caljs.php';
$code_depot = 2;
?>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href='../css/FullcalendarMaison.css' media="all" rel="stylesheet" type="text/css" />
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.js'></script>
<script>
 
    $(document).ready(function() {
        $('#mycalendar1').fullCalendar( {
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ',,'
            },
            defaultView: 'month',
            dayClick: function( date, allDay, jsEvent, view ) {
                dayClicked(date);
            },
            events: [{
                title  : '',
                start  : '',
                end    : ''
            }]
        }); 
 
        /* initialize the calendar -----------------------------------------------------------------*/
        var data = <?php echo $Category->evenements_rdv($code_depot,$_GET['debutsem'], $_GET['finsem']); ?>;
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ',agendaWeek,agendaDay'
            },
            events : data,
 
            firstDay : 1,
            timeFormat: 'H:mm',
            weekends: false,
            editable: true,
            droppable: true, 
            drop: function(date, allDay) { 
                var originalEventObject = $(this).data('eventObject'); 
                var copiedEventObject = $.extend({}, originalEventObject); 
                copiedEventObject.start = date; 
                copiedEventObject.allDay = allDay;
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                if ($('#drop-remove').is(':checked')) { 
                    $(this).remove(); 
                }
            }
        });
 
    });
    function dayClicked(date){
        alert(date);
        var start = $.fullCalendar.formatDate(date, "MM/dd/yyyy");
        alert ("START :"+start);
        $(this).remove();
        affCalend()
        $('#calendar').fullCalendar( 'gotoDate', date);
    }
 
    //FUNCTION POUR DAYCLICK
   function affCalend(){
 
        data = <?php echo $Category->evenements_rdv($code_depot, '09/30/2013', '10/04/2013'); ?>;
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ',agendaWeek,agendaDay'
            },
            cache: true,
            events : data,
            firstDay : 1,
            timeFormat: 'H:mm',
            weekends: false,
            editable: true,
            droppable: true, 
            drop: function(date, allDay) { 
                var originalEventObject = $(this).data('eventObject'); 
                var copiedEventObject = $.extend({}, originalEventObject); 
                copiedEventObject.start = date; 
                copiedEventObject.allDay = allDay;
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                if ($('#drop-remove').is(':checked')) { 
                    $(this).remove(); 
                }
            }
        });
   }
</script>
 
</head>
<body>
    Planning en construction - 09/10/13
    <div id='bodySmall'> 
    <div id="wrapSmall">
            <div id="mycalendar1"></div>
    </div>
    </div>
    <div id='bodyCalendar'>
    <div id='wrap'>
        <div id='calendar'></div>
        <div style='clear:both'></div>
    </div>
    </div>
</body>
</html>

il doit bien y avoir une methode ('hide') .....
ou au pire

Code:

$('#calendar').fullCalendar().hide();

J'ai ajouté hide.
Les deux calendrier ne s'affichent pas ?

Si tu as d'autre solution ?

Merci,

Logique, tu dis en gros, cache toutes les divs ayant pour id calendar, met des id unique déjà a tes calendriers et tu pourras cacher le mon calendrier

lemirandais

Peux-tu m'aider à réaliser l'id unique dans le code ?
J'ai essayé de le faire ms je n'arrive pas à visualiser l'id unique et afficher l'id unique dans le body.

Merci,

passe avec des class plutot que des id ...

J'ai ajouté "class", je n'ai rien à l'écran.

Merci,

Le code ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    Planning en construction - 09/10/13
    <div id='bodySmall'> 
    <div id="wrapSmall">
            <div id="mycalendar1"></div>
    </div>
    </div>
    <div id='bodyCalendar'>
    <div id='wrap'>
        <div class='calendar'></div>
        <div style='clear:both'></div>
    </div>
    </div>
</body

>