Comment montrer extraction des événements à partir de la base de données avec le temps dans fullcalendar

Bonjour les Amis, Dans mon Application, j'ai vraiment un Popup Page qui Insère des Événements dans la base de données et aussi récupérer des événements à partir de la base de données, mais des événements à ne pas montrer que par des Données en temps/de lecture ont un tableau de nombres d'événements avec id de l'événement,eventtitle,début,fin & format de tableau comme

---

[{"id":"10","title":"ramukaka","start":"2013-04-04 18:44:00","fin":"2013-04-05 18:44:00"},{"id":"11","title":"rameshbhai","start":"2013-04-11 20:28:00","fin":"2013-04-03 20:28:00"}]

---

donc ce que j'ai à faire, je ne sais pas et en plus Maintenant, je m essayez de mettre à Jour les événements qui rouvrir une fenêtre de forme avec déjà fillup en mode edit & si les changements dans les événements comme modifier le titre ou faites-la glisser sur une autre date également de stocker en base de données par l'id d'événement(unique pour chaque événements) donc ce que j'ai à faire de mon Code est le même que ci-Dessous

---

1) Comment stocker les événements de mise à Jour/l'événement dans la base de données s'il existe des événements de modifier

2) après le succès de l'insertion, il n'est pas alerte

3) Dans eventsource comment chercher de l'événement starttime,endtime qui est la même que mysql (format"aaaa-MM-jj hh:mm:ss")

4) comment faire pour supprimer un événement ou des événements par un id de l'événement et les changements dans la base de données

JavaSCRIPT:

<script>
$(document).ready(function() {
var count=0;
var liveDate=new Date();
var dat = new Date();
var d = dat.getDate();
var m = dat.getMonth();
var y = dat.getFullYear();
$.getJSON("<?php echo base_url(); ?>names",function(data){
var select = $('#AgentName'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
}
else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value){
options[options.length] = new Option(value['name'], value['id']);
});
});
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$("#popup").show();
$("#eventName").focus();
$("#submit").click(function(){
var title=$("#eventName").val();
if (title) {
calendar.fullCalendar('renderEvent',{
title: title,
start: start,
end: end,
allDay: false
},
true //make the event "stick"
);
var dataString={};
dataString['eventName']=title;
dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url(); ?>data/insert',
data: dataString,
success: function(data) {
alert("Data Insert SuccessFully");
if(data.success)
alert("Data Insert SuccessFully");
}
});
}
});
},
editable: true,
viewDisplay: function(view) {
if(view.name=="month" && count==0){
var a=$(".fc-day-number").prepend("<img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>");                                    
count++;
}
},
eventSources: [
{
url: '<?php echo base_url(); ?>data/read',
type: 'POST',
id:id,
title:title,
start:new Date(start),
end:new Date(end),//use the `url` property
color: '#65a9d7',    //an option!
textColor: '#3c3d3d'  //an option!
}                    
],
eventClick : function (start,end){
$("#popup").open();
$("#submit").click(function(){
var title=$("#eventName").val();
if (title) {
calendar.fullCalendar('renderEvent',{
title: title,
start: start,
end: end,
allDay: false
},
true //make the event "stick"
);
var dataString={};
dataString['eventName']=title;
dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url(); ?>data/update',
data: dataString,
success: function(data) {
alert("Data Insert SuccessFully");
if(data.success)
alert("Data Insert SuccessFully");
}
});
}
calendar.fullCalendar('unselect');
calendar.fullCalendar('refetchEvents');
$("#popup").hide();
});
}
});
});
</script>

---

CSS CODE:
<style>
/*
*/      body {
text-align: left;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 70%;
margin: 0 auto;
text-align:left;
}
#popup{
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
background: #000;
display: none;
width:100%;
height: 100%;
opacity:0.5;
border:1px;
font-size: 13px;
padding-top: 20%;
padding-left: 43%;
border-color: #0033ff;
}
#popup table{
border-color: #00620C;
border-style: solid;
border: 5px;
}
#popup input{
width:80px;
border-radius: 5px;
} 
#popup table label{
font-size: 12px;
}
</style>

---

HTML CODE:
<div class="wrapper">
<div id='calendar'></div>
<div id="detail"></div>
<div id="popup"> 
<form name="addData" id="addData" action="" method="post">
<table>
<tr>
<td><input type="hidden" name="eventID" id="eventID"></td>
</tr>
<tr>
<td><label for="eventName">Description : </label></td>
<td><input name="eventName" id="eventName"type="text"></td>
</tr>
<tr>
<td><label for="AgentName">AgentName : </label></td>
<td><select name="AgentName" id="AgentName"></select></td>
</tr>
<tr>
<td><label for="UserName">UserName : </label></td>
<td><select name="UserName" id="UserName"></select></td>
</tr>
<tr>
<td align="left"colspan="2"><button type="submit"class="k-button" name="submit" id="submit">Submit</button>
<button type="reset" name="reset" class="k-button" id="reset">Reset</button>
<button type="submit"class="k-button" name="cancel" id="cancel">Cancel</button>
</td>
</tr>
</table>
</form>
</div>
</div>

OriginalL'auteur Ankit Doshi | 2013-04-08