Editing events in Fullcalendar with modal Bootstrap

Question

I'm trying to edit objects with a modal Bootstrap. I've got that if you click over an event in Fullcalendar a form comes up with the info of that event (level,day,period) so I can edit the level and the day of that event(object). The problem is that when I click in the bottom save a new object is created instead of editing that event. Can't I get the params of the event clicked and change them??

This is my javascript where I set the eventClick function.

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)

};

This is the code of my controller

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

This is the code of the view

<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>

This is the form

<% 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

You need to make the event global. Create a global variable

var evnt

Then within the fullcalendar click event give that variable the value of the event object.

eventClick: function (calEvent, jsEvent, view) {//click en un evento
        evnt = calEvent;
//more actions
}

Then you have the event available for update in your modal or other function

function event_update(){
evnt.title = 'new title';
$('#calendar').fullCalendar('updateEvent', evnt);
}

Answer 2

I think you pretty much nailed it, you just needed to update the event object stored in the global y variable before calling updateEvent:

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)

};

Answer 3

Your original event object has all the data inherent to your fullcalendar event. So you need to first get a hold of that object, then assign new values to the attributes you might want to change, and finally call the calendar with a with the "updateEvent" instruction.

The "updateEvent" reports changes to an event and renders them on the calendar.

.fullCalendar( 'updateEvent', event )

event must be the original Event Object for an event, not merely a reconstructed object. The original Event Object can obtained by callbacks such as eventClick, or by the clientEvents function.

Here is how you might update an event after a click:

$('#calendar').fullCalendar({
    eventClick: function(event, element) {

        event.title = "CLICKED!";

        $('#calendar').fullCalendar('updateEvent', event);

    }
});

Source: documentation

Answer 4

In your eventClick you have access to the calEvent object. You need to update this object to see it properly reflected in the calendar. Check out more of the event data methods in the fullCalendar docs