Javascript 在Fullcalendar js上使用引导模式

我有一个问题，我很难想出一种在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>

}))

任何帮助都将不胜感激

---

谢谢

您的问题与javascript、bootstrap或fullcalendar无关

我创建了一个最小的测试用例来帮助您解决问题，它可以正常工作

---

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

现在不工作吗？。通常情况下，如何打开模式？请将该代码用于事件单击：它不工作。当我运行它时，日历消失了，所以我想知道我做错了什么。是的，我检查了代码，如果我不尝试修改它，就可以了。我觉得我只是添加了它或者把课程打错了，但不知道怎么做

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