JavaScript — полный календарь. ссылка на базу данных

В настоящее время я пытаюсь в календарь, используя полный плагин календаря. Вот мой код,

<!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 (что я и хотел). Здесь теперь самая сложная часть. Как мне кодировать его таким образом, чтобы, например, когда пользователь нажал 10 января, детали (которые есть в базе данных) будут отражены в этом php. (Testing.php).

Любое предложение о том, как мой файл testing.php должен быть сделан? заранее извините, если мне случится задать глупый вопрос.

Чтобы добавить, это как-то особенность, которая похожа на это http://www.w3schools.com/php/php_ajax_database.asp заранее благодарю за любые полезные советы.

0

Решение

Вы, вероятно, должны добавить дату начала в качестве параметра url в вашем window.location

...
select: function(start, end, jsEvent, ){
window.location = "testing.php?start=" + start;
},

Тогда на стороне PHP вы бы $_GET['start']

С другой стороны, вы можете сделать ajax post запрос в функции select.

0

Другие решения

Я использовал модал для всплывающего окна при выборе даты в календаре, из которого я ввел необходимые значения.

скрипт

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">&times;</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>
&nbsp;&nbsp;&nbsp;&nbsp;<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, требуются подключаемые модули начальной загрузки.

0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector