Javascript FullCalendar-内联滚动日历
我可不容易编辑！使之适应我们的需要。 我正在开发一个页面，列出每两周一次的供应商日历 FullCalendar允许使用以下选项创建双周日历：Javascript FullCalendar-内联滚动日历,javascript,html,css,fullcalendar,fullcalendar-4,Javascript,Html,Css,Fullcalendar,Fullcalendar 4,我可不容易编辑！使之适应我们的需要。 我正在开发一个页面，列出每两周一次的供应商日历 FullCalendar允许使用以下选项创建双周日历： views: { agendaBiWeek: { type: 'basic', duration: { weeks: 2 }, buttonText: '14 giorni' } }, 但是这两周被分成两行 一、 相反，希望仅在一个可滚动行中显示14天 这是我的实际情况： 但我想得到这个结果：
views: {
agendaBiWeek: {
type: 'basic',
duration: { weeks: 2 },
buttonText: '14 giorni'
}
},
$('#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>
提供者14
20
21
22
23
24
25
26
14:30蒙特斯
27
28
29
30
31
1.
2.
#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
}
}