फुल कैलेंडर घटनाओं को व्यवसाय के घंटों के बाहर छोड़ दिया

Question

मैं फुल कैलेंडर प्लगइन का उपयोग कर रहा हूं और इसे बनाने की कोशिश कर रहा हूं ताकि आप किसी नए ईवेंट को छोड़ सकें जब इसे व्यवसाय के घंटों के बाहर की किसी चीज में खींचा जा सके। मेरे पास यह है कि आप वर्तमान तिथि से पहले किसी भी तारीख में खींच नहीं सकते हैं, लेकिन यह पता नहीं लगा सकते कि सप्ताहांत को कैसे खींचा जा सकता है।

मुझे हार्ड कोडेड समाधान नहीं चाहिए जहां मुझे विशेष रूप से सप्ताहांत के लिए बयान के मुकाबले ऐसा करना है क्योंकि यदि मैं व्यवसाय के घंटों को बुधवार को एक विशिष्ट सप्ताह में जोड़ना चाहता हूं और केवल 1 बजे से शाम 4 बजे के बीच अनुमति देता हूं? तो मुझे एक गतिशील समाधान की आवश्यकता है जो मैं कुछ JSON को घटनाओं की तरह पास कर सकता हूं: हैंडल और व्यवसाय भी हो सकता है।

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

एक समस्या आप कर रहे हैं रहा है क्योंकि प्रारंभ घटनाओं अवधि नहीं है - तो FullCalendar अगर घटनाओं की कमी और businessHours ओवरलैप नहीं जानता है जब गिरा दिया। बस स्टार्ट/एंड सेट करना इसे हल कर सकता है।

$(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 प्रारंभकर्ता में सेट defaultTimedEventDuration:'01:00:00', (ईवेंट की डिफ़ॉल्ट अवधि 2 घंटे है) - डोमेन आवेदन करने के लिए लागू होता है के अनुसार यह मान सेट।

अलग-अलग दिनों में अलग-अलग समय होने के बारे में; BusinessHours एक सरणी हो सकता है -। (जो एक समारोह लौटने jsonarray से आ सकता है (के बाद से jsonArrays पूरी तरह से योग्य js कर रहे हैं) को देखने के 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/ देखें)