Question

我尝试使用模态Bootstrap编辑对象。我知道如果你点击Fullcalendar中的一个事件，表格会提供该事件的信息（级别，日期，期间），这样我就可以编辑该事件的级别和日期（对象）。问题是当我点击底部保存时，会创建一个新对象而不是编辑该事件。我不能点击事件的参数并更改它们吗？

这是我设置eventClick函数的javascript。

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>

Answer 1

在您的eventClick中，您可以访问calEvent个对象。您需要update此对象才能在日历中正确反映它。查看fullCalendar docs

中的更多事件数据方法

Answer 2

您的原始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);

    }
});

来源：documentation

Answer 3

我认为你几乎已经把它钉了，你只需要在调用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)

};

使用模态Bootstrap在Fullcalendar中编辑事件

3 个答案: