在 Fullcalendar jQuery 插件中处理 dblclick

我知道这个问题以前被问过，但从那时起已经发布了几个新版本。

是否可以处理 dblclick 事件以在日历中创建新约会，而无需修改 fullcalendar.js 文件？在单独的文件中处理此扩展名以及我的其他调整会很棒。

提前感谢！

/亚当

Adam在 https://code.google.com/p/fullcalendar/issues/detail?id=231 的帖子使用了这个解决方案。

只要有可能，我喜欢把事情排除在核心之外完整日历，并让人们通过 API 执行它们。唯一的原因我有事件点击/事件鼠标悬停/事件鼠标退出作为核心的一部分是 b/c 它们涉及一些特殊情况，例如与 jquery 冲突 UI 拖动和调整大小，所以我需要做一些事情，比如检查那些类。

我认为附加像 dblclick 这样的事件处理程序的最佳方法是通过事件渲染如下：

$('#calendar').fullCalendar({
   eventRender: function(event, element) {
      element.bind('dblclick', function() {
         alert('double click!');
      });
   }
})

如果您有不同感觉，请告诉我。
谢谢

我有最新的更新，这对我来说非常有用。

我遇到了同样的问题，不想摆弄核心，所以我在 dayClick 回调中编写了双击逻辑。

dayClick:function( date, allDay, jsEvent, view ) {
            var singleClick = date.toUTCString();
            if(doubleClick==singleClick){
                console.log('Double-click!');
                doubleClick = null;
            }else{
                doubleClick=date.toUTCString();
                clearInterval(clickTimer);
                clickTimer = setInterval(function(){
                    doubleClick = null;
                    clearInterval(clickTimer);
                }, 500);
            }
        }

clickTimer和doubleClick在调用初始化日历之前声明。

只是为了补充胡安·冈萨雷斯的答案：

$("#calendar").fullCalendar({
    dayRender: function(date, element, view){
        element.bind('dblclick', function() {
            alert('double click!');
        });
    }
});

此代码将创建整个"天"事件的dblclick事件。

源

下面的代码显示了 Event & Day 的双击事件。对于一天，您需要双击日期单元格的下半部分。我不知道这背后的原因

 $('#fullcalendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay',
      },
      events: this.EventList,
      defaultView: 'month',
      editable: true,
      //for event double click
      eventRender:function(event,element){
        element.bind('dblclick',function(){
          alert('double click event')
        });
      },
      //for day double click
      dayRender:function(date,cell)
      {
        cell.bind('dblclick',function(){
          alert(date)
        })
      }
    })

好的，所以这可能是旧线程，但我要把我的五美分给这个。从版本 2(当前为 2.4.0(开始，管理点击事件的代码段似乎略有不同。所以。。这就是我解决它的方式。

如前所述，打开 fullcalendar.js，搜索类似"trigger('eventClick'"的内容，您将遇到如下所示的代码：

$.each(
{
    mouseenter: function(seg, ev) {
        _this.triggerSegMouseover(seg, ev);
    },
    mouseleave: function(seg, ev) {
        _this.triggerSegMouseout(seg, ev);
    },
    click: function(seg, ev) {
        return view.trigger('eventClick', this, seg.event, ev); // can return `false` to cancel
    },
    mousedown: function(seg, ev) {
        if ($(ev.target).is('.fc-resizer') && view.isEventResizable(seg.event)) {
            _this.segResizeMousedown(seg, ev, $(ev.target).is('.fc-start-resizer'));
        }
        else if (view.isEventDraggable(seg.event)) {
            _this.segDragMousedown(seg, ev);
        }
    }
}, and so on .......

因此，要获得双击，只需在单击和鼠标按下之间获取这段代码(或任何适合您的愿望(：

dblclick: function(seg, ev) {
        return view.trigger('eventDoubleClick', this, seg.event, ev); // can return `false` to cancel
    },

现在，您需要做的就是在初始化对象上指定它。

eventDoubleClick: function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    alert('View: ' + view.name);
    // change the border color just for fun
    $(this).css('border-color', 'red');
}

为我在Chrome工作，没有在其他任何地方测试过这个解决方案。

使用选择器 jquery $(info.el).on 在 eventRender 中绑定 dblclick注意：仅适用于全日历V4的解决方案(

$('#calendar').fullCalendar({
       eventRender: function(info) {
            $(info.el).on('dblclick', function() {
               alert('double click!');
            });
       }
})

它对我有用！ :)

我通过修改完整日历来解决这个问题.js这对我来说似乎没什么大不了的。无论如何，以下是添加双击事件的方法：

打开完整日历.js，搜索类似">触发器('事件点击'("的内容

您将看到此函数：

function eventElementHandlers(event, eventElement) {
    eventElement
    .click(function (ev) {
        if (!eventElement.hasClass('ui-draggable-dragging') &&
            !eventElement.hasClass('ui-resizable-resizing')) {
            return trigger('eventClick', this, event, ev);
        }
    })
                .hover(
        function (ev) {
            trigger('eventMouseover', this, event, ev);
        },
        function (ev) {
            trigger('eventMouseout', this, event, ev);
        }
    );
    // TODO: don't fire eventMouseover/eventMouseout *while* dragging is occuring (on subject element)
    // TODO: same for resizing
}

将此函数添加到事件元素的函数中(单击/悬停旁边(

  .dblclick(function (ev) {
        return trigger('eventDblClick', this, event, ev);
    })

现在，您可以通过eventDblClick为日历事件编写双击事件。像这样的东西：(参考文档的事件点击参数(
```
eventDblClick: function (calEvent, jsEvent, view) {
   // Create a new appointment
}
```

注意：你可以通过这种方式向事件添加任何jquery函数！

        dayClick: function(date, jsEvent, view) {
            prevTime = typeof currentTime === 'undefined' || currentTime === null
                ? new Date().getTime() - 1000000
                : currentTime;
            currentTime = new Date().getTime();
            if (currentTime - prevTime < 500)
            {
                //double click call back
                console.log("this is double click");
            }
        },

获取当天的当前时间单击

将 Nullorado 的解决方案更新到 v3.2.0：

从版本 3(当前为 3.2.0(开始，管理点击事件的代码段似乎略有不同。解决它的好方法如下：

打开fullcalendar.js，搜索类似"bindSegHandlersToEl"的内容，你会点击一些看起来像这样的代码：

bindSegHandlersToEl: function(el) {
    this.bindSegHandlerToEl(el, 'touchstart', this.handleSegTouchStart);
    this.bindSegHandlerToEl(el, 'mouseenter', this.handleSegMouseover);
    this.bindSegHandlerToEl(el, 'mouseleave', this.handleSegMouseout);
    this.bindSegHandlerToEl(el, 'mousedown', this.handleSegMousedown);
    this.bindSegHandlerToEl(el, 'click', this.handleSegClick);
},

在上面显示的函数中，添加此行以创建双击处理程序：

this.bindSegHandlerToEl(el, 'dblclick', this.handleSegDoubleClick);

在此之后，在函数下方的几行中查找"handleSegClick"。你会发现这个：

    handleSegClick: function(seg, ev) {
    var res = this.view.publiclyTrigger('eventClick', seg.el[0], seg.event, ev); // can return `false` to cancel
    if (res === false) {
        ev.preventDefault();
    }
},

复制并重命名：

"handleSegClick" to "handleSegDoubleClick">
单击"到"事件双击">

您最终会得到以下结果：

handleSegDoubleClick: function(seg, ev) {
    var res = this.view.publiclyTrigger('eventDoubleClick', seg.el[0], seg.event, ev); // can return `false` to cancel
    if (res === false) {
        ev.preventDefault();
    }
},

最后，转到您的完整日历初始化对象并指定：

eventDoubleClick: function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
}

适用于Chrome和IE11。

我想

我会分享我如何通过 API 添加 dblclick 这个，而不是使用通过一个对象引用公开属性的完整日历版本 4 修改代码。

这是工作示例：代码笔

eventRender: function (info) {
  //WON'T ALLOW ALSO WORK WITH single eventClick or single Click Listener
   //info.el.addEventListener('dblclick', function () {
     //  alert('DOUBLE CLICK!'+info.event.title);
   //});
  info.el.addEventListener('click', function() {
        clickCnt++;         
    if (clickCnt === 1) {
        oneClickTimer = setTimeout(function() {
            clickCnt = 0;
            alert('SINGLE CLICK example value grab:' + info.event.title );
        }, 400);
    } else if (clickCnt === 2) {
        clearTimeout(oneClickTimer);
        clickCnt = 0;
        alert('DOUBLE CLICK example value grab:' + info.event.start );
    }          
  });
}

使用 FULLCALENDAR V4：

eventRender: function(info) { 
    $(info.el).tooltip({
      title: info.event.title,
    });
    $(info.el).bind('dblclick', function() {
     alert('double click!');
    });
  },

这段代码可用于版本 6。

initialView: 'dayGridMonth',
dateClick: function (info) {
    if (info.dayEl.dblclick) {
        return;
    }
    info.dayEl.dblclick = true;
    info.dayEl.addEventListener('dblclick', function () {
        console.log(info)
    });
},

相关内容

最新更新

热门标签：