html - 日历重叠

Question

正如您在下面看到的，我的日历与下面的内容重叠。

我目前正在为日历使用以下 css，但我不确定发生了什么:

    @media (max-width:767px){
    .upcoming-events-image { 
     max-width: 180px;
     max-height: 180px;
     width:95%;
    }
    .hidden-xs{
        display:inline !important;
    }
    .fc-scroller{
        overflow: visible !important;
        display:inline-block !important;
     }
}

如有任何帮助，我们将不胜感激。

谢谢

更新

    <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>
         <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: [
                            {
                                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 />
</cffunction>

Answer 1

将下面的代码添加到 CSS 中，它应该可以做到

.fc-scroller.fc-day-grid-container {
    height: auto !important;
}