我想向程序添加重复发生的事件。
我尝试查看fullCalendar 3.x文档和“使用fullCalendar” book
我最后一次尝试未能填充日历或向其中添加新条目！
我为.js添加了json，并更改了数据库架构以反映这一点。 php文件也进行了更新，以添加相关字段并具有必需的事件信息，但是当我添加新事件时，它没有添加到数据库中。
此外，我想使事件重复发生，并且这里可能也需要一些指导！
editable-calandar.js
$(document).ready(function(){
var calendar = $('#calendar').fullCalendar({
header:{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,listWeek,agendaDay,listDay'
},
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'agendaWeek',
editable: true,
selectable: true,
allDaySlot: false,
events: "editable-calandar.php?view=1",
eventClick: function(event, jsEvent, view) {
endtime = $.fullCalendar.moment(event.end).format('h:mm');
starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
},
//header and other values
select: function(start, end, jsEvent) {
endtime = $.fullCalendar.moment(end).format('h:mm');
starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
start = moment(start).format();
end = moment(end).format();
$('#createEventModal #startTime').val(start);
$('#createEventModal #endTime').val(end);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('toggle');
},
eventDrop: function(event, delta){
$.ajax({
url: 'editable-calandar.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
type: "POST",
success: function(json) {
//alert(json);
}
});
},
eventResize: function(event) {
$.ajax({
url: 'editable-calandar.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
type: "POST",
success: function(json) {
//alert(json);
}
});
}
});
$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
$('#deleteButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doDelete();
});
function doDelete(){
$("#calendarModal").modal('hide');
var eventID = $('#eventID').val();
$.ajax({
url: 'editable-calandar.php',
data: 'action=delete&id='+eventID,
type: "POST",
success: function(json) {
if(json == 1)
$("#calendar").fullCalendar('removeEvents',eventID);
else
return false;
}
});
}
function doSubmit(){
$("#createEventModal").modal('hide');
var title = $('#title').val();
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
var allday = $('#allday').val();
var privateevent = $('#privateevent').val();
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
var repeat_period = $('#repeat_period').val();
var repeat_frequency = $('#repeat_frequency').val();
$.ajax({
url: 'editable-calandar.php',
data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime+'&allday='+allday+'&privateevent='+privateevent+'&start_date='+start_date+'&end_date='+end_date+'&repeat_period='+repeat_period+end_date+'&repeat_frequency='+repeat_frequency,
type: "POST",
success: function(json) {
$("#calendar").fullCalendar('renderEvent',
{
id: json.id,
title: title,
start: startTime,
end: endTime,
allday: allday,
privateevent: privateevent,
start_date: start_date,
end_date: end_date,
repeat_period: repeat_period,
repeat_frequency: repeat_frequency,
},
true);
}
});
}
editable-calandar.php
<?php
include("db.php");
if(isset($_POST['action']) or isset($_GET['view']))
{
if(isset($_GET['view']))
{
header('Content-Type: application/json');
$start = mysqli_real_escape_string($connection,$_GET["start"]);
$end = mysqli_real_escape_string($connection,$_GET["end"]);
$result = mysqli_query($connection,"SELECT * FROM `events` where (date(start) >= '$start' AND date(start) <= '$end')");
while($row = mysqli_fetch_assoc($result))
{
$events[] = $row;
}
echo json_encode($events);
exit;
}
elseif($_POST['action'] == "add")
{
mysqli_query($connection,"INSERT INTO `events` (
`title` ,
`start` ,
`end` ,
`allday`,
`privateevent`,
`start_date`,
`end_date`,
`repeat_period`,
`repeat_frequency`
)
VALUES (
'".mysqli_real_escape_string($connection,$_POST["title"])."',
'".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["start"])))."',
'".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["end"])))."'
)");
header('Content-Type: application/json');
echo '{"id":"'.mysqli_insert_id($connection).'"}';
exit;
}
elseif($_POST['action'] == "update")
{
mysqli_query($connection,"UPDATE `events` set
`start` = '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["start"])))."',
`end` = '".mysqli_real_escape_string($connection,date('Y-m-d H:i:s',strtotime($_POST["end"])))."'
where id = '".mysqli_real_escape_string($connection,$_POST["id"])."'");
exit;
}
elseif($_POST['action'] == "delete")
{
mysqli_query($connection,"DELETE from `events` where id = '".mysqli_real_escape_string($connection,$_POST["id"])."'");
if (mysqli_affected_rows($connection) > 0) {
echo "1";
}
exit;
}
}
?>
<!doctype html>
<html lang="en"><head>
<title>Team xyz Calander</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/editable-calandar.js"></script>
<script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.js"></script>
<style type="text/css">
.block a:hover{
color: silver;
}
.block a{
color: #fff;
}
.block {
position: fixed;
background: #2184cd;
padding: 20px;
z-index: 1;
top: 240px;
}
</style>
</head>
<body>
<div>
<h2>Team xyz Calandar</h2>
</div>
<!-- add calander in this div -->
<div class="container">
<div class="row">
<div id="calendar"></div>
</div>
</div>
<!-- Modal -->
<div id="createEventModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Event</h4>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="inputPatient">Event:</label>
<div class="field desc">
<input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
<!-- ****** ADD REPEATABLE EVENTS ****** -->
<label for="repeat_create" style="display:inline-block">Repeat </label>
<select name="repeat_period" id="repeat_period" style="width:150px">
<option value="repeat_never" data-label="never" selected >Just once</option>
<option value="repeat_daily" data-label="days">Daily</option>
<option value="repeat_weekly" data-label="weeks">Weekly</option>
<option value="repeat_monthly" data-label="months">Monthly</option>
</select>
<label for="repeat_frequency" style="display:inline-block">Repeat every </label>
<input type="text" name="repeat_frequency" id="repeat_frequency" class='integer' style="width:40px" value="1" />
<span id="repeat_label_create">***</span>
<br>
<label for="start_date" style="display:inline-block">Beginning at </label>
<input type="date" name="start_date" id="start_date" class='date' style="width:80px" value="" />
<label for="end_date" style="display:inline-block">Ending at </label>
<input type="date" name="end_date" id="end_date" class='date' style="width:80px" value="" />
<!-- ****** ADD REPEATABLE EVENTS ****** -->
</div>
</div>
<input type="hidden" id="startTime"/>
<input type="hidden" id="endTime"/>
<div class="control-group">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
</div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Event Details</h4>
</div>
<div id="modalBody" class="modal-body">
<h4 id="modalTitle" class="modal-title"></h4>
<div id="modalWhen" style="margin-top:5px;"></div>
</div>
<input type="hidden" id="eventID"/>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
</div>
</div>
</div>
</div>
<!--Modal-->
<?php
// Insert the page footer
require_once('footer.php');
?>