我正在尝试使用模式引导程序编辑对象。我知道，如果您单击Fullcalendar中的事件，则会出现一个表单，其中包含该事件的信息（级别，日期，期间），因此我可以编辑该事件的级别和日期（对象）。问题是，当我单击底部保存时，会创建一个新对象，而不是编辑该事件。我不能点击事件的参数并更改它们吗？
这是我的javascript，我在其中设置了eventClick函数。
var y = "y";
function drawControl(controls) {
$('#calendar').fullCalendar({
editable: true,
aspectRatio: 1,
contentHeight: 500,
scrollTime: '24:00:00',
minTime: '01:00:00',
maxTime: '24:00:00',
defaultView: 'agendaWeek',
header:{left:"prev,next,today",
center:"title",
right:"month, agendaWeek, agendaDay"},
events: allControls(controls),
eventRender: function(event, element) {
var bloodLevel=event.title
if(bloodLevel >= 180) {
element.css('background-color', 'red');
}
else if(bloodLevel < 70) {
element.css('background-color', 'yellow');
}
},
eventClick: function(calEvent, jsEvent, view) {
x=calEvent.id;
$('#modalTitle').html(calEvent.title);
$('#control_day_edit').val(calEvent.start);
$('#control_level').val(calEvent.title.toString());
console.log(calEvent.title)
console.log(calEvent.start._i)
console.log(calEvent.id)
$('#eventUrl').attr('href',"/users/:user_id/controls/calEvent.id/edit");
$('#fullCalModal').modal();
y=calEvent;
}
})
}
}）;
document.getElementById('button_edit').addEventListener("click", editControl);
function editControl(event) {
event.preventDefault();
console.log(x);
var controlEdited = {
"level": document.getElementById('control_level').value,
"day": document.getElementById('control_day_edit').value,
"period": document.getElementById('control_period').value,
"id": x
}
$('#calendar').fullCalendar('updateEvent', y);
$.post("/editControls", JSON.stringify(controlEdited));
console.log(controlEdited)
};
这是我的控制器的代码
def editControls
if request.xhr?
@control = JSON.parse!(request.body.read.to_s)
Control.where(id: @control["id"])[0].update_attributes(level: @control["level"], day: @control["day"], period: @control["period"])
render json: "ok"
else
return error
end
end
这是视图的代码
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body">
<%= render 'form_edit' %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
</div>
</div>
</div>
这是形式
<% modal ||= false %>
<% remote = modal ? true : false %>
<div class="">
<%= form_for [@user, @control],remote: remote, html: {role: :form, 'data-model' => 'control'} do |f| %>
<p class="new_control_text">Edit Control</p>
<div class="form-group">
<div class="input-group">
<%= f.label :level, class: "sr-only"%>
<%= f.number_field :level, class: "form-control", placeholder: "Enter level" %>
</div>
</div>
<div class="form-group container">
<div class="row datetimeselect">
<div class='col-sm-12'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<%= f.text_field :day, default: @control_day, :class => 'form-control', id: "control_day_edit" %>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="select_period">
<%= f.select :period, options_for_select([['pre-breakfast'], ['post-breakfast'],['pre-lunch'],['post-lunch'],['afternoon'],['pre-dinner'],['post-dinner']]), {}, class: "form-control" %>
</div>
<a href="#" id="button_edit" class="btn btn-default btn-lg" role="button">
Save
</a>
<% end %>
</div>
在eventClick中，您可以访问calEvent对象。您需要更新此对象才能看到它正确反映在日历中。在完整的日历文档中查看更多事件数据方法
您的原始event object包含fullcalendar事件固有的所有数据。因此，您需要首先掌握该对象，然后将新值分配给您可能想要更改的属性，最后使用 "updateEvent" 指令调用日历。
"updateEvent"报告对事件的更改，并将其呈现在日历上。
.fullCalendar( 'updateEvent', event )
事件必须是事件的原始Event Object，而不仅仅是重建的对象。原始Event Object可以通过回调（如 eventClick ）或 clientEvents 函数获得。
点击后更新事件的方法：
$('#calendar').fullCalendar({
eventClick: function(event, element) {
event.title = "CLICKED!";
$('#calendar').fullCalendar('updateEvent', event);
}
});
资料来源：文献
您需要使事件全局化。创建全局变量
var evnt
然后在完整日历单击事件中为该变量指定事件对象的值。
eventClick: function (calEvent, jsEvent, view) {//click en un evento
evnt = calEvent;
//more actions
}
然后，您可以在模态或其他函数中更新事件
function event_update(){
evnt.title = 'new title';
$('#calendar').fullCalendar('updateEvent', evnt);
}
我认为你几乎搞定了，你只需要在调用 updateEvent 之前更新存储在全局 y 变量中的事件对象：
document.getElementById('button_edit').addEventListener("click", editControl);
function editControl(event) {
event.preventDefault();
console.log(x);
var controlEdited = {
"level": document.getElementById('control_level').value,
"day": document.getElementById('control_day_edit').value,
"period": document.getElementById('control_period').value,
"id": x
}
y.start = document.getElementById('control_day_edit').value;
y.title = document.getElementById('control_level').value;
$('#calendar').fullCalendar('updateEvent', y);
$.post("/editControls", JSON.stringify(controlEdited));
console.log(controlEdited)
};