Use Bootstrap Modal on Fullcalendar js

Question

I have a question, it's hard for me to find a way to use bootstrap modal in fullcalendar. What I'm trying to do is when you click on an event in the calendar, a modal name will appear and provide the full name of the event and a summary of the event.

Below is the code that I use to generate the calendar:

<cffunction name="FullCalendar"> <cfscript> var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid(); </cfscript> <cfsavecontent variable="local.str"> <cfoutput> <div id="UpcomingCal" class="calendarResize"> </div> <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">×</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"><a id="eventUrl" target="_blank">Event Page</a></button> </div> </div> </div> </div> <script> mura.loader() .loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'}) .loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar-custom.css",{media:'all'}) .loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'}) .loadjs( "#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js", "#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js", "#$.siteConfig('requirementspath')#/fullcalendar/gcal.js", function(){ $('##UpcomingCal').fullCalendar({ weekMode: 'variable', eventSources: [ { $('#eventUrl'): '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#' , type: 'POST' , data: { method: 'getFullCalendarItems' , calendarid: '#esapiEncode("javascript",CalendarID)#' , siteid: '#variables.$.content('siteid')#' , categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#' , tag: '#esapiEncode('javascript',variables.$.event('tag'))#' } <!---, color: '#this.calendarcolors[colorIndex].background#' , textColor: '#this.calendarcolors[colorIndex].text#'---> , error: function() { $('##mura-calendar-error').show(); } }, ] }); } ) </script> </cfoutput> </cfsavecontent> <cfreturn local.str /> </cffunction> 

As you can see above, I have included bootstrap modal. However, I'm not sure how to add the following code so that when you click on an event a modal view appears:

 $(document).ready(function() { $('#bootstrapModalFullCalendar').fullCalendar({ events: '/hackyjson/cal/', header: { left: '', center: 'prev title next', right: '' }, eventClick: function(event, jsEvent, view) { $('#modalTitle').html(event.title); $('#modalBody').html(event.description); $('#eventUrl').attr('href',event.url); $('#fullCalModal').modal(); } }); 

});

Any help would be appreciated

thanks

Answer 1

Your problem is not related to javascript, bootstrap or fullcalendar.

I created a minimal test case to help you, and it works.

You should check the coldfusion code and mura.loader.