Fullcalendar constraint option not working

Question

I'm using Fullcalendar for a rails application, and I have been trying to figure out how to use the constraint option to limit where events can be moved or created. I have one Event Source (JSON) that I assign with the constraint id ("available") once each event is rendered, and I added the constraint option to the event source I want constrained. When I try to create or move an event in the constrained area, it won't let me. I've used eventClick to verify that the background event does have the expected id for the constraint.

Appointment.js

$(document).ready(function(){

var title = $('#type').val();
var maker = $('#maker').val();

if (maker == 'seller'){ 
   var sconstraint = "";
   var source = [{ url: '/appointments?appt_type=' + title + '&maker=' + maker, className: 'deletable' }]

} else if (maker == 'buyer') {
   var sconstraint = 'available';
   var source = 
   [{
       url: '/appointments?appt_type=' + title + '&maker=owner',
       editable: false,
       overlap: true,
       rendering: 'background',
       className: 'available'
   },
   {
       url: '/appointments?appt_type=' + title + '&maker=buyer',
       overlap: true,
       editable: true,
       color: 'blue',
       className: "deletable",
       constraint: 'available'
   },
   {
       url: '/appointments?appt_type=' + title + '&maker=others',
       editable: false,
       overlap: false,
       color: 'red'
   }]
}

var calendar = $('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  minTime: "8:00:00",
  maxTime: "20:00:00",
  selectable: true,
  selectHelper: true,
  unselectAuto: false,
  selectOverlap: true,
  allDaySlot: false,
  editable: true,
  selectConstraint: sconstraint,
  eventSources: source,
  select: function(start, end, allDay) {

    $.ajax({
        type: "POST",
        url: "/appointments",
        data: { appointment: { appt_type: title, start_time: start.format(), end_time: end.format(), maker: maker } },
        success: function(data){
            $("#calendar").fullCalendar('renderEvent',
            {
                title: title,
                start: start,
                end: end,
                id: data.id,
                className: 'deletable',
                constraint: 'available',
                color: 'blue'

            }, false );
            calendar.fullCalendar('unselect'); },
        error: function(xhr){
            var errors = $.parseJSON(xhr.responseText).errors;
        } 
    }); 
  },
    eventResize: function(event){
        $.ajax({
            type: "PATCH",
            url: "/appointments/"+event.id,
            data: { appointment: { end_time: event.end.format()} },
            success: function(data){
            },
            error: function(xhr){
                var errors = $.parseJSON(xhr.responseText).errors;
            } 
        });       
    },
    eventDrop: function(event){
        $.ajax({
            type: "PATCH",
            url: "/appointments/"+event.id,
            data: { appointment: { start_time: event.start.format(), end_time: event.end.format()} },
            success: function(data){
            },
            error: function(xhr){
                var errors = $.parseJSON(xhr.responseText).errors;
            } 
        });       
    },
    eventRender: function(event, element) {
        if(element.hasClass('available')){
          event.id = 'available';
        }
        if (element.hasClass('deletable')) {
          element.find('.fc-time').append("<span class='closeon pull-right'>X</span>"); 
        }
        element.find(".closeon").click(function() {
            $.ajax({
                type: "DELETE",
                url: "/appointments/"+event.id,
                data: { appointment: { appt_type: event.title, start_time: event.start.format(), end_time: event.end.format()} },
                success: function(data){
                },
                error: function(xhr){
                    var errors = $.parseJSON(xhr.responseText).errors;
                } 
            });
           $('#calendar').fullCalendar('removeEvents', event.id);
        });
    },
    eventClick: function(event) {
      console.log(event.id);
    }


});


});

Answer 1

Turns out I had to use the eventDataTransform option to convert the incoming id from the event source to the id of the constraint.