FullCalendar modal on event click not displaying correctly

Question

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

Solution 1

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 combination of links I need and this was kind of key part that make it work) =>

<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/fullcalendar/2.3.1/fullcalendar.min.js'></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare.com/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!

Solution 2

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

<link href='https://cdnjs.cloudflare.com/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.

Comments

[user1915570]

Thanks for the answer. I have added jquery-ui.css .... however, I have no luck to display the dialog box... it shows still only text...

[DanielST]

@user1915570 Added something else.

[user1915570]

Thanks again, yes, I changed to this : eventClick: function(event) {$("<div>").dialog({ modal: true, title: event.title, width:350}); }, ' but the result is still same, only text, no box. The result is exactly same as the image in the origianl question

[DanielST]

The same code works in this JSFiddle. Is there anything different with yours? And are you sure that the css i linked correctly? (My answer had the code slightly wrong, I've fixed it)

[user1915570]

but when I use $("<div>").dialog({ modal: true, title: event.title, width:350}); , it displays on top of each other (several events title displayed on top of each other with kind of layers) instead overwrite it (the previous one goes away and display new event title) when I clicked several events. but still no dialog box

[user1915570]

I try to make jsfiddle with my code. it has a lot of extra things which is not related for this functionality and question. so when I ready for simplifed it on jsfiddle. I will leave comments again. I am really appreciated you are investigating for this question.

[user1915570]

Hi, I figured out with bootstrap modal. Unfortunately I couldn't make it work with dialog. (probably I just need missing a small part but I've stuck and switched to bootstrap modal for try and found a reference and with my own realization for the right combination of js links) Still Thank you very much to keep motivationg me !!

[DanielST]

You have both the minified and regular version of the bootstrap and jquery scripts. You only need one or the other, preferably the minified (.min)