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
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FullCalendar Exemple</title>
<style>
.external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
margin-top:30px;
}
.external-listing .dragged{
cursor:pointer;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/lang-all.js"></script>
<script>
$(function() {
var moment, date,donnee;
$(".external").fullCalendar({
droppable: true,
editable: true,
lang: "fr",
drop: function(date, jsEvent) {
donnee={id:$(this).data("event").id};
$.ajax({
url:"miseajour.php",
type:"post",
data:{id:donnee.id},
dataType:"json",
success:function(reponse){
console.log("reponse.id :"+reponse.id);// on reçois l'id qui a été modifié (envoyé par miseajour.php)
$(".external-listing p.dragged").each(function(){
if( $(this).length >0 && $(this).data("event").id==reponse.id){//on verifie que l'élément p.dragged ayant le data-id=reponse.id pour le supprimer.
$(this).remove();
}
});
},
error:function(e){alert("erreur AjaxOnDrop :"+e.responseText);}
});
console.log("Dropped on " + date.format() + " event :" + jsEvent.clientX + " event.id :" + $(this).data("event").id);
},
eventAfterAllRender: function(view) {
moment = $(".external").fullCalendar('getDate');
date = moment.format();
$.ajax({
url: "getData.php",
type: "post",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(retour) {
$(".dragged,br").remove();
$.each(retour.name,function(i,value){
$(".external-listing")
.append("<p class='dragged' />")
.find('.dragged')
.eq(i)
.data("event",{
"id": $(retour.id)[i],// retour.id envoyé par getData.php
"stick": true,
"title": "Evenement" +$(retour.id)[i]})
.text(value)
.draggable({
zIndex: 999,
revert: true, // autoriser l'element de revenir a sa place initiale
revertDuration: false // temps original après libération de drag
});
});
}, //fin success
error:function(e){alert("erreur ajax :"+e.responseText);}
}); //fin ajax
} //fin eventAfterAllRender
}); // fin $(".external").fullCalendar
});
</script>
</head>
<body>
<div class="container">
<div class="external-events col-xs-2">
<h5>Liste Evenements :</h5>
<div class="external-listing">
</div>
</div>
<div class="external col-xs-10">
</div>
</div>
</body>
</html> |
FullCalendar et les évènements externes
Répondre avec citation
Partager