问题
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>
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).
Any suggestion on how my testing.php file should be done? sorry in advance if i happen to ask a stupid question.
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.
回答1:
You would probably need to append the start date as a url parameter in your window.location
...
select: function(start, end, jsEvent, ){
window.location = "testing.php?start=" + start;
},
Then on the php side you'd $_GET['start']
On the other hand, you could make an ajax post request in the select function.
回答2:
I used a modal to pop-up when selecting a date from the calendar from which I supplied required values.
Script
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
<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>
Note : Above code using Modal require bootstrap plug-ins
来源：https://stackoverflow.com/questions/34618960/fullcalendar-linking-to-database