2015-10-07 50 views
1

在我fullcalendar http://fullcalendar.io/ 我想阻止用戶能夠創建多天Fullcalendar,防止用戶從選擇多天的活動

$('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    lang:   "fr", 
    header:  false, 
    timezone:  'local', 
    minTime:  "08:00:00", 
    columnFormat: 'dddd', 
    selectHelper: true, 
    selectable: true, 
    select: function(start, end, id, allDay) { 
     var eventData = { 
     start: start, 
     end: end, 
     id: 1, 
     block: true, 
     editable: true, 
     backgroundColor: "#469278" 
     }; 

     // console.log(moment(eventData.start["_d"]).format("dddd")); 
     // console.log(moment(eventData.end["_d"]).format("dddd")); 


     $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 

     // console.log(eventData); 
     if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) { 
     $('#calendar').fullCalendar('unselect'); 
     }; 
     var day   = moment(eventData.start["_d"]).format("dddd"); 
     var start_time = moment(eventData.start["_d"]).format("HH:mm"); 
     var end_time = moment(eventData.end["_d"]).format("HH:mm"); 
     var id   = moment(eventData.end["_id"]); 

     var slot  = { 
     day: day, 
     start_time: start_time, 
     end_time: end_time 
     }; 
     array_dispo.push(slot); 

     $("#dispo_array").val(JSON.stringify(array_dispo)); 
     $('#calendar').fullCalendar('unselect'); 
    }, 
    }); 
}); 

事件當用戶選擇這是一個開始日期從他的活動結束日期不同的我因此嘗試使用非選擇方法從文檔http://fullcalendar.io/docs/selection/unselect_method/這樣的:

if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) { 
      $('#calendar').fullCalendar('unselect'); 
      }; 

但不幸的是這個代碼犯規將自動取消當前的選擇...

回答

6

您可以在您的select方法中進行檢查,然後決定是否要render該事件。

我也用Moment.js來計算日期和持續時間,這個庫包含FullCalendar(http://fullcalendar.io/docs/utilities/Moment/

所以我發揮各地與此想出了:

select: function (start, end) { 
    var mEnd = $.fullCalendar.moment(end); 
    var mStart = $.fullCalendar.moment(start); 

    if (mEnd.isAfter(mStart, 'day')) { 
     $('#calendar').fullCalendar('unselect'); 
    } else { 
     $('#calendar').fullCalendar('renderEvent', { 
      start: mStart, 
      end: mEnd, 
      allDay: false 
     }, 
     true // stick the event 
     ); 
     $('#calendar').fullCalendar('unselect'); 
    } 
} 

這裏是如果你的jsfiddle希望看到它的行動:here