Fullcalendar。链接到数据库 [英] Fullcalendar. linking to database
问题描述
目前我正在尝试使用完整日历插件的日历。这里是我的代码，
currently i am trying to to a calendar using the full calendar plugin. Here is my code,
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, jsEvent, view){
window.location = "testing.php";
},
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
目前，当我点击日期时，日历将我重定向到test.php（即我想要的）。这里有一些棘手的部分。我如何以某种方式对其进行编码，例如，当用户在1月10日按下时，详细信息（位于数据库中）将回显给该php。 （testing.php）。
Currently, when i click on a date, the calendar redirect me to the test.php (which is what i wanted). Here nows the tricky part. How do i code it in a way that, For example, when the user pressed on january 10th, the details( which is in the database) will be echo out to that php. (testing.php).
关于我的testing.php文件应该如何完成的任何建议？对不起，如果我碰巧问一个愚蠢的问题。
Any suggestion on how my testing.php file should be done? sorry in advance if i happen to ask a stupid question.
为了补充，它有点类似于这个 http://www.w3schools.com/php/php_ajax_database.asp 提前感谢您提供任何有用的提示。
To add on , it is somehow a feature which is similar to this http://www.w3schools.com/php/php_ajax_database.asp thank you in advance for any helpful tips.
推荐答案
当我从提供所需值的日历中选择一个日期时，我使用了一个模式来弹出。
I used a modal to pop-up when selecting a date from the calendar from which I supplied required values.
脚本
select: function (start, end, allDay) {
$('#eventTitle').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#eventDescription').val('');
$('#eventType').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#myModal').modal();
$('#eventStart').val(moment(start).format('YYYY-MM-DD, HH:mm:ss'));
$('#eventEnd').val(moment(end).format('YYYY-MM-DD, HH:mm:ss'));
HTML
HTML
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create Event</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Title</label> <input type="text" name="eventTitle" id="eventTitle" class="form-control" />
</div>
</div>
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Description</label> <textarea name="eventDescription" id="eventDescription" class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group"><div class="col-sm-6">
<label class="label bg-primary">Event Reason</label> <select id="eventType" class="form-control" name="event_type">
<option value="">---Select One---</option>
<option value="meeting">Meeting</option>
<option value="reminder">Reminder</option>
<option value="holiday">Holiday</option>
<option value="vacation">Vacation</option>
<option value="anniversary">Anniversary</option>
<option value="unsched">Unscheduled Leave</option>
<option value="sickleave">Sick Leave</option>
</select>
</div>
</div>
<label class="label bg-primary">Event Type</label>
<div class="form-group"><div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" >
<input type="radio" id="optionsRadio" name="quality[25]" checked="checked" value="false" /> Timed
</label>
<label class="btn btn-default" >
<input type="radio" id="optionsRadio" name="quality[25]" value="true" /> All Day
</label>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6">
<div class="form-group"><label class="label bg-primary">Start Date</label>
<div class="input-group date" id="datetimepicker1" >
<input type="text" class="form-control" id="eventStart"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6"><input type="text" class="form-control hidden" id="eventHide"/>
<div class="form-group"><label class="label bg-primary">End Date</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" id="eventEnd"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"><button type="Submit" class="btn bg-primary" id="event_submit" onClick="addEvent()"><span><i class="glyphicon glyphicon-check"></i></span> Submit</button>
<button type="Reset" class="btn btn-default" data-dismiss="modal"><span><i class="glyphicon glyphicon-erase"></i></span> Close</button>
</div>
</div>
</div>
</div>
注意：使用Modal的上述代码需要引导插件
Note : Above code using Modal require bootstrap plug-ins
这篇关于Fullcalendar。链接到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
