FullCalendar - встроенный прокручиваемый календарь

Question

Я почти не редактирую Easy! Appoinments, чтобы адаптировать его к нашим потребностям. Я разрабатываю страницу, на которой перечисляется календарь поставщиков раз в две недели.

FullCalendar позволяет создавать календарь раз в две недели с помощью этой опции:

views: {
   agendaBiWeek: {
       type: 'basic',
       duration: { weeks: 2 },
       buttonText: '14 giorni'
   }
},

, но две недели разбиты на 2 строки.

Вместо этого я хотел бы показать 14 дней только в одной прокручиваемой строке .

Это моя фактическая ситуация:

Но я бы хотел получить такой результат:

Я получаю этот результат, манипулируя объектами DOM через JS, но при обновлении все портится. Fullcalendar добавляет новые события, ожидающие найти 2 строки.

Единственный простой способ заставить его работать - это изменить CSS, чтобы показать встроенный 2 DIV, но я не знаю, как это сделать, потому что элементов слишком много.

Можете ли вы мне помочь?

Я создаю календарь с такими параметрами:

$('#custom-calendar-' + provider.id).fullCalendar({
                defaultView: 'agendaBiWeek',
                height: BackendCalendarDefaultView._getCalendarHeight,
                contentHeight: 100,
                editable: true,
                firstDay: 1,
                snapDuration: '00:30:00',
                timeFormat: timeFormat,
                slotLabelFormat: slotTimeFormat,
                columnHeader: false,
                header: {
                    left: null,
                    center: null,
                    right: null
                },
                // visibleRange: {
                //     start: '2020-03-22',
                //     end: '2020-03-25'
                // },
                views: {
                    agendaBiWeek: {
                        type: 'basic',
                        duration: { weeks: 2 },
                        buttonText: '14 giorni'
                    }
                },
                // Selectable
                selectable: true,
                selectHelper: true,
                select:              

                                           .

                                           .

                                           .

                                           .

Это пример сгенерированного календаря:

<div id="custom-calendar-105" class="custom-calendar fc fc-unthemed fc-ltr" style="">
    <div class="fc-view-container" style="">
        <div class="fc-view fc-agendaBiWeek-view fc-basic-view" style="">
            <table class="">
                <tbody class="fc-body">
                    <tr>
                        <th class="fc-widget-header-custom">Provider14</th>
                        <td class="fc-widget-content">
                            <div class="fc-scroller fc-day-grid-container" style="overflow: hidden; height: 98.4px;">
                                <div class="fc-day-grid fc-unselectable">
                                    <div class="fc-row fc-week fc-widget-content" style="">
                                        <div class="fc-bg">
                                            <table class="">
                                                <tbody>
                                                    <tr class="giorno">
                                                        <td class="fc-day fc-widget-content fc-mon fc-past" data-date="2020-01-20"></td>
                                                        <td class="fc-day fc-widget-content fc-tue fc-past" data-date="2020-01-21"></td>
                                                        <td class="fc-day fc-widget-content fc-wed fc-past" data-date="2020-01-22"></td>
                                                        <td class="fc-day fc-widget-content fc-thu fc-today " data-date="2020-01-23"></td>
                                                        <td class="fc-day fc-widget-content fc-fri fc-future" data-date="2020-01-24"></td>
                                                        <td class="fc-day fc-widget-content fc-sat fc-future" data-date="2020-01-25"></td>
                                                        <td class="fc-day fc-widget-content fc-sun fc-future" data-date="2020-01-26"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="fc-content-skeleton">
                                            <table class="eventiGiorno">
                                                <thead>
                                                    <tr>
                                                        <td class="fc-day-top fc-mon fc-past" data-date="2020-01-20"><span class="fc-day-number">20</span></td>
                                                        <td class="fc-day-top fc-tue fc-past" data-date="2020-01-21"><span class="fc-day-number">21</span></td>
                                                        <td class="fc-day-top fc-wed fc-past" data-date="2020-01-22"><span class="fc-day-number">22</span></td>
                                                        <td class="fc-day-top fc-thu fc-today " data-date="2020-01-23"><span class="fc-day-number">23</span></td>
                                                        <td class="fc-day-top fc-fri fc-future" data-date="2020-01-24"><span class="fc-day-number">24</span></td>
                                                        <td class="fc-day-top fc-sat fc-future" data-date="2020-01-25"><span class="fc-day-number">25</span></td>
                                                        <td class="fc-day-top fc-sun fc-future" data-date="2020-01-26"><span class="fc-day-number">26</span></td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td></td>
                                                        <td class="fc-event-container"><a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable">
                                                                <div class="fc-content"><span class="fc-time">14:30</span> <span class="fc-title">MONTES</span></div>
                                                            </a></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="fc-row fc-week fc-widget-content" style="">
                                        <div class="fc-bg">
                                            <table class="">
                                                <tbody>
                                                    <tr>
                                                        <td class="fc-day fc-widget-content fc-mon fc-future" data-date="2020-01-27"></td>
                                                        <td class="fc-day fc-widget-content fc-tue fc-future" data-date="2020-01-28"></td>
                                                        <td class="fc-day fc-widget-content fc-wed fc-future" data-date="2020-01-29"></td>
                                                        <td class="fc-day fc-widget-content fc-thu fc-future" data-date="2020-01-30"></td>
                                                        <td class="fc-day fc-widget-content fc-fri fc-future" data-date="2020-01-31"></td>
                                                        <td class="fc-day fc-widget-content fc-sat fc-future" data-date="2020-02-01"></td>
                                                        <td class="fc-day fc-widget-content fc-sun fc-future" data-date="2020-02-02"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="fc-content-skeleton">
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <td class="fc-day-top fc-mon fc-future" data-date="2020-01-27"><span class="fc-day-number">27</span></td>
                                                        <td class="fc-day-top fc-tue fc-future" data-date="2020-01-28"><span class="fc-day-number">28</span></td>
                                                        <td class="fc-day-top fc-wed fc-future" data-date="2020-01-29"><span class="fc-day-number">29</span></td>
                                                        <td class="fc-day-top fc-thu fc-future" data-date="2020-01-30"><span class="fc-day-number">30</span></td>
                                                        <td class="fc-day-top fc-fri fc-future" data-date="2020-01-31"><span class="fc-day-number">31</span></td>
                                                        <td class="fc-day-top fc-sat fc-future" data-date="2020-02-01"><span class="fc-day-number">1</span></td>
                                                        <td class="fc-day-top fc-sun fc-future" data-date="2020-02-02"><span class="fc-day-number">2</span></td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

МОЕ РЕШЕНИЕ:

Я просто изменил css следующим образом:

#calendar-page .custom-calendar .fc-scroller{
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    height: auto !important
}

#calendar-page .custom-calendar .fc-scroller > .fc-day-grid {
    width: 200%
}

#calendar-page .custom-calendar .fc-basic-view .fc-body .fc-row {
    display: table-cell;
    width: 50%
}

#calendar-page .custom-calendar .fc-row td {
    width: 90px;
}

#calendar-page .fc th.fc-widget-header-custom {
    width: 100px;
    vertical-align: middle
}

@media (max-width: 767px) {
    #calendar-page .fc th.fc-widget-header-custom {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #calendar-page .fc th.fc-widget-header-custom + td {
        display: block;
        width: 100%;
        border: none
    }

    #calendar-page .custom-calendar .fc-row:first-of-type {
        border-left: 1px solid #ddd
    }
}