Question

当我点击现有活动时，我正在尝试在fullcalendar上创建一个删除/删除弹出窗口。

使用JQueryUI的对话框，可以部分显示某些内容。

（请注意。我的事件都是从侧边菜单中删除的外部事件）

以下两种方法是我最接近显示的东西。

在eventRender中使用对话框的方法1

$('#calendar').fullCalendar({
  ….

     eventRender: function (event, element){
          $("#eventContent").dialog({ modal: true, title: event.title, width:350});      });
 ….
});

<div id="eventContent" title="Event Details" >
</div>

和

在eventClick中使用对话框的方法2

$('#calendar').fullCalendar({
  ….

     eventClick: function(event){
          $("#eventContent").dialog({ modal: true, title: event.title, width:350});      });
 ….
});

<div id="eventContent" title="Event Details" >
</div>

两种行为都是一样的它显示了fectched事件和关闭按钮的标题。但弹出对话框窗口不存在（未被包围）。

它仅显示fullcalendar上的文本。

有人为什么没有正确显示对话框？该窗口仅显示文本。

另外，如果我要为弹出窗口添加任何特定的css代码，我不会这样做，但这些都是我代码中的css。

所以，如果我在弹出窗口中缺少一些css，那么有人可以告诉我对话框弹出的参考css代码吗？

 <style>

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

        #wrap {
            width: 1100px;
            margin: 0 auto;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

        #external-events h4 {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }

        #external-events .fc-event {
            margin: 10px 0;
            cursor: pointer;
        }

        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

        #calendar {
            float: right;
            width: 900px;
        }
</style>

和我的.js链接..

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>

Answer 1

模态未正确显示，因为您没有加载jquery ui css。

<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />

然后使用eventClick方法。

编辑1：

我没有运气显示对话框......它只显示文字......

好的，试试这个：

eventClick: function(event){
    $("<div>").dialog({ modal: true, title: event.title, width:350});
},

这将创建一个新元素并使其成为一个对话框。

事件上的FullCalendar模式单击无法正确显示

1 个答案: