5

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 event how does it work?

3 Answers 3

8

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);
    .......
0
1

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

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,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.