FullCalendar prevents events from falling out of working hours

Question

I use the FullCalendar plugin and try to make it so that you cannot drop a new event when it is being dragged to something outside of working hours. I have one so that you cannot drag to any date before the current date, but you cannot figure out how to prevent crawling on weekends.

I don’t need a hard-coded solution, where do I need to do if statements, and not on the weekend, because if I want to add working hours, say, Wednesday for a specific week and allow only from 13:00 to 16:00? Therefore, I need a dynamic solution that I could pass to some JSON, for example events: handle and businessHours can also handle.

$(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 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 } }); }); 

here is the script of my current example http://jsfiddle.net/htexjtg6/

Answer 1

one problem you are facing is that the initialized events have no duration, so fullcalendar does not know if the overlapping restrictions of events and businessHours overlap when deleting. Ease of installation / completion may solve this.

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

bonus : in the initializer set fullcalendar defaultTimedEventDuration:'01:00:00', (the duration of the default event is 2 hours) - set this value in accordance with the domain to which the application is applied.

About different times on different days; BusinessHours can be an array - (which can come from a function that returns jsonarray (since jsonArrays is fully consistent with js). See https://fullcalendar.io/docs/display/businessHours/ p>

 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", 

see this script http://jsfiddle.net/htexjtg6/11/ for the fork of your code (with a working day)