FullCalendarは営業時間外にイベントを削除しないようにします

Question

私はFullCalendarプラグインを使用しており、営業時間外にドラッグされたときに新しいイベントをドロップできないようにしています。私はそれを持っているので、現在の日付の前の任意の日付にドラッグすることはできませんが、週末がどのようにドラッグされるのかを理解できません。

営業時間を追加する場合は、特定の週に水曜日と午後1時から4時の間のみ許可すると何かが発生するため、if than文を週末専用にする必要があります。ですから、イベントのようにいくつかのJSONを渡すことができる動的ソリューションが必要です：ハンドルとビジネスHoursも同様に処理できます。そのイベントは制約が重複する場合fullcalendarは知らないとbusinessHours - ここ

$(document).ready(function() { 
    /* initialize the external events 
    -----------------------------------------------------------------*/ 
    $('#external-events .fc-event').each(function() { 
     // store data so the calendar knows to render an event upon drop 
     $(this).data('event', { 
      title: $.trim($(this).text()), // use the element's text as the event title 
      stick: true // maintain when user navigates (see docs on the renderEvent method) 
     }); 
     // make the event draggable using jQuery UI 
     $(this).draggable({ 
      zIndex: 999, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0 // original position after the drag 
     }); 
    }); 
    /* initialize the calendar 
    -----------------------------------------------------------------*/ 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     droppable: true, // this allows things to be dropped onto the calendar 
     drop: function() { 
      // is the "remove after drop" checkbox checked? 
      if ($('#drop-remove').is(':checked')) { 
       // if so, remove the element from the "Draggable Events" list 
       $(this).remove(); 
      } 
     }, 
     /* This constrains it to today or later */ 
     eventConstraint: { 
      start: moment().format('YYYY-MM-DD'), 
      end: '2100-01-01' // hard coded must have 
     }, 
     businessHours: { 
      start: moment().format('HH:mm'), /* Current Hour/Minute 24H format */ 
      end: '17:00' // 5pm 
     } 
    }); 
}); 

は初期化されたイベントは期間を持っていないので、あなたが持っているhttp://jsfiddle.net/htexjtg6/

Answer 1

一つの問題がある私の現在の例のフィドルです落としたときに。単に開始/終了を設定することでそれを解決できます。

$(this).data('event', { 
    title: $.trim($(this).text()), // use the element's text as the event title 
    stick: true, // maintain when user navigates (see docs on the renderEvent method) 
    start: moment(), 
    end: moment(), 
}); 

ボーナス：fullcalendar初期には（イベントのデフォルトの継続時間が2時間である）defaultTimedEventDuration:'01:00:00',セット - アプリケーションが適用されるドメインに応じてこの値を設定します。

異なる日に異なる時刻を持つことについて。 BusinessHoursは配列にすることができます - （jsonArraysは、完全修飾のjsあるので、jsonarrayを返す関数（から来る可能性がある）https://fullcalendar.io/docs/display/businessHours/

businessHours: [ 
    { 
     dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday 
     start: '08:00', // 8am 
     end: '18:00' // 6pm 
    }, 
    { 
     dow: [ 4, 5 ], // Thursday, Friday 
     start: '10:00', // 10am 
     end: '16:00' // 4pm 
    } 
], 
eventConstraint:"businessHours", 

）が働いてbusinessHoursで（あなたのコードのフォークのため

をこのフィドル http://jsfiddle.net/htexjtg6/11/を参照してください参照してください。