javascript - FullCalendar - 内联可滚动日历
问题描述
我几乎没有编辑 Easy!Appoinments 来适应我们的需要。我正在开发一个列出双周供应商日历的页面。
FullCalendar 允许使用此选项创建双周日历:
views: {
agendaBiWeek: {
type: 'basic',
duration: { weeks: 2 },
buttonText: '14 giorni'
}
},
但 2 周分为 2 行。
相反,我只想在一个可滚动的行中显示 14 天。
我通过 JS 操作 DOM 对象来获得这个结果,但是当刷新时,一切都搞砸了。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>
解决方案
我的解决方案:
我只是像这样修改了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
}
}
推荐阅读
- attributes - 如何更改 NSAttributedStringKey.link Swift4 的颜色
- sql - How to group hierarchical relationships together in SQL Server
- system-verilog - 是否有任何工具或 EDA 可以轻松使用 systemverilog?
- pandas - 从 pandas 的行中追加列
- javascript - 地图内的地图数组对象 - ReactJS
- c++ - 功能不停止
- rest - 如何在 spring-integration 中获取 ResponseEntity 主体
- asp.net-mvc - MVC SqlDateTime 溢出。必须在 1753 年 1 月 1 日上午 12:00:00 到 9999 年 12 月 31 日晚上 11:59:59 之间
- php - ajax问题,只显示标题而不显示记录
- c# - 从生成的图像中设置 div 的背景