javascript - FullCalendar modal on event click not displaying correctly - Stack Overflow

admin管理员组

文章数量:1357788

I'm trying to make a delete/remove popup on fullcalendar when I click the existing event.

Using JQueryUI's dialog, something is partially displayed.

(note. my events are all external events which have been dropped from side menu)

The following two methods are the closest I got to displaying something.

Method 1 with dialog in eventRender

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

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

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

and

Method 2 with dialog in eventClick

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

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

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

both behaviors are same It shows the title of fectched event and close button. But popup dialog window is not there (not surrounded).

It displays only texts on fullcalendar .

Does anyone why the dialog isn't displaying properly? The window is only displaying text.

Also, I don't if I should include any particular css code for the popup window but these are all css from my code.

So if I am missing some css for popup window, can anyone inform me of the reference css code for the dialog popup?

 <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>

and my .js links..

<link href='.3.1/fullcalendar.css' rel='stylesheet' />
<link href='.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src=".js/2.9.0/moment.min.js"></script>
<script src='.1.3/jquery.min.js'></script>
<script src=".11.3/jquery-ui.min.js"></script>
<script src='.3.1/fullcalendar.min.js'></script>

I'm trying to make a delete/remove popup on fullcalendar when I click the existing event.

Using JQueryUI's dialog, something is partially displayed.

(note. my events are all external events which have been dropped from side menu)

The following two methods are the closest I got to displaying something.

Method 1 with dialog in eventRender

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

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

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

and

Method 2 with dialog in eventClick

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

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

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

both behaviors are same It shows the title of fectched event and close button. But popup dialog window is not there (not surrounded).

It displays only texts on fullcalendar .

Does anyone why the dialog isn't displaying properly? The window is only displaying text.

Also, I don't if I should include any particular css code for the popup window but these are all css from my code.

So if I am missing some css for popup window, can anyone inform me of the reference css code for the dialog popup?

 <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>

and my .js links..

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

• javascript
• jquery
• css
• twitter-bootstrap
• fullcalendar

Share Improve this question Follow edited Feb 28, 2017 at 8:41 user1915570 asked Apr 30, 2015 at 10:19 user1915570user1915570 38622 gold badges77 silver badges2727 bronze badges 2

• I've answered the valid part of this question: Why isn't this modal displaying correctly? The first part about bootstrap doesn't fit the SO format. Each post should be only 1 question and questions like Why doesn't X work? require a MVCE. – DanielST Commented May 1, 2015 at 15:09
• I just made a large edit to your question that reduced the scope considerably. You are wele to revert it if you don't like the changes, but as your question was before it would eventually be closed. – DanielST Commented May 1, 2015 at 15:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The modal isn't showing correctly because you don't have the jquery ui css loaded.

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

And go with the eventClick method.

Edit 1:

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

Okay, try this:

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

This will create a new element and make it a dialog.

I answer my own question. I have found solution myself. but I am not really able to explain since I am new to this. but I think this may help someone with similar trouble and for my own memory backup. I decide to post answer to my own question.

I couldn't succeed with dialog (box doesn't display only able to display text).

After several days of efforts and with [reference] for the code 2) 3), I decide to try with bootstrap modal again. then I got a luck.. so here is working code.

1) At first, all links I need (I figured what bination of links I need and this was kind of key part that make it work) =>

<link href='https://cdnjs.cloudflare./ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare./ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare./ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>

<script src='https://cdnjs.cloudflare./ajax/libs/jquery/1.11.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare./ajax/libs/jquery/1.11.4/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.css"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.min.js"></script>

2)javascript part : eventClick code in fullcalendar code

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

     eventClick: function(event){
         $('#modalTitle').html(event.title);
         $('#modalBody').html(event.description);
         $('#fullCalModal').modal();
     },
     ….
 });

3) html, bootstrap modal part

     <div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-primary">Remove</button>
            </div>
        </div>
    </div>
</div> 

and thanks to @slicedtoad , keep motivating me!

本文标签： javascriptFullCalendar modal on event click not displaying correctlyStack Overflow