Js cacher un div

**bella1** · 10/10/2013, 11h59

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 :

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
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>

**SpaceFrog** · 10/10/2013, 12h53

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

Code :

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

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

**bella1** · 10/10/2013, 17h47

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

Si tu as d'autre solution ?

Merci,

**lemirandais** · 11/10/2013, 11h43

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

**bella1** · 11/10/2013, 12h15

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,

**SpaceFrog** · 11/10/2013, 13h28

passe avec des class plutot que des id ...

Js cacher un div

jQuery

Vue hybride

Discussions similaires

Partager

Partager