Question

我正在使用完整的日历插件。我在日历上添加上下文菜单，所以现在我尝试在事件上添加不同内容菜单,,, 。当用户点击空白插槽时，会显示不同的上下文菜单，当用户点击事件时，会显示不同的上下文菜单..

它在Mozilla中正常工作。请查看实时工作并在那里更改并更新链接... ... 但那不是问题，当我右键点击事件id =日历内容菜单显示时，但我希望在事件右键单击时显示一些不同的id =事件内容菜单... 。这是我的HTML代码..

<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 is 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>

这是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+=" at "+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);

}

});

完整日历：在活动或日历上显示不同的上下文菜单

0 个答案: