1

フルカレンダープラグインを使用しています。カレンダーにコンテキストメニューを追加したので、イベントに別のコンテンツメニューを追加しようとしています,,, . ユーザーが空のスロットをクリックすると別のコンテキスト メニューが表示され、ユーザーがイベントをクリックすると別のコンテキスト メニューが表示されます。

私の仕事のデモをライブ.. .

Mozilla では正常に動作します。ライブ作業を見て、そこで変更してリンクを更新してください... ...しかし、それは問題ではありません。イベント id=calendar コンテンツ メニューを右クリックすると表示されますが、イベントの右クリックで別の 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>

ここにスクリプトコードがあります

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);

}

});
4

0 に答える 0