jQuery 更改输入元素时，使用自定义数据在 fullcalendar 中即时渲染事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19603956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
render an event in fullcalendar with custom data on the fly when changing the input element
提问by Saravana Kumar Subramaniam
I am trying to render a custom event on the fly to show on the fullcalendar on the page, i am getting the already existing events from the url $(.id).fullCalendar('addEventSource', 'the file name where the json is rendered');
我正在尝试动态呈现自定义事件以显示在页面上的完整日历上，我正在从 url $(.id).fullCalendar('addEventSource', 'json 所在的文件名获取已经存在的事件呈现');
but i dont have any clue on how to get the new event rendered
但我对如何呈现新事件一无所知
回答by MarCrazyness
Here is a quick example using the default.html from demos folder. I am assuming you create an event save it to the db and want the event(s) to render on the calendar. Refer to this part of the documentation:
这是一个使用 demos 文件夹中的 default.html 的快速示例。我假设您创建了一个事件并将其保存到数据库并希望事件在日历上呈现。参考文档的这一部分：
http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/http://arshaw.com/fullcalendar/docs/event_rendering/rerenderEvents/
http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/ http://arshaw.com/fullcalendar/docs/event_rendering/rerenderEvents/
This example uses renderEvent. On click of the button, an event is created and rendered on the calendar.
此示例使用 renderEvent。单击该按钮后，将创建一个事件并在日历上呈现。
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#button_id').click(function() {
var newEvent = {
title: 'NEW EVENT',
start: new Date(y, m, d)
};
$('#calendar').fullCalendar( 'renderEvent', newEvent , 'stick');
});
$('#calendar').fullCalendar({
editable: true
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<button type="button" id="button_id" onClick=>Create new event</button>
<div id='calendar'></div>
</body>
</html>
回答by Taulant
The accepted Answer is correct. If it does not work for someone, you may check the position of your code. the $('#calendar').fullCalendar( 'renderEvent', newEvent, 'stick');has to be after your initial .fullCalendar() call. I struggled half an hour to figure this out :)
接受的答案是正确的。如果它对某人不起作用，您可以检查代码的位置。的$('#calendar').fullCalendar( 'renderEvent', newEvent, 'stick');必须是你最初的.fullCalendar（）调用之后。我挣扎了半个小时才弄清楚:)
