FullCalendar onClick事件打开Android中的Dialog无法正常工作

时间:2013-09-11 05:59:01

标签: android jquery dialog calendar fullcalendar

这是我的fullcalendar代码,我正在尝试在Android中的对话框中打开日历事件。我尝试了所有方法和建议,但都失败了。任何人都可以建议谁在Android上尝试过这个?目前它是在android onClick事件的浏览器中打开,我想在对话框中显示。提前致谢

<html>
<head>
<script src='../jquery/jquery-1.9.1.min.js'></script>
<script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src="../jquery/jquery.ui.touch-punch.min.js"></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../fullcalendar/gcal.js'></script>
<script>

$(document).ready(function() {

    $('#calendar').fullCalendar({
    // US Holidays
    events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
    eventClick: 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');

            },

        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            }else{
                $('#loading').hide();
            }
        }

    });

});

</script>
<style>

body {
    margin-top: 25px;
    text-align: center;
    font-size: 13px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }

#loading {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 9px;
    }

#calendar {
    width: 100%;
    margin: 0 auto;
    }

</style>
</head>
<body>
<div id='loading' style='display:none'>Please Wait....Loading....</div>
<div id='calendar'></div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,这里是如何绕过它。

问题出现是因为在Adam Shaw最出色的FullCalendar插件(v1)中,他在事件容器鼠标悬停时懒洋洋地将事件处理程序附加到日历事件。问题是Android没有正确实现鼠标悬停事件,因此点击处理程序不会被初始化。

一种解决方法是在1707行左右更改其插件中的代码:     container.unbind('mouseover')。mouseover(function(ev){

container.unbind('click').click(function(ev) {

但是,这将要求您点击一个事件来初始化任何其他事件,所以如果你在日历事件上有悬停事件(我想你不会做你自己的移动设备),这个方法赢了不行。

我做的另一种选择,但是他的懒惰事件初始化失败了,就是将以下内容添加到日历初始化选项中:

eventAfterAllRender: function(){
  // hack to trigger event binding on android chrome, which doesn't trigger mouseover events
  $('.fc-event').each(function(i, element){
    $(element).trigger('mouseover', {});
  })
}

这样做会立即触发日历中所有事件的鼠标悬停事件,从而触发所有日历事件的attachHandler。