如何在全日历中显示具有时间的数据库获取事件 [英] How To show fetch events from database with time in fullcalendar
问题描述
您好朋友，在我的应用程序中，我确实制作了一个弹出页面，该页面可以在数据库中插入事件，还可以从数据库中获取事件，但是每次显示时都不会显示事件.数据/读取具有事件编号，事件标题，开始，结束的一系列事件&数组格式
Hello Friends In my Application I really Make a Popup Page which Inserts Events in database and also fetch events from database but events not show as per time Data/read have an array of numbers of events with eventid,eventtitle,start,end & format of array like
[{"id":"10"，"title":"ramukaka"，"start":"2013-04-04 18:44:00"，"end":"2013-04-05 18: 44:00}，{" id:" 11，" title:" rameshbhai，" start:" 2013-04-11 20:28:00，" end:" 2013-04-03 20:28:00}]
[{"id":"10","title":"ramukaka","start":"2013-04-04 18:44:00","end":"2013-04-05 18:44:00"},{"id":"11","title":"rameshbhai","start":"2013-04-11 20:28:00","end":"2013-04-03 20:28:00"}]
所以我不知道该怎么办，现在我要尝试更新一些事件，这些事件将以编辑模式&如果事件的变化(如修改标题或在另一个日期上拖放)也按eventid(每个事件唯一)存储在数据库中，因此我要做的代码与下面的
so what i have to do i don't know and more Now i m try to Update events which reopen a popup form with already fillup in edit mode & if changes in events like modify title or drag and drop on another date also store in database by eventid(unique for each events) so what i have to do my Code is same as Below
1)如果存在事件修改，如何在数据库中存储更新事件/事件
1) How to store Update events/event in database if exist events modify
2)成功插入后没有警报
2) after successfully insertion it is not alert
3)在eventsource中如何获取事件的开始时间，结束时间，这与mysql格式相同("yyyy-MM-dd H:mm:ss")
3) In eventsource how to fetch event starttime,endtime which is same as mysql format("yyyy-MM-dd H:mm:ss")
4)如何通过一个事件ID删除一个或多个事件，以及如何在数据库中完成更改
4) how to remove event or events by a eventid and changes also done in database
JavaSCRIPT:
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>
推荐答案
您好，朋友Fullcalendar使用MySql格式工作正常，只需在脚本中制作
Hello Friends Fullcalendar Is Working Fine with MySql Format Just Make in Script
eventSources: [
{
url: '<?php echo base_url(); ?>data/read',
type: 'POST',
**allDayDefault:false,**
color: '#65a9d7', // an option!
textColor: '#3c3d3d' // an option!
}
],
这篇关于如何在全日历中显示具有时间的数据库获取事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
