jquery - 完整的日历 ajax 事件插入未在日历上呈现
问题描述
我在 laravel 中发出 post 请求并得到这个对象作为响应：
{id: 11, title: "dummy", allDay: false, start: "2021-06-12T19:23:00+00:00", end: "2021-06-12T19:28:00+00:00", …}
allDay: false
color: "#f05050"
end: "2021-06-12T19:28:00+00:00"
id: 11
start: "2021-06-12T19:23:00+00:00"
title: "dummy"
__proto__: Object
现在在完整日历中创建新活动
var newEvent = aboveobject;
$('#calendar').fullCalendar('renderEvent', newEvent);
事件未显示在日历中
编辑小提琴
<html lang="en"><head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="Olpary8p2p3xQOLtDnT4irmxg6IKMvvucL1LIDF5">
<title>Laravel</title>
</head>
<body>
<div class="modal fade" id="add_event_modal" tabindex="-1" role="dialog" aria-labelledby="add_event_modal_title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="add_event_modal_title">Create a Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="create_event">
<input type="hidden" name="_token" value="Olpary8p2p3xQOLtDnT4irmxg6IKMvvucL1LIDF5">
<div class="form-group">
<label for="Title">Title:</label>
<input autocomplete="off" type="text" class="form-control" name="title" required="">
</div>
<div class="row">
<div class="form-group col-md-6">
<strong> Start Date : </strong>
<input class="date form-control" autocomplete="off" type="text" id="startdate" name="startdate" required="">
</div>
<div class="form-group col-md-6">
<strong> Start Time: </strong>
<input autocomplete="off" class="form-control" type="time" name="starttime" required="">
</div>
</div>
<div class="row" style="align-items:flex-end;">
<div class="form-group col-md-6">
<strong> Duration: </strong>
<select name="hours" class="form-control" required="">
<option value="0">0 hours</option>
<option value="1">1 hours</option>
<option value="2">2 hours</option>
</select>
</div>
<div class="form-group col-md-6">
<select name="minutes" class="form-control" required="">
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
<option value="15">15 minutes</option>
<option value="20">20 minutes</option>
</select>
</div>
</div>
<div class="form-group">
<strong> E-mail: </strong>
<input autocomplete="off" type="text" class="form-control" name="mail" required="">
</div>
<div class="form-group">
<strong> Mobile Numbers: </strong>
<input autocomplete="off" type="text" class="form-control" name="mobileno" required="">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" onclick="add_event(this)" class="btn btn-danger">Add Event</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card container">
<div class="card-header row align-items-baseline">
<div class="col-8">
<h5 class="card-title">
Meeting Scheduler
</h5>
</div>
<div class="col-4 d-flex flex-row-reverse">
<button type="button" onclick="add_event(this)" class="btn btn-danger">
Add Event
</button>
</div>
</div>
<div class="card-body">
<div id="calendar-qPSyHH6w" class="fc fc-ltr fc-unthemed"><div class="fc-toolbar"><div class="fc-left"><div class="fc-button-group"><button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left"><span class="fc-icon fc-icon-left-single-arrow"></span></button><button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right"><span class="fc-icon fc-icon-right-single-arrow"></span></button></div><button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right fc-state-disabled" disabled="disabled">today</button></div><div class="fc-right"><div class="fc-button-group"><button type="button" class="fc-month-button fc-button fc-state-default fc-corner-left fc-state-active">month</button><button type="button" class="fc-agendaWeek-button fc-button fc-state-default">week</button><button type="button" class="fc-agendaDay-button fc-button fc-state-default fc-corner-right">day</button></div></div><div class="fc-center"><h2>June 2021</h2></div><div class="fc-clear"></div></div><div class="fc-view-container" style=""><div class="fc-view fc-month-view fc-basic-view" style=""><table><thead><tr><td class="fc-widget-header"><div class="fc-row fc-widget-header"><table><thead><tr><th class="fc-day-header fc-widget-header fc-sun">Sun</th><th class="fc-day-header fc-widget-header fc-mon">Mon</th><th class="fc-day-header fc-widget-header fc-tue">Tue</th><th class="fc-day-header fc-widget-header fc-wed">Wed</th><th class="fc-day-header fc-widget-header fc-thu">Thu</th><th class="fc-day-header fc-widget-header fc-fri">Fri</th><th class="fc-day-header fc-widget-header fc-sat">Sat</th></tr></thead></table></div></td></tr></thead><tbody><tr><td class="fc-widget-content"><div class="fc-day-grid-container" style=""><div class="fc-day-grid"><div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 67px;"><div class="fc-bg"><table><tbody><tr><td class="fc-day fc-widget-content fc-sun fc-other-month fc-past" data-date="2021-05-30"></td><td class="fc-day fc-widget-content fc-mon fc-other-month fc-past" data-date="2021-05-31"></td><td class="fc-day fc-widget-content fc-tue fc-past" data-date="2021-06-01"></td><td class="fc-day fc-widget-content fc-wed fc-past" data-date="2021-06-02"></td><td class="fc-day fc-widget-content fc-thu fc-past" data-date="2021-06-03"></td><td class="fc-day fc-widget-content fc-fri fc-past" data-date="2021-06-04"></td><td class="fc-day fc-widget-content fc-sat fc-past" data-date="2021-06-05"></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-day-number fc-sun fc-other-month fc-past" data-date="2021-05-30">30</td><td class="fc-day-number fc-mon fc-other-month fc-past" data-date="2021-05-31">31</td><td class="fc-day-number fc-tue fc-past" data-date="2021-06-01">1</td><td class="fc-day-number fc-wed fc-past" data-date="2021-06-02">2</td><td class="fc-day-number fc-thu fc-past" data-date="2021-06-03">3</td><td class="fc-day-number fc-fri fc-past" data-date="2021-06-04">4</td><td class="fc-day-number fc-sat fc-past" data-date="2021-06-05">5</td></tr></thead><tbody><tr><td rowspan="3"></td><td rowspan="3"></td><td rowspan="3"></td><td class="fc-event-container fc-limited"><a class="fc-day-grid-event fc-event fc-start fc-end" style="background-color:#f05050;border-color:#f05050"><div class="fc-content"><span class="fc-time">6:22p</span> <span class="fc-title">Event 3</span></div></a></td><td class="fc-more-cell" rowspan="1"><div><a class="fc-more">+3 more</a></div></td><td rowspan="3"></td><td rowspan="3"></td><td rowspan="3"></td></tr><tr class="fc-limited"><td class="fc-event-container"><a class="fc-day-grid-event fc-event fc-start fc-end" style="background-color:#f05050;border-color:#f05050"><div class="fc-content"><span class="fc-time">7p</span> <span class="fc-title">Event 4</span></div></a></td></tr><tr class="fc-limited"><td class="fc-event-container"><a class="fc-day-grid-event fc-event fc-start fc-end" style="background-color:#f05050;border-color:#f05050"><div class="fc-content"><span class="fc-time">7:30p</span> <span class="fc-title">Event 2</span></div></a></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 67px;"><div class="fc-bg"><table><tbody><tr><td class="fc-day fc-widget-content fc-sun fc-past" data-date="2021-06-06"></td><td class="fc-day fc-widget-content fc-mon fc-past" data-date="2021-06-07"></td><td class="fc-day fc-widget-content fc-tue fc-past" data-date="2021-06-08"></td><td class="fc-day fc-widget-content fc-wed fc-past" data-date="2021-06-09"></td><td class="fc-day fc-widget-content fc-thu fc-past" data-date="2021-06-10"></td><td class="fc-day fc-widget-content fc-fri fc-today fc-state-highlight" data-date="2021-06-11"></td><td class="fc-day fc-widget-content fc-sat fc-future" data-date="2021-06-12"></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-day-number fc-sun fc-past" data-date="2021-06-06">6</td><td class="fc-day-number fc-mon fc-past" data-date="2021-06-07">7</td><td class="fc-day-number fc-tue fc-past" data-date="2021-06-08">8</td><td class="fc-day-number fc-wed fc-past" data-date="2021-06-09">9</td><td class="fc-day-number fc-thu fc-past" data-date="2021-06-10">10</td><td class="fc-day-number fc-fri fc-today fc-state-highlight" data-date="2021-06-11">11</td><td class="fc-day-number fc-sat fc-future" data-date="2021-06-12">12</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 67px;"><div class="fc-bg"><table><tbody><tr><td class="fc-day fc-widget-content fc-sun fc-future" data-date="2021-06-13"></td><td class="fc-day fc-widget-content fc-mon fc-future" data-date="2021-06-14"></td><td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-06-15"></td><td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-06-16"></td><td class="fc-day fc-widget-content fc-thu fc-future" data-date="2021-06-17"></td><td class="fc-day fc-widget-content fc-fri fc-future" data-date="2021-06-18"></td><td class="fc-day fc-widget-content fc-sat fc-future" data-date="2021-06-19"></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-day-number fc-sun fc-future" data-date="2021-06-13">13</td><td class="fc-day-number fc-mon fc-future" data-date="2021-06-14">14</td><td class="fc-day-number fc-tue fc-future" data-date="2021-06-15">15</td><td class="fc-day-number fc-wed fc-future" data-date="2021-06-16">16</td><td class="fc-day-number fc-thu fc-future" data-date="2021-06-17">17</td><td class="fc-day-number fc-fri fc-future" data-date="2021-06-18">18</td><td class="fc-day-number fc-sat fc-future" data-date="2021-06-19">19</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 67px;"><div class="fc-bg"><table><tbody><tr><td class="fc-day fc-widget-content fc-sun fc-future" data-date="2021-06-20"></td><td class="fc-day fc-widget-content fc-mon fc-future" data-date="2021-06-21"></td><td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-06-22"></td><td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-06-23"></td><td class="fc-day fc-widget-content fc-thu fc-future" data-date="2021-06-24"></td><td class="fc-day fc-widget-content fc-fri fc-future" data-date="2021-06-25"></td><td class="fc-day fc-widget-content fc-sat fc-future" data-date="2021-06-26"></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-day-number fc-sun fc-future" data-date="2021-06-20">20</td><td class="fc-day-number fc-mon fc-future" data-date="2021-06-21">21</td><td class="fc-day-number fc-tue fc-future" data-date="2021-06-22">22</td><td class="fc-day-number fc-wed fc-future" data-date="2021-06-23">23</td><td class="fc-day-number fc-thu fc-future" data-date="2021-06-24">24</td><td class="fc-day-number fc-fri fc-future" data-date="2021-06-25">25</td><td class="fc-day-number fc-sat fc-future" data-date="2021-06-26">26</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 67px;"><div class="fc-bg"><table><tbody><tr><td class="fc-day fc-widget-content fc-sun fc-future" data-date="2021-06-27"></td><td class="fc-day fc-widget-content fc-mon fc-future" data-date="2021-06-28"></td><td class="fc-day fc-widget-content fc-tue fc-future" data-date="2021-06-29"></td><td class="fc-day fc-widget-content fc-wed fc-future" data-date="2021-06-30"></td><td class="fc-day fc-widget-content fc-thu fc-other-month fc-future" data-date="2021-07-01"></td><td class="fc-day fc-widget-content fc-fri fc-other-month fc-future" data-date="2021-07-02"></td><td class="fc-day fc-widget-content fc-sat fc-other-month fc-future" data-date="2021-07-03"></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-day-number fc-sun fc-future" data-date="2021-06-27">27</td><td class="fc-day-number fc-mon fc-future" data-date="2021-06-28">28</td><td class="fc-day-number fc-tue fc-future" data-date="2021-06-29">29</td><td class="fc-day-number fc-wed fc-future" data-date="2021-06-30">30</td><td class="fc-day-number fc-thu fc-other-month fc-future" data-date="2021-07-01">1</td><td class="fc-day-number fc-fri fc-other-month fc-future" data-date="2021-07-02">2</td><td class="fc-day-number fc-sat fc-other-month fc-future" data-date="2021-07-03">3</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div><div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 70px;"><div class="fc-bg"><table><tbody><tr><td class="fc-day fc-widget-content fc-sun fc-other-month fc-future" data-date="2021-07-04"></td><td class="fc-day fc-widget-content fc-mon fc-other-month fc-future" data-date="2021-07-05"></td><td class="fc-day fc-widget-content fc-tue fc-other-month fc-future" data-date="2021-07-06"></td><td class="fc-day fc-widget-content fc-wed fc-other-month fc-future" data-date="2021-07-07"></td><td class="fc-day fc-widget-content fc-thu fc-other-month fc-future" data-date="2021-07-08"></td><td class="fc-day fc-widget-content fc-fri fc-other-month fc-future" data-date="2021-07-09"></td><td class="fc-day fc-widget-content fc-sat fc-other-month fc-future" data-date="2021-07-10"></td></tr></tbody></table></div><div class="fc-content-skeleton"><table><thead><tr><td class="fc-day-number fc-sun fc-other-month fc-future" data-date="2021-07-04">4</td><td class="fc-day-number fc-mon fc-other-month fc-future" data-date="2021-07-05">5</td><td class="fc-day-number fc-tue fc-other-month fc-future" data-date="2021-07-06">6</td><td class="fc-day-number fc-wed fc-other-month fc-future" data-date="2021-07-07">7</td><td class="fc-day-number fc-thu fc-other-month fc-future" data-date="2021-07-08">8</td><td class="fc-day-number fc-fri fc-other-month fc-future" data-date="2021-07-09">9</td><td class="fc-day-number fc-sat fc-other-month fc-future" data-date="2021-07-10">10</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div></div></div></td></tr></tbody></table></div></div></div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<script>
$(document).ready(function(){
$('#calendar-qPSyHH6w').fullCalendar({"header":{"left":"prev,next today","center":"title","right":"month,agendaWeek,agendaDay"},"eventLimit":true,"events":[{"id":1,"title":"Event 2","allDay":false,"start":"2021-06-02T19:30:00+00:00","end":"2021-06-02T20:30:00+00:00","color":"#f05050"},{"id":6,"title":"Event 3","allDay":false,"start":"2021-06-02T18:22:00+00:00","end":"2021-06-02T18:27:00+00:00","color":"#f05050"},{"id":7,"title":"Event 4","allDay":false,"start":"2021-06-02T19:00:00+00:00","end":"2021-06-02T19:20:00+00:00","color":"#f05050"}]});
});
</script>
<script type="text/javascript">
$('#startdate').datepicker({
autoclose: true,
format: 'yyyy-mm-dd'
});
$('#enddate').datepicker({
autoclose: true,
format: 'yyyy-mm-dd'
});
function show_event_modal(){
$('#add_event_modal').modal({
backdrop: 'static',
keyboard: false
});
}
function add_event(button){
var event = {
allDay: false,
color: "#f05050",
end: "2021-06-12T19:28:00+00:00",
id: 11,
start: "2021-06-12T19:23:00+00:00",
title: "dummy"};
console.log(event);
$('#calendar').fullCalendar('renderEvent', event);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
</body></html>解决方案
推荐阅读
- rfid - hf14b raw 命令是否允许我发送和接收 APDU 消息？
- python - Python 线程不能同时工作
- php - Do-While 循环未按要求停止
- jquery - 使用 .htaccess 文件删除 .php 扩展名后下拉菜单不起作用
- postgresql - 尽管 LC_Messages 设置为 en_GB.UTF-8，但 Postgres 消息仍为中文
- java - 在数组中查找等于并添加附加信息
- javascript - 按下时返回“false”，按下时返回“true”
- java - IntelliJ IDEA 中 Grails 项目的 Gradle 同步失败
- linux - 404 路由问题 - AWS Linux / Wordpress 站点
- c# - 如何在 Linq selectmany 语句中使用方法？