Fullcalendarでブートストラップモーダルを使用js

Question

私は質問がありますが、私はフルスケーラーでブートストラップモーダルを使用する方法を理解するのに苦労しています。私がしようとしているのは、カレンダーのイベントをクリックすると、モーダルがポップアップし、イベントのフルネームとイベントのサマリーが表示されます。

次は私がカレンダーを生成するために使用していたコードです：

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

あなたは上記を参照できるように、私は、ブートストラップモーダルが含まれています。しかし、次のコードを追加する方法がわからないので、イベントをクリックするとモーダルが表示されます。

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

}）;

すべてのヘルプはあなたの問題ではJavaScript、ブートストラップやfullcalendarとは関係ありませんされていない

おかげ

Answer 1

をいただければ幸いです。

私はあなたを助けるための最小のテストケースを作成し、それは動作します。

coldfusionとmura.loaderコードを確認する必要があります。