在Fullcalendar上使用引导模式js

Question

我有一个问题，我很难找到一种在fullcalendar中使用引导模式的方法。我想要做的是当您点击日历上的事件时，模式将弹出并提供事件的全名和事件摘要。

以下是我用来生成日历代码：

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

}）;

任何帮助，将不胜感激

感谢

Answer 1

你的问题不是不相关的JavaScript，引导或fullcalendar。

我创建了一个最小的测试用例来帮助你，它工作。

你应该检查coldfusion和mura.loader代码。