How to change the size of the FullCalendar js?

Question

I am using FullCalendar js and I am a newbie. However, I was able to determine how get the calendar to work. Although, I am not able to determine how to reduce the size of the calendar. As you can see below, I am using ColdFusion and Mura. I am still new to to both and I am wondering is their a way to reduce the size of the calendar?

Another issue I notice is when you click on an event on the calendar, it will display the event in a weird way. As you can see by the image, it generates that.

I was wondering if it is possible that when you click on the date, it will appear on the below the calendar instead?

Thanks

Thanks

<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

It looks like your calendar is getting the size from

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

Consider either putting it in a smaller container, or forcing it to be smaller. Example

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

Height may be adjustable in the same way