Fullcalendar Modal On Event Click Not Displaying Correctly

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 extern

Solution 1:

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.

Solution 2:

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' />
<linkhref='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css'rel='stylesheet'media='print' /><scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script><scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.js'></script><scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.min.js'></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script><scriptsrc="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

<divid="fullCalModal"class="modal fade"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">&times;</span><spanclass="sr-only">close</span></button><h4id="modalTitle"class="modal-title"></h4></div><divid="modalBody"class="modal-body"></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttonclass="btn btn-primary">Remove</button></div></div></div></div>

and thanks to @slicedtoad , keep motivating me!