在 Fullcalendar jQuery 插件中处理 dblclick

问题描述 投票：0回答：13

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

是否可以处理 dblclick 事件以在日历中创建新约会，而无需修改 fullcalendar.js 文件？如果能在一个单独的文件中与我的其他调整一起处理这个扩展，那就太好了。

提前致谢！

/亚当

jquery fullcalendar
13个回答
29
投票

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

只要有可能，我喜欢把事情排除在核心之外 fullcalendar，并让人们通过 API 来完成它们。唯一的原因 我有 eventClick/eventMouseover/eventMouseout 作为核心的一部分 b/c它们涉及一些特殊情况，例如与jquery冲突 ui 拖动和调整大小，所以我需要做一些事情，比如检查这些 课程。

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

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

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

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

12
投票

我遇到了同样的问题，并且不想摆弄核心，所以我将双击逻辑写入了 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
在调用初始化日历之前声明。

9
投票

只是添加到Juan Gonzales 的答案：

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

此代码将创建 

dblclick
事件到整个“日”事件。

来源

5
投票

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

 $('#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)
        })
      }
    })
3
投票

好吧，这可能是旧线程，但我要为这个线程付出五美分。从版本 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 中工作，尚未在其他地方测试过此解决方案。

2
投票

使用选择器jquery 

$(info.el).on
在
eventRender
中绑定dblclick 注意：解决方案仅适用于 fullcalendar V4）

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

它对我有用！ :)

1
投票

我通过修改 fullcalendar.js 来实现这个工作，这对我来说似乎没什么大不了的。无论如何，这是添加双击事件的方法：

  • 打开 fullcalendar.js，搜索类似“trigger('eventClick'””

  • 你会看到这个功能：

    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
}

  • 将此函数添加到 eventElement 的函数中（单击/悬停旁边）

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

  • 现在您可以通过eventDblClick为日历事件编写双击事件。像这样的：（参数请参考文档的eventClick）

    eventDblClick: function (calEvent, jsEvent, view) {
   // Create a new appointment
}

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

1
投票
        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");
            }
        },

获取当天的当前时间点击

1
投票

更新了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();
    }
},

复制并重命名：

  1. “handleSegClick”到“handleSegDoubleClick”
  2. “eventClick”到“eventDoubleClick”

您最终会得到以下结果：

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();
    }
},

最后，转到您的 fullcalendar 初始化对象并指定：

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

适用于 Chrome 和 IE11。

0
投票

我想分享一下我如何通过 API 添加 dblclick 与使用 fullcalendar 版本 4 进行代码修改（通过一个对象引用公开属性）的方式进行比较。

这是工作示例：Codepen

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

    }          
  });
}
0
投票

使用 FULLCALENDAR V4：

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

这段代码可用于6版本。

initialView: 'dayGridMonth',
dateClick: function (info) {
    if (info.dayEl.dblclick) {
        return;
    }

    info.dayEl.dblclick = true;

    info.dayEl.addEventListener('dblclick', function () {
        console.log(info)
    });
},
0
投票

从 v5 开始（我认为），

eventRender
不再存在。现在的一种解决方法是 
eventDidMount
，您可以使用它执行以下操作（我在这里使用 React）来访问事件的 HTML 元素 — 这显然是一个 
<a>
—:

eventDidMount={(data) => {
  const eventEl = data.el
  const event = data.event
  eventEl.ondblclick = () => {
    console.log("here dbl")
    event.remove()
  }
  eventEl.onclick = () => {
    console.log("here")
  }
}}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.