我的全日历添加ti没什么问题。我可以添加日期，说明，但不能在日历中添加时间。我需要帮助来解决此问题。我正在尝试添加很多东西，但这没有用。因此，我将问题发布在这里。
这是查看代码：
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Codeigniter Fullcalendar</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.min.css'; ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/style.css'; ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/font-awesome/css/font-awesome.min.css'; ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/plugins/fullcalendar/fullcalendar.css'; ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css'; ?>">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<center>
<a href="https://fullcalendar.io/">
<img id="logo" src="https://fullcalendar.io/images/logo.svg" width="58" height="48">
</a>
+
<a href="https://fullcalendar.io/">
<img id="logo" src="https://www.codeigniter.com/assets/images/ci-logo-white.png" width="58" height="48">
</a>
</center>
</div>
</nav>
<div class="container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="alert notification" style="display: none;">
<button class="close" data-close="alert"></button>
<p></p>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light bordered">
<div class="portlet-body">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<a href="#" class="btn btn-primary add_calendar"> ADD NEW EVENT
<i class="fa fa-plus"></i>
</a>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- place -->
<div id="calendarIO"></div>
<div class="modal fade" id="create_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="POST" id="form_create">
<input type="hidden" name="calendar_id" value="0">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create calendar event</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="alert alert-danger" style="display: none;"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Title <span class=""> * </span></label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Description</label>
<div class="col-sm-10">
<textarea name="description" rows="3" class="form-control" placeholder="Enter description"></textarea>
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<select name="color" class="form-control">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">◼ Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">◼ Turquoise</option>
<option style="color:#008000;" value="#008000">◼ Green</option>
<option style="color:#FFD700;" value="#FFD700">◼ Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">◼ Orange</option>
<option style="color:#FF0000;" value="#FF0000">◼ Red</option>
<option style="color:#000;" value="#000">◼ Black</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Start Date</label>
<div class="col-sm-10">
<div class="input-group input-medium date date-picker" data-date-format="yyyy-mm-dd" data-date-viewmode="years">
<input type="text" name="start_date" class="form-control" readonly>
<span class="input-group-addon"><i class="fa fa-calendar font-dark"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">End Date</label>
<div class="col-sm-10">
<div class="input-group input-medium date date-picker" data-date-format="yyyy-mm-dd" data-date-viewmode="years">
<input type="text" name="end_date" class="form-control" readonly>
<span class="input-group-addon"><i class="fa fa-calendar font-dark"></i></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript::void" class="btn default" data-dismiss="modal">Cancel</a>
<a class="btn btn-danger delete_calendar" style="display: none;">Delete</a>
<button type="submit" class="btn green">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- end place -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.min.js'; ?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/moment.min.js'; ?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.min.js'; ?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js'; ?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/plugins/fullcalendar/fullcalendar.js'; ?>"></script>
<script type="text/javascript">
var get_data = '<?php echo $get_data; ?>';
var backend_url = '<?php echo base_url(); ?>';
$(document).ready(function() {
$('.date-picker').datepicker();
$('#calendarIO').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: moment().format('YYYY-MM-DD'),
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
$('#create_modal input[name=start_date]').val(moment(start).format('YYYY-MM-DD'));
$('#create_modal input[name=end_date]').val(moment(end).format('YYYY-MM-DD'));
$('#create_modal').modal('show');
save();
$('#calendarIO').fullCalendar('unselect');
},
eventDrop: function(event, delta, revertFunc) { // si changement de position
editDropResize(event);
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur
editDropResize(event);
},
eventClick: function(event, element)
{
deteil(event);
editData(event);
deleteData(event);
},
events: JSON.parse(get_data)
});
});
$(document).on('click', '.add_calendar', function(){
$('#create_modal input[name=calendar_id]').val(0);
$('#create_modal').modal('show');
})
$(document).on('submit', '#form_create', function(){
var element = $(this);
var eventData;
$.ajax({
url : backend_url+'calendar/save',
type : element.attr('method'),
data : element.serialize(),
dataType: 'JSON',
beforeSend: function()
{
element.find('button[type=submit]').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>');
},
success: function(data)
{
if(data.status)
{
eventData = {
id : data.id,
title : $('#create_modal input[name=title]').val(),
description : $('#create_modal textarea[name=description]').val(),
start : moment($('#create_modal input[name=start_date]').val()).format('YYYY-MM-DD HH:mm:ss'),
end : moment($('#create_modal input[name=end_date]').val()).format('YYYY-MM-DD HH:mm:ss'),
color : $('#create_modal select[name=color]').val()
};
$('#calendarIO').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#create_modal').modal('hide');
element[0].reset();
$('.notification').removeClass('alert-danger').addClass('alert-primary').find('p').html(data.notif);
}
else
{
element.find('.alert').css('display', 'block');
element.find('.alert').html(data.notif);
}
element.find('button[type=submit]').html('Submit');
},
error: function (jqXHR, textStatus, errorThrown)
{
element.find('button[type=submit]').html('Submit');
element.find('.alert').css('display', 'block');
element.find('.alert').html('Wrong server, please save again');
}
});
return false;
})
function editDropResize(event)
{
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if(event.end)
{
end = event.end.format('YYYY-MM-DD HH:mm:ss');
}
else
{
end = start;
}
$.ajax({
url : backend_url+'calendar/save',
type : 'POST',
data : 'calendar_id='+event.id+'&title='+event.title+'&start_date='+start+'&end_date='+end,
dataType: 'JSON',
beforeSend: function()
{
},
success: function(data)
{
if(data.status)
{
$('.notification').removeClass('alert-danger').addClass('alert-primary').find('p').html('Data success update');
}
else
{
$('.notification').removeClass('alert-primary').addClass('alert-danger').find('p').html('Data cant update');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
$('.notification').removeClass('alert-primary').addClass('alert-danger').find('p').html('Wrong server, please save again');
}
});
}
function save()
{
$('#form_create').submit(function(){
var element = $(this);
var eventData;
$.ajax({
url : backend_url+'calendar/save',
type : element.attr('method'),
data : element.serialize(),
dataType: 'JSON',
beforeSend: function()
{
element.find('button[type=submit]').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>');
},
success: function(data)
{
if(data.status)
{
eventData = {
id : data.id,
title : $('#create_modal input[name=title]').val(),
description : $('#create_modal textarea[name=description]').val(),
start : moment($('#create_modal input[name=start_date]').val()).format('YYYY-MM-DD HH:mm:ss'),
end : moment($('#create_modal input[name=end_date]').val()).format('YYYY-MM-DD HH:mm:ss'),
color : $('#create_modal select[name=color]').val()
};
$('#calendarIO').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#create_modal').modal('hide');
element[0].reset();
$('.notification').removeClass('alert-danger').addClass('alert-primary').find('p').html(data.notif);
}
else
{
element.find('.alert').css('display', 'block');
element.find('.alert').html(data.notif);
}
element.find('button[type=submit]').html('Submit');
},
error: function (jqXHR, textStatus, errorThrown)
{
element.find('button[type=submit]').html('Submit');
element.find('.alert').css('display', 'block');
element.find('.alert').html('Wrong server, please save again');
}
});
return false;
})
}
function deteil(event)
{
$('#create_modal input[name=calendar_id]').val(event.id);
$('#create_modal input[name=start_date]').val(moment(event.start).format('YYYY-MM-DD'));
$('#create_modal input[name=end_date]').val(moment(event.end).format('YYYY-MM-DD'));
$('#create_modal input[name=title]').val(event.title);
$('#create_modal input[name=description]').val(event.description);
$('#create_modal select[name=color]').val(event.color);
$('#create_modal .delete_calendar').show();
$('#create_modal').modal('show');
}
function editData(event)
{
$('#form_create').submit(function(){
var element = $(this);
var eventData;
$.ajax({
url : backend_url+'calendar/save',
type : element.attr('method'),
data : element.serialize(),
dataType: 'JSON',
beforeSend: function()
{
element.find('button[type=submit]').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>');
},
success: function(data)
{
if(data.status)
{
event.title = $('#create_modal input[name=title]').val();
event.description = $('#create_modal textarea[name=description]').val();
event.start = moment($('#create_modal input[name=start_date]').val()).format('YYYY-MM-DD HH:mm:ss');
event.end = moment($('#create_modal input[name=end_date]').val()).format('YYYY-MM-DD HH:mm:ss');
event.color = $('#create_modal select[name=color]').val();
$('#calendarIO').fullCalendar('updateEvent', event);
$('#create_modal').modal('hide');
element[0].reset();
$('#create_modal input[name=calendar_id]').val(0)
$('.notification').removeClass('alert-danger').addClass('alert-primary').find('p').html(data.notif);
}
else
{
element.find('.alert').css('display', 'block');
element.find('.alert').html(data.notif);
}
element.find('button[type=submit]').html('Submit');
},
error: function (jqXHR, textStatus, errorThrown)
{
element.find('button[type=submit]').html('Submit');
element.find('.alert').css('display', 'block');
element.find('.alert').html('Wrong server, please save again');
}
});
return false;
})
}
function deleteData(event)
{
$('#create_modal .delete_calendar').click(function(){
$.ajax({
url : backend_url+'calendar/delete',
type : 'POST',
data : 'id='+event.id,
dataType: 'JSON',
beforeSend: function()
{
},
success: function(data)
{
if(data.status)
{
$('#calendarIO').fullCalendar('removeEvents',event._id);
$('#create_modal').modal('hide');
$('#form_create')[0].reset();
$('#create_modal input[name=calendar_id]').val(0)
$('.notification').removeClass('alert-danger').addClass('alert-primary').find('p').html(data.notif);
}
else
{
$('#form_create').find('.alert').css('display', 'block');
$('#form_create').find('.alert').html(data.notif);
}
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#form_create').find('.alert').css('display', 'block');
$('#form_create').find('.alert').html('Wrong server, please save again');
}
});
})
}
</script>
</body>
</html>
这是控制器代码：
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Calendar extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->table = 'calendar';
$this->load->model('Globalmodel', 'modeldb');
}
public function index()
{
$data_calendar = $this->modeldb->get_list($this->table);
$calendar = array();
foreach ($data_calendar as $key => $val)
{
$calendar[] = array(
'id' => intval($val->id),
'title' => $val->title,
'description' => trim($val->description),
'start' => date_format( date_create($val->start_date) ,"Y-m-d H:i:s"),
'end' => date_format( date_create($val->end_date) ,"Y-m-d H:i:s"),
'color' => $val->color,
);
}
$data = array();
$data['get_data'] = json_encode($calendar);
$this->load->view('calendar', $data);
}
public function save()
{
$response = array();
$this->form_validation->set_rules('title', 'Title cant be empty ', 'required');
if ($this->form_validation->run() == TRUE)
{
$param = $this->input->post();
$calendar_id = $param['calendar_id'];
unset($param['calendar_id']);
if($calendar_id == 0)
{
$param['create_at'] = date('Y-m-d H:i:s');
$insert = $this->modeldb->insert($this->table, $param);
if ($insert > 0)
{
$response['status'] = TRUE;
$response['notif'] = 'Success add calendar';
$response['id'] = $insert;
}
else
{
$response['status'] = FALSE;
$response['notif'] = 'Server wrong, please save again';
}
}
else
{
$where = [ 'id' => $calendar_id];
$param['modified_at'] = date('Y-m-d H:i:s');
$update = $this->modeldb->update($this->table, $param, $where);
if ($update > 0)
{
$response['status'] = TRUE;
$response['notif'] = 'Success add calendar';
$response['id'] = $calendar_id;
}
else
{
$response['status'] = FALSE;
$response['notif'] = 'Server wrong, please save again';
}
}
}
else
{
$response['status'] = FALSE;
$response['notif'] = validation_errors();
}
echo json_encode($response);
}
public function delete()
{
$response = array();
$calendar_id = $this->input->post('id');
if(!empty($calendar_id))
{
$where = ['id' => $calendar_id];
$delete = $this->modeldb->delete($this->table, $where);
if ($delete > 0)
{
$response['status'] = TRUE;
$response['notif'] = 'Success delete calendar';
}
else
{
$response['status'] = FALSE;
$response['notif'] = 'Server wrong, please save again';
}
}
else
{
$response['status'] = FALSE;
$response['notif'] = 'Data not found';
}
echo json_encode($response);
}
}
这是模型代码：
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Globalmodel extends CI_Model
{
public function get_list($table, $where = FALSE )
{
if ($where) {
$this->db->where($where);
}
return $this->db->get($table)->result();
}
public function insert($table, $param)
{
$this->db->insert($table, $param);
return $this->db->insert_id();
}
}