In FullCalendar can I get behaviour similar to droppable without using dragging?

Question

Full Calendar has an option to allow dragging of external jQuery UI draggables onto the calendar. As you can see on this demo (most evident on the "week" view), as you drag an event over timeslots the relevant timeslots are highlighted depending on the duration of the event that will be created. The droppable events will also conform to any constraints that are specified for them. This means that when dragging over invalid timeslots they are not highlighted, and the drop will not be accepted.

Is it possible to get these features without actually using draggables? I would like to place a pre-specified event (title, duration) onto the calendar, with automatic constraint calculation and the visual feedback described above, but with simple mousover and click.

---

Tobclarify I want to click on a timeslot to create an event of a predetermined duration starting in the chosen timeslot. I only want the event to be created if it is within a set of constraints. I also want to visually communicate on mouseover which time range will be covered by an event if I click.

Answer 1

I have a solution that I consider very hacky. Please improve this answer.

Prerequisites

• FullCalendar,
• jQuery UI with draggable,
• this "simulations" testing utils plugin from jQuery

Approach

Every time a drag might be interrupted:

1. create an element with an associated event,
2. make it draggable,
3. simulate a mousedown event.

There is a working version at http://jsfiddle.net/u863kysr/2/

// My Predetermined Event
var potentialEvent = {
    duration: '1:30:00',
    title: 'Your Bookiing',
    constraint: 'businessHours',
};

// Create the FullCalendar
$cal = $('#cal').fullCalendar({
    defaultView: 'agendaWeek',
    businessHours: true,
    droppable: true,
    allDaySlot: false,
})

var $draggable = null;
// Mouseup definitely stops dragging.
$(document.body).on('mouseup', function () {
    if ($draggable) {
        $draggable.remove()
    }

    // Create a new element so that it's positioned at {clientX: 0, clientY: 0}.
    $draggable = $('<div></div>')
        .css('position', 'fixed')
        .css('top', 0)
        .css('left', 0)
        .insertBefore($cal);

    // Associate the event with the element in the way theat FullCalendar expects.
    $draggable
        .data('event', potentialEvent)
        .draggable();

    // After this event has finished, simulate a mousedown so that it acts like
    // it is being dragged.
    setTimeout(function () {
        $draggable.simulate('mousedown', {
            clientX: 0,
            clientY: 0
        });
    }, 0)
}).trigger('mouseup');

Limitations

It doesn't handle scrolling of the FullCalendar. The drop location becomes offset from the mouse by the amount scrolled.