Bonjour à tous,

J'utilise Fullcalender pour avoir un planning en ligne pour une association. J'utilise des drag and drop externes afin que ce soit plus facile à l'utilisation.

En bref, il s'agit d'un planning ou on peut venir dropper des agents (d'une div externe au calendrier) et de les entrer dans les jours correspondant. Il est possible de modifier le jour et l'heure de l'évenement par drag and drop et de le supprimer en cliquant dessus. Cela reste relativement simple.

Si j'utilise les eventsObjects de fullcalendar "Select" ou "Drop" aucun problème j'arrive a entrer une valeur et cela s'enregistre, idem pour un udpate avec drop. Mais lorsque j'essaie avec eventReceive, le navigateur internet me retourne
TypeError: a.isValid is not a function
J'ai eu beau recherché des heures je ne trouve pas d'où viens mon erreur et n'ai pas trouvé non plus de réponse sur internet.

Pouvez-vous m'éclairer ?


Merci d'avance

index.php
Code HTML : 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset='utf-8' />
  <link href='css/fullcalendar.css' rel='stylesheet' />           
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
  <script>
 
    $(document).ready(function() {
 
        /* initialize the external events
        -----------------------------------------------------------------*/
 
        $('#external-events .fc-event').each(function() {
 
            // store data so the calendar knows to render an event upon drop
            $(this).data('event', {
                title: $.trim($(this).text()), // use the element's text as the event title
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            });
 
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
 
        });
 
 
    /* initialize the calendar
    -----------------------------------------------------------------*/
 
    $(document).ready(function() {
       var calendar = $('#calendar').fullCalendar({
        editable:true,
        droppable:true,
        header:{
         left:'prev,next today',
         center:'title',
         right:'month,agendaWeek,agendaDay'
        },
        events: 'load.php',
        eventReceive: function(start, end, allDay)
        {
          var title = event.title;
          var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
          var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
          $.ajax({
           url:"insert.php",
           type:"POST",
           data:{title:title, start:start, end:end},
           success:function()
           {
            calendar.fullCalendar('refetchEvents');
            alert("Added Successfully");
           }
          })
        },
        editable:true,
        eventResize:function(event)
        {
         var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
         var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
         var title = event.title;
         var id = event.id;
         $.ajax({
          url:"update.php",
          type:"POST",
          data:{title:title, start:start, end:end, id:id},
          success:function(){
           calendar.fullCalendar('refetchEvents');
           alert('Event Update');
          }
         })
        },
 
        eventDrop:function(event)
        {
         var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
         var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
         var title = event.title;
         var id = event.id;
         $.ajax({
          url:"update.php",
          type:"POST",
          data:{title:title, start:start, end:end, id:id},
          success:function()
          {
           calendar.fullCalendar('refetchEvents');
           alert("Event Updated");
          }
         });
        },
 
        eventClick:function(event)
        {
         if(confirm("Are you sure you want to remove it?"))
         {
          var id = event.id;
          $.ajax({
           url:"delete.php",
           type:"POST",
           data:{id:id},
           success:function()
           {
            calendar.fullCalendar('refetchEvents');
            alert("Event Removed");
           }
          })
         }
        },
 
       });
      });
      });
 
  </script>
 
</head>
<body>
    <div id='wrap'>
 
        <div id='external-events'>
            <h4>Draggable Events</h4>
            <div class='fc-event' data-event='1'>Agent 1</div>
            <div class='fc-event' data-event='2'>Agent 2</div>
            <div class='fc-event' data-event='3'>Agent 3</div>
            <div class='fc-event' data-event='4'>Agent 4</div>
            <div class='fc-event' data-event='5'>Agent 5</div>
        </div>
 
        <div id='calendar'></div>
 
        <div style='clear:both'></div>
 
    </div>
</body>
</html>