web-dev-qa-db-ja.com

fullcalendar.js-ボタンのクリック時にイベントを削除する

私はfullCalendar.jsを使用していますが、現在の問題は、私よりもJavaScript（より具体的なjquery）を理解している人にとっては簡単なものに多くの時間を費やすことです。

私の例のリンクは一番下にありますが、私の主な関心事はこの部分です：

eventClick: function(event){
  $(".closon").click(function() {
     $('#calendar').fullCalendar('removeEvents',event._id);
  });
},

イベントを直接クリックするのではなく、閉じるボタンでカレンダーからイベントを削除したい。 eventClickトリガーの外側で既に$element.clickを使用しようとしましたが、カレンダー上のすべてのイベントを閉じましたが、到達できる最大値はこの悪い状況でした。ユーザーは最初にカレンダーイベントをクリックし、 'X'で削除します。

http://jsfiddle.net/59RCB/49/

javascriptjqueryjsonfullcalendar
14
guilima

EventClick関数を削除し、eventAfterAllRender関数を次のように置き換えます。

        eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        }
39
CodeGodie

上記のソリューションは月ビューでは完全に機能しますが、ウィークビューとデイビューを使用している場合、上記のnextdoordocで指摘されているようにこのソリューションは機能しません。どうして？ weekviewでは、CSSクラスとして「.fc-bg」を持つdiv要素があり、クリックイベントをブロックする25％の不透明度を持つオーバーレイです。

回避策：

eventRender: function(event, element) { 
       element.find(".fc-bg").css("pointer-events","none");
       element.append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );
       element.find("#btnDeleteEvent").click(function(){
            $('#calendar').fullCalendar('removeEvents',event._id);
       });

pointer-events:noneを追加すると、クリックイベントの伝播が可能になります。注：このソリューションはIE10以前では機能しません。

IE10で作業するには、削除ボタンを(".fc-bg")に直接追加できます。

ここに例があります：

eventRender: function(event, element) { 
   element.find(".fc-bg").append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );}

誰かを助けたい

11
Sandy

これは、月、週、日ビューで機能します

eventRender: function (event, element, view) {

            if (view.name == 'listDay') {
                element.find(".fc-list-item-time").append("<span class='closeon'>X</span>");
            } else {
                element.find(".fc-content").prepend("<span class='closeon'>X</span>");
            }
            element.find(".closeon").on('click', function () {
                $('#calendar').fullCalendar('removeEvents', event._id);
            });
1
Ragupathy

私が見つけた方法：

//HTML Code to add the button

<div id='calendar'></div>
<button id='Delete'>Delete Events</button></p>

-

//Our Js data
{id: '1', resourceId: 'a' , start: '2015-10-16T10:52:07', end: '2015-10-16T21:00:00', url: 'https//www.google.com', title: 'How to delete Events'},
{id: '2', resourceId: 'b' , start: '2015-10-16T11:00:10', end: '2015-10-18T17:03:00', title : 'Can we delete multiple events ?'},
{id: '2', resourceId: 'c' , start: '2015-10-16T10:00:00', end: '2015-10-16T23:00:02', title : 'How ?'},
],

//Need to set our button
select: function(start, end, jsEvent, view, resource) {
        console.log(
        'select callback',
        start.format(),
        end.format(),
        resource ? resource.id : '(no resource)'
        );
        }
        });

        //Our button to delete Events
        $('#Delete').on('click', function() {
        $('#calendar').fullCalendar('removeEvents', 2); //Remove events with the id: 2
            });

 });
1
Nearyuk

このコードの方が役立つ場合があります。このコードでは、マウスがイベントの上を移動するとき、およびマウスが外に出るたびに削除アイコンが表示または削除されます。

eventMouseover:function(event,domEvent,view){

    var el=$(this);

    var layer='<div id="events-layer" class="fc-transparent"><span id="delbut'+event.id+'" class="btn btn-default trash btn-xs">Trash</span></div>';
    el.append(layer);

    el.find(".fc-bg").css("pointer-events","none");

    $("#delbut"+event.id).click(function(){
        calendar.fullCalendar('removeEvents', event._id);
    });
},
eventMouseout:function(event){
    $("#events-layer").remove();
}
1
SohanLal Saini