jQuery fullcalendar: contextmenu

Question

I want to use jQuery.contextMenu:

http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin

In jQuery.fullcalendar when I right-click on an

Answer 1

I used the Fullcalendar Loading callback: http://arshaw.com/fullcalendar/docs/event_data/loading/

loading: function (bool, view) { 

    if (bool){
        jQuery('#com_jc_msg_saving').fadeIn();
    } else {

        jQuery('#com_jc_msg_saving').fadeOut();

        jQuery.contextMenu({

            selector: '.fc-event',//note the selector this will apply context to all events 
            trigger: 'right',
            callback: function(key, options) {
                //this is the element that was rightclicked
                console.log(options.$trigger.context);

                switch(key)
                {
                case 'edit_event':

                  break;
                case 'del_event':

                  break;
                case 'add_event':

                  break;

                }

            },
            items: {
                'edit_event': {name: 'Edit'},
                'del_event': {name: 'Delete'},
                'add_event': {name: 'Create'},
            }
        });
    }
},

The thing is that you will need to get the event id from that element - what I did was use the className in the events json data. The just a bit of a string replace and you will have your id.

'className' => 'jc_event_' . $event->id,

Answer 2

i don't know the contextmenu plugin but i think you can bind it on the eventRender event of fullcalendar. I have the problem with dblClick on an event.

This is a part of my solution:

eventRender: function(event, element) {
    element.bind('dblclick', function() {
    dopbClickFunction(event,element);
    .......

Answer 3

I'm solving exactly the same problem. For me it worked doing the 2 following steps:

1 - code

eventRender: function(calEvent,element){
        element.bt({ ajaxPath: 'ajEvents.asp?opt=getExtendedEvent&valore=' +  calEvent.id,  trigger: 'hover', width: 200 });
        //only for tooltip
        element.contextMenu('myMenu',{bindings:{'idVoce': function(t){ alert('right click on ' + calEvent.id) } } })
    } 

I presume you already have defined the myMenu div...

2 - modify zindex in contextmenu, let's say from 500 to 2500 and from 499 to 2499. This is important if you have your calendar in a dialog window (like myself), otherwise it would go under the visible layer