eventRender not allowed to render overlapping or outside businessHours

Question

I'm working on a calendar which is currenly located at http://klanten.jebble.nl/nodots/fleskens/agenda.html

I've hooked an eventRender to the dayClick function which renders an event that is 1.5 hours and is draggable only on free timeslots and within businessHours.

HOWEVER if you click outside businessHours of on another event it DOES overlap where it should not.

Hopefully someone can tell me what parameter or function to use so that when I click outside business hours or overlapping a current event it wont render or will automatically render at a free timeslot.

$(document).ready(function() {
        $('#calendar').fullCalendar({
            /* Text and data config */
            lang: 'nl',
            defaultView: 'agendaWeek',
            titleFormat: 'MMMM',
            columnFormat: 'dd D',
            header: {
                left:   'prev',
                center: 'title',
                right:  'next'
            },
            buttonText: {
                prev: 'vorige week',
                next: 'volgende week'
            },

            /* Available hours and date stuff */
            weekends: false,
            businessHours: {
                start: '09:00', /* API Data */
                end: '18:00', /* API Data*/
                dow: [1,2] /* API Data */
            },
            eventConstraint: {
                start: '09:00', /* API Data */
                end: '18:00', /* API Data*/
                dow: [1,2] /* API Data */
            },
            minTime: '09:00',
            maxTime: '18:00',
            allDaySlot: false,
            monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],

            /* Styling */
            eventBackgroundColor: '#dff0f7',
            eventBorderColor: '#dff0f7',
            eventTextColor: '#35a0da',
            contentHeight: 'auto',
            eventOverlap: false,
            slotEventOverlap: false,
            selectOverlap: false,

            /*View Render (disable past weeks) */
            viewRender: function(currentView) {
                var minDate = moment()
                // Past
                if (minDate >= currentView.start && minDate <= currentView.end) {
                    $(".fc-prev-button").prop('disabled', true); 
                    $(".fc-prev-button").addClass('fc-state-disabled'); 
                }
                else {
                    $(".fc-prev-button").removeClass('fc-state-disabled'); 
                    $(".fc-prev-button").prop('disabled', false); 
                }
            },

            dayClick: function(date, jsEvent, view) {
                start = date.format();
                start = moment(start);

                var tmp = moment(start);

                var end = tmp.add(1.5, 'hours');

                $('#calendar').fullCalendar('removeEvents', 1)

                var newEvent = {
                    id: 1,
                    title: 'Ketelonderhoud',
                    start: start,
                    end: end,
                    backgroundColor: '#7db927',
                    borderColor: '#7db927',
                    textColor: '#fff',
                    editable: true,
                    durationEditable: false,
                };
                $('#calendar').fullCalendar('renderEvent', newEvent);
            },

            events: [
                {
                    id: 10,
                    title: 'bezet',
                    start: '2015-04-14T13:00:00',
                    end: '2015-04-14T14:30:00',
                }
            ]
        });

DanielST · Accepted Answer · 2015-04-16T19:25:36.910

2

You shouldn't be using dayClick. There is a built in option for creating events called selectable.

Then you can use the selectOverlap callback to limit the selection. And the select callback is called after the selection is made. If you need it to be a fixed amount of time, play with the end date before adding it as an event. Example JSFiddle.

Otherwise, you need to check it manually.

If you do so, the eventsArray loop in your project needs to change. The line:

if (end.valueOf() > evStart && end.valueOf() < evEnd){

doesn't do what you want it to.

Fullcalendar uses momentjs for it's dates. The < and > operators don't work. Use isBefore() and isAfter(). Something like:

if (end.isAfter(evStart) && end.isBefore(evEnd)){

edited Apr 16 '15 at 19:25

answered Apr 16 '15 at 14:21

DanielST

13,783
7
42
65

Is it possible with selectable to render an event with a fixed timespan (1.5 hours) no matter the selected area? – Jebble Apr 16 '15 at 18:54
@Jebble sure. It'd be weird form a UX standpoint since you normally expect a selection to give you the amount of time you selected... but it can be done. I'll add it. – DanielST Apr 16 '15 at 18:56
It'll be used to plan a date and time for a maintenance guy to come to your house and those appointments have a fixed duration which is why. Thank's for your help! – Jebble Apr 16 '15 at 19:00
Thanks Slicedtoad, that makes sense. Could you add an example of how to selected a fixed timespan? – BlueCola Apr 16 '15 at 19:18
@Jebble Set the sticky parameter for `renderEvent` to true if you want it to persist when you change the view. – DanielST Apr 19 '15 at 03:10

Mario Levrero · Answer 2 · 2015-04-15T14:16:53.400

1

As you are creating it manually from dayClick callback, you need to check the event you are creating.

In order to know if it's overlapping other events you can check Is there a way to prevent overlapping events in jQuery FullCalendar?

edited Apr 15 '15 at 14:16

answered Apr 15 '15 at 14:05

Mario Levrero

3,345
4
26
57

This didn't change anything to the behaviour. Also the visitor can't select anything. They can only click on the calendar after which eventRender is called with the date object which i use to create a start and end time. – Jebble Apr 15 '15 at 14:17
@Jebble I misunderstood your question, so I've updated the answer. – Mario Levrero Apr 15 '15 at 14:25
I've updated my code and put some statements in the code. I alert the canRender var to see if the start or end date of the new event are within an existing event but for some reason it always gives true. Could you take a look at the code at http://klanten.jebble.nl/nodots/fleskens/agenda.html? – Jebble Apr 15 '15 at 15:08
I'm trying to achieve the same thing as @Jebble is, but I'm having the same issue as Jebble (comment above mine). – BlueCola Apr 16 '15 at 10:24

eventRender not allowed to render overlapping or outside businessHours

2 Answers2