Question

我正在尝试通过完整日历实现日历。我能够做我需要的一切，除了我在用户点击事件后尝试加载JQuery对话框。我知道在“eventclick”部分中返回false将使其保留在页面上，但添加任何类型的函数似乎都否定了这样做。我需要能够在没有将我带到Google日历页面的情况下加载对话框。这是我的代码：

<html>
<link rel='stylesheet' href='fullcalendar-2.0.2/fullcalendar.css' />
<script src='fullcalendar-2.0.2/lib/jquery-1.10.2.js'></script>
<script src='fullcalendar-2.0.2/lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='fullcalendar-2.0.2/fullcalendar.js'></script>
<script src='fullcalendar-2.0.2/gcal.js'></script>

<div id='calendar' style="width:75%;height:75%"></div>

<script>


$(document).ready(function() {



    $('#calendar').fullCalendar({
        events: 'https://www.google.com/calendar/feeds/myFeed',

            eventClick: function(calEvent, jsEvent, view) {     
        var temp= loadDialog(calEvent.description,calEvent.location,calEvent.title);
        return false;
        }

    });
});
</script>


<script>

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });


  });

function loadDialog(description,location,title)
{

$("#className").val(title);
$("#location").val(location);
$("#description").val(description);
 $( "#dialog" ).dialog( "open" );
}
return false;
</script>


<div id="dialog" title="Class Information">
    <h2 id="className"></h2></br>
    <h1 id="location"></h1></br>
  <div id="description"></div>
</div>

</html>

一如既往地谢谢！

Answer 1

事件仍然有联系。即使您的代码有效，href也会将您带到另一个页面。所以，摆脱链接。我是这样做的：

$('#calendar').fullCalendar({
    events: 'https://www.google.com/calendar/feeds/myFeed',
    eventRender: function (calEvent, element) {
        element.attr('href', 'javascript:void(0);');
        element.attr('onclick', 'loadDialog("' + calEvent.description + '","' + calEvent.location + '","' + calEvent.title + '");');
    }
});

您还需要将.val(中的loadDialog更改为.html(。 val用于表单元素。

完整日历留在页面上

1 个答案: