全日历约束选项不起作用

Question

我正在将 Fullcalendar 用于 rails 应用程序，并且我一直在尝试弄清楚如何使用约束选项来限制可以移动或创建事件的位置。我有一个事件源 (JSON)，我在呈现每个事件后分配了约束 ID ("available")，并且我将约束选项添加到我想要约束的事件源。当我尝试在受限区域中创建或移动事件时，它不允许我这样做。我已经使用 eventClick 来验证后台事件确实具有约束的预期 ID。

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

原来我必须使用 eventDataTransform 选项将传入的 id 从事件源转换为约束的 id。

全日历约束选项不起作用

Fullcalendar constraint option not working

jquery

fullcalendar