jquery - Full calendar:show differnet context menu on event or on calendar -
i'm using full calendar plugin. add context menu on calendar, try add differnet content menu on event,,, . when user click on blank slot different context menu show, , when user click on event differnet context menu show..
it work in mozilla. please see live work , change there , update link... ... thats not issue, when right click on event id=calendar content menu show, want show different id=event content menu on event right click... . here html code..
<div id='calendar' data-toggle="context" data-target="#calendar-context-menu" ></div> <!-- show date--> <input type="text" disabled="disabled" name="location" class="span6" id="location"/> <!-- on calendar content-menu--> <div id="calendar-context-menu" > <ul class="dropdown-menu" role="menu"> <li><a tabindex="-1" href="javascript:alert(mousedowndate);">action</a></li> <li><a tabindex="-1" href="#" >another action</a></li> <li><a tabindex="-1" href="#">something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">separated link</a></li> </ul> </div> <!-- here event context menu--> <div id="event-context-menu" > <ul class="dropdown-menu" role="menu"> <li><a tabindex="-1" href="javascript:alert(mousedowndate);">eventn</a></li> <li><a tabindex="-1" href="#" >event menu</a></li> <li><a tabindex="-1" href="#">something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">separated link</a></li> </ul> </div> here script code
var date = new date(); var d = date.getdate(); var m = date.getmonth(); var y = date.getfullyear(); var $calendar = $('#calendar').fullcalendar({ dayclick: function(date, allday, jsevent, view) { var a= document.getelementbyid('location'); a.value=date.todatestring(); if(view.name!='month'){ a.value+=" " + date.tolocaletimestring(); } var e = document.getelementbyid("place"); var struser = e.options[e.selectedindex].value; a.value+=" @ "+struser; }, header: { left: 'prev,next today', center: 'title', right: 'month,agendaweek,agendaday' }, editable: true, selectable: true, selecthelper: true, defaultview: 'agendaday', events: [{ title: 'meeting', start: new date(y, m, d, 10, 30), allday: false }, { title: 'lunch', start: new date(y, m, d, 12, 0), end: new date(y, m, d, 14, 0), allday: false }], //event alert here eventclick: function (event) { alert('event click: ' + event.title); } }); $("#calendar").mousedown(function (e) { if (e.button === 2) { console.log("down"); if($(e.target).parents(".fc-event").length > 0) return; var newevent = $.extend($.event("mousedown"), { which: 1, clientx: e.clientx, clienty: e.clienty, pagex: e.pagex, pagey: e.pagey, screenx: e.screenx, screeny: e.screeny }); $(e.target).trigger(newevent); }else if(e.button===1){ $('#context-menu').removeclass('open') } if(e.button===0){ $('#context-menu').removeclass('open'); } }); $("#calendar").mouseup(function (e) { if(e.button===0){ $('#context-menu').removeclass('open'); } if (e.button === 2) { console.log("up"); if(!$(e.target).parents(".fc-event").length > 0) return; var newevent = $.extend($.event("click"), { which: 1, clientx: e.clientx, clienty: e.clienty, pagex: e.pagex, pagey: e.pagey, screenx: e.screenx, screeny: e.screeny }); $(e.target).trigger(newevent); } });
Comments
Post a Comment