javascript - 事件点击时的 FullCalendar 模态显示不正确

Question

当我点击现有事件时，我试图在全日历上创建一个删除/移除弹出窗口。

使用 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:

I have no luck to display the dialog box... it shows still only text...

好的，试试这个:

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

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