如何更改FullCalendar js的大小？

Question

我正在使用FullCalendar js，但是我是新手。 但是，我能夠確定日歷的工作方式。 雖然，我無法確定如何減小日歷的大小。 如您在下面看到的，我正在使用ColdFusion和Mura。 我對這兩個人還是陌生的，我想知道他們是一種減小日歷大小的方法嗎？

我注意到的另一個問題是，當您單擊日歷上的事件時，它將以一種奇怪的方式顯示該事件。 如您所見，它生成了圖像。

我想知道是否有可能在您單擊日期時將其顯示在日歷下方？

謝謝

謝謝

<cfscript>

    var calendarid = $.getbean('content').loadby(title='Events').getcontentid();


</cfscript>
<cfsavecontent variable="local.str">
    <cfoutput>           
            <h3>Upcoming Events</h3>

             <div id="UpcomingCal">
             </div>
     <script>

     mura.loader()
        .loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.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({

             eventSources: [
                {
                    url: '#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 />

Answer 1

看來您的日歷正從

<div id="UpcomingCal"></div>

考慮將其放在較小的容器中，或強制使其較小。 例

<div id="UpcomingCal" style="width : 800px;"></div>

高度可以用相同的方式調節