在Fullcalendar js上使用Bootstrap Modal [英] Use Bootstrap Modal on Fullcalendar js

问题描述

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

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

 < cffunction name =FullCalendar> 
 
< cfscript> 
 
 var calendarid = $ .getbean（'content'）。loadby（title ='Regal Events'）。getcontentid（）; 
 
 
< / cfscript> 
< cfsavecontent variable =local.str> 
< cfoutput> 
 
< div id =UpcomingCalclass =calendarResize> 
< / div> 
< div id =fullCalModalclass =modal fade> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
 < h4 id =modalTitleclass =modal-title>< / h4> 
< / div> 
< div id =modalBodyclass =modal-body>< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< button class =btn btn-primary>< a id =eventUrltarget =_ blank>事件页面< / a>< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
< script> 
 $ b 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'）：'＃变量s。$。siteConfig（'requirementspath'）＃/ fullcalendar / proxy.cfc？calendarid =＃esapiEncode（javascript，CalendarID）＃'
，输入：'POST'
，data：{
方法：'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]。文本＃'---> 
，error：function（）{
 $（'## mura-calendar-error'）。show（）; 
} 
}，
] 
}）; 
} 
）
< / script> 
 
< / cfoutput> 
< / cfsavecontent> 
< cfreturn local.str /> 
< / cffunction> 
  

正如您在上面看到的那样，我已经包含bootstrap模态。但是，我不知道如何添加以下代码，以便当您单击该事件时，模式将显示：

  $ （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（）; 
} 
}）; 
   
 
 $ b $ p 
 $ b pre 
 
  
 p>感谢
解决方案
 您的问题不是与javascript，bootstrap或fullcalendar无关。 
 
我创建了一个最小的测试用例来帮助您解决问题，并且它可以正常工作s。
 
 
 
您应该检查coldfusion和mura.loader代码。
 
I have a question, I am having a hard time to figure out a way to use bootstrap modal in fullcalendar. What I am trying to do is when you click on the event on the calendar, the modal will pop-up and provide the full name of the event and summary of the event.

The following is the code I am using 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 the bootstrap modal. However, I am not sure how to add the following code so that when you click on the event, the modal 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
解决方案
Your problem is not is not related to javascript, bootstrap or fullcalendar.

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

You should check coldfusion and mura.loader code.

                        
这篇关于在Fullcalendar js上使用Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！