jQuery FullCalendar 在触摸设备上工作 - 但事件的小问题答案

【问题标题】：jQuery FullCalendar working on touch devices - but minor issue with eventsjQuery FullCalendar 在触摸设备上工作 - 但事件的小问题
【发布时间】：2013-06-15 14:48:30
【问题描述】：

http://page-test.co.uk/cal/ - FullCalendar 演示

我已经设置了它，这是一个基本的 jQuery FullCalendar 设置，带有相关的附加功能，以支持触摸设备。

链接页面中包含的文件都是默认的。

该演示在非触控设备上完美运行，但触控设备却很难。

主要在 iPhone/iPad 上进行测试（其他触控设备的操作或多或少完全相同）一旦拖动一项，另一项就不能了。所以你可以拖动任何项目，但其他项目都被锁定了。

一些关键点：

更改视图（月/周等）然后允许再次拖动所有内容
如果您先点击/触摸另一个元素，则可以拖动该元素，但不能拖动其他元素，直到您先触摸这些元素。
在 BlackBerry Playbook 上，它的行为实际上略有不同。如果你去拖动一个不同的元素（通常什么都不会发生），那么在 PlayBook 上它似乎什么都不做（当你在屏幕上滑动手指时） - 但是当你放手时（还没有发生任何事情）让go 它选择可拖动元素，然后取消选择它。如果你然后去拖动那个元素它工作正常。
更改设备的方向会立即锁定页面上的所有元素，并且必须先将视图更改为月/周或触摸元素一次，然后才能再次拖动任何内容。

我敢打赌这是一个单行修复程序，但我已经花费了几个小时，却无法让它做任何事情。

我只想让它在 iPad/iPhone 上运行。

似乎是 mouseup/touchend 没有触发某些东西，或者第一次拖动后 touchstart 事件被删除，但我无法解决问题。

【问题讨论】：

日历呈现“事件”的方式非常动态。内部引擎重新呈现事件，因此您似乎应该尝试在 jquery 中使用live 绑定触摸事件。您正在使用的库可能不这样做。这不仅是触摸的痛苦，也是我必须处理的其他事情的痛苦。你有没有解决过这个问题？日历 2 现已推出，但我不确定它修复了多少这些问题。
不，从未修复它并放弃了。对不起，不是给你最好的答案。没有看过日历 2，但可以尝试一下。
apuschak 似乎找到了另一个库的解决方案。

标签： jquery fullcalendar

【解决方案1】：

编辑：

我使用Touch Punch 和 dayRender 允许在触摸设备上选择一天或多天。我刚刚添加了源，并将 Touch Punch 中的 addTouch() 函数添加到白天单元格的渲染中：

dayRender: function( date, cell) {

cell.addTouch();

},

这至少可以让您在触摸设备上选择一天或几天，您也许可以在其他地方使用其他 Touch Punch 功能来做更多事情，但我还没有尝试过。

我在使用 iPad 时遇到了同样的问题。我也用我的全日历应用程序尝试了https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop，并且可以拖动一个事件但不能拖动另一个事件，它会滚动。我禁用了滚动，但仍然得到相同的行为。我还尝试了这里提到的最后一个选项https://code.google.com/p/fullcalendar/issues/detail?id=724&q=ipad&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars 这个项目https://github.com/joshgerdes/jquery.ui.touch

我还想选择几天或几小时来创建活动。我在 iPad 上查看了 google 的日历，它也缺少此功能，如果移动版本无法在您的浏览器上运行（iPad 上的 safari），他们会收到使用移动版本的通知。移动版不会在月视图中显示任何事件，因此这不适用于我的应用程序。具有可选择性和拖放功能的功能齐全的完整日历将是理想的，但触摸设备可能无法很好地支持这一点。我也会继续寻找解决方案，但如果 google 不提供该功能，它可能不容易实现，我们可能需要提供移动版本和/或没有可选择性和在触摸屏上拖放的直播.我也非常感谢其他人的帮助。

【讨论】：

触摸打孔是要走的路。我在 Touch Punch 源中添加，然后将 addTouch 添加到 FullCalendar 的 dayRender 中的单元格：dayRender: function( date, cell) { cell.addTouch(); }, 这至少可以让您在 iPad 上选择一天或几天。很久没研究了，也没有进一步开发。
哦，太棒了！我会看看那个。您可能想将其添加到您的答案中，我相信 OP 会将其标记为已回答......即使在这么长时间之后:)
这就是伙计们的方式！干得好，谢谢。我添加了 eventRender element.draggable();它有效！ :)
使用 cell.addTouch 功能后出现错误。 “未捕获的 TypeError：无法读取未定义的属性 'addTouch'”我使用的是完整日历版本 4。

【解决方案2】：

使用触摸打孔拖动事件，在eventRender中添加代码：

$.support.touch = 'ontouchend' in document;

if ($.support.touch) {  
     $(element).draggable();
}

要为 daycells 添加触摸功能，请使用另一个触摸 js 文件： https://github.com/joshgerdes/jquery.ui.touch 并在 dayRender 中添加 cell.addTouch()

几天后我的日历中也会有（基于 Fullcalendar）

http://codecanyon.net/user/wolberspl/portfolio?ref=wolberspl

【讨论】：