fullcalendar.js trigger eventClick programmatically

Question

I am trying to find a way to trigger an eventClick on a particular event programmatically.

In my application, users drag & drop events onto the calendar and then would have to click on it to insert data on a pop-up form .

I would like to bring up that form automatically by triggering an eventClick. Anyone ?

Cheers

Here is my code :

var calendar = $('#calendar').fullCalendar({
         buttonText: {
            prev: '<i class="icon-chevron-left"></i>',
            next: '<i class="icon-chevron-right"></i>'
        },
        header: {
            left: 'prev,next today',
        },
        eventSources: [{
            // a bunch of event sources
        }],
        drop: function(date, allDay) { // this function is called when something is dropped

            // do some stuff to the event that has been dropped
            var event = ...; // I know how to get the event object from here

            **// TRIGGER 'eventClick' ON EVENT OBJECT DROPPED IN ORDER TO SHOW FORM**

        },
        eventClick: function(calEvent, jsEvent, view) {

            // Show the data entry form
        }

    });

There are several ways to trigger a click event, but it sounds like what you really want is to trigger an event handler, the handler that causes the form to open. — Kevin B, Jan 13 '14 at 23:07
See http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript perhaps? — Tim 333, Jan 13 '14 at 23:37
Maybe a fiddle or some code demonstrating what you have so far would help. Are you using jQuery ui? Please post a fiddle and or your code. — Trevor, Jan 13 '14 at 23:37

score 0 · Answer 1 · answered Jan 15 '14 at 10:01

You can use diferent Fullcalendar callbacks to achieve this, here

Particullary these:

eventDragStart (callback) Triggered when event dragging begins.

eventDragStop (callback) Triggered when event dragging stops.

eventDrop (callback) Triggered when dragging stops and the event has moved to a different day/time.

eventResizeStart (callback) Triggered when event resizing begins.

eventResizeStop (callback) Triggered when event resizing stops.

You can use them to get event properties like id and then use your form popup inside them.

Example:

Imagine you want to popup your form after the drop was made, you would use this

...
eventDragStop:function( event, jsEvent, ui, view ) { 
  alert("i have been dropped, now i´m going to load my form, and my ID is " + event.id);
}
...

Thanks for your answer. I'm aware of all these callback functions but what I'm trying to do is this : eventDrop:function( event, jsEvent, ui, view ) { // HOW DO I TRIGGER EVENTCLICK HERE ON THE SAME EVENT } — alexsaleh, Jan 23 '14 at 17:22

score 0 · Answer 2 · answered Nov 24 '14 at 09:04

0

I know it has been a while but lets keep this for people that google the same thing:

http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/

All is explained on that page so I think I don't need to elaborate further

answered Nov 24 '14 at 09:04

v0d1ch

2,738
1
22
27

Perfect. Now how to open that modal automatically/programmatically? – alexsaleh Nov 26 '14 at 16:24
you need to add the ID to the event that you need to call in the dom and that way you can call the dialog you want from code.Other option is to search for events by title so for example on this page (which is not good example because of a lot of the same titles) http://www.mikesmithdev.com/fullcalendar-jquery-ui-modal/ you can do this: $("body").find(".fc-title").each(function(){if ($(this).text() == "Staff Meeting") $(this).parent().parent().click();return false; }); – v0d1ch Nov 26 '14 at 19:12

fullcalendar.js trigger eventClick programmatically

2 Answers2