Verwenden Sie Bootstrap Modal auf Vollkalender js

Question

Ich habe eine Frage, ich habe eine harte Zeit, um eine Möglichkeit, Bootstrap-Modal im Vollkalender zu verwenden. Was ich versuche zu tun ist, wenn Sie auf das Ereignis im Kalender klicken, erscheint das modale Pop-up und gibt den vollständigen Namen des Ereignisses und die Zusammenfassung des Ereignisses an.

Im Folgenden ist der Code, den ich den Kalender zu generieren bin mit:

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

Wie Sie oben sehen können, habe ich die Bootstrap-modal enthalten. Aber ich bin nicht sicher, wie Sie den folgenden Code hinzufügen, so dass, wenn Sie auf das Ereignis klicken, wird das modale erscheint:

$(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(); 
    } 
}); 

});

Jede Hilfe wäre

Dank

Answer 1

Ihr Problem ist nicht auf Javascript, Bootstrap oder fullcalendar ist nicht im Zusammenhang geschätzt.

Ich habe einen minimalen Testfall erstellt, um Ihnen zu helfen und es funktioniert.

Sie sollten Coldfusion und mura.loader Code überprüfen.