首页 > 解决方案 > FullCalendar 调度程序,fullcalendar.print.css 的问题

问题描述

版本:

完整日历:3.9.0

调度程序:1.9.4

浏览器视图: 在此处输入图像描述> 打印视图: fullcalendar.print.css 正确包含在 html 的 HEAD 中:在此处输入图像描述

<link rel="stylesheet" media="print" href="/assets/fullcalendar.print.css">

fullcalendar.print.css的内容:

/*********Here is custom css code in fullcalendar.print.css **************/

.main-header, .main-sidebar, #messages, .content-header, .cretrea, .validation, .main-footer, .control-sidebar, .modal, .formcheck, .nav, .btn_submit_global_form{
  display:none;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}
.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

th {
    text-align: left;
}
.fc {
  max-width: 100% !important; }

    /* Global Event Restyling
    --------------------------------------------------------------------------------------------------*/
    .fc-event {
      page-break-inside: avoid; }
    
    .fc-cell-text a{
      page-break-inside: avoid; }

更新1:我发布Html代码,div#calendar中的所有html都是由fullcalendar.js生成的,我使用timelineMonth模式

<div id="calendar" class="fc fc-unthemed fc-ltr"><div class="fc-toolbar fc-header-toolbar"><div class="fc-left"><button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">Aujourd'hui</button><div class="fc-button-group"><button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left" aria-label="prev"><span class="fc-icon fc-icon-left-single-arrow"></span></button><button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right" aria-label="next"><span class="fc-icon fc-icon-right-single-arrow"></span></button></div></div><div class="fc-right"><div class="fc-button-group"><button type="button" class="fc-timelineDay-button fc-button fc-state-default fc-corner-left">Jour</button><button type="button" class="fc-timelineWeek-button fc-button fc-state-default">Semaine</button><button type="button" class="fc-timelineMonth-button fc-button fc-state-default fc-corner-right fc-state-active">Mois</button></div></div><div class="fc-center"><h2>août 2018</h2></div><div class="fc-clear"></div></div><div class="fc-view-container" style=""><div class="fc-view fc-timelineMonth-view fc-timeline fc-unselectable fc-nested"><table class=""> <thead class="fc-head"> <tr> <td class="fc-resource-area fc-widget-header" style="width: 15%;"><div class="fc-scroller-clip"><div class="fc-scroller" style="overflow-x: scroll; overflow-y: hidden; margin: 0px 0px -15px;"><div class="fc-scroller-canvas" style="min-width: 70px;"> <div class="fc-content"><table class="" style="height: 46px;"><colgroup><col class="fc-main-col"></colgroup><tbody><tr><th class="fc-widget-header"><div><div class="fc-cell-content"><span class="fc-expander-space"><span class="fc-icon"></span></span><span class="fc-cell-text">Services/Dossiers</span></div></div></th></tr></tbody></table></div> <div class="fc-bg"></div> </div></div></div></td> <td class="fc-divider fc-col-resizer fc-widget-header"></td> <td class="fc-time-area fc-widget-header"><div class="fc-scroller-clip"><div class="fc-scroller" style="overflow-x: scroll; overflow-y: hidden; margin: 0px 0px -15px;"><div class="fc-scroller-canvas" style="width: 0px; min-width: 1394px;"> <div class="fc-content"><table class="" style="height: 46px;"><colgroup><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col></colgroup><tbody><tr><th class="fc-widget-header fc-wed fc-past" data-date="2018-08-01"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-01&quot;,&quot;type&quot;:&quot;day&quot;}">me<br>1</a></div></th><th class="fc-widget-header fc-thu fc-past" data-date="2018-08-02"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-02&quot;,&quot;type&quot;:&quot;day&quot;}">je<br>2</a></div></th><th class="fc-widget-header fc-fri fc-past" data-date="2018-08-03"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-03&quot;,&quot;type&quot;:&quot;day&quot;}">ve<br>3</a></div></th><th class="fc-widget-header fc-sat fc-past" data-date="2018-08-04"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-04&quot;,&quot;type&quot;:&quot;day&quot;}">sa<br>4</a></div></th><th class="fc-widget-header fc-sun fc-past" data-date="2018-08-05"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-05&quot;,&quot;type&quot;:&quot;day&quot;}">di<br>5</a></div></th><th class="fc-widget-header fc-em-cell fc-mon fc-past" data-date="2018-08-06"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-06&quot;,&quot;type&quot;:&quot;day&quot;}">lu<br>6</a></div></th><th class="fc-widget-header fc-tue fc-past" data-date="2018-08-07"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-07&quot;,&quot;type&quot;:&quot;day&quot;}">ma<br>7</a></div></th><th class="fc-widget-header fc-wed fc-past" data-date="2018-08-08"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-08&quot;,&quot;type&quot;:&quot;day&quot;}">me<br>8</a></div></th><th class="fc-widget-header fc-thu fc-past" data-date="2018-08-09"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-09&quot;,&quot;type&quot;:&quot;day&quot;}">je<br>9</a></div></th><th class="fc-widget-header fc-fri fc-past" data-date="2018-08-10"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-10&quot;,&quot;type&quot;:&quot;day&quot;}">ve<br>10</a></div></th><th class="fc-widget-header fc-sat fc-past" data-date="2018-08-11"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-11&quot;,&quot;type&quot;:&quot;day&quot;}">sa<br>11</a></div></th><th class="fc-widget-header fc-sun fc-past" data-date="2018-08-12"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-12&quot;,&quot;type&quot;:&quot;day&quot;}">di<br>12</a></div></th><th class="fc-widget-header fc-em-cell fc-mon fc-past" data-date="2018-08-13"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-13&quot;,&quot;type&quot;:&quot;day&quot;}">lu<br>13</a></div></th><th class="fc-widget-header fc-tue fc-past" data-date="2018-08-14"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-14&quot;,&quot;type&quot;:&quot;day&quot;}">ma<br>14</a></div></th><th class="fc-widget-header fc-wed fc-past" data-date="2018-08-15"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-15&quot;,&quot;type&quot;:&quot;day&quot;}">me<br>15</a></div></th><th class="fc-widget-header fc-thu fc-past" data-date="2018-08-16"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-16&quot;,&quot;type&quot;:&quot;day&quot;}">je<br>16</a></div></th><th class="fc-widget-header fc-fri fc-past" data-date="2018-08-17"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-17&quot;,&quot;type&quot;:&quot;day&quot;}">ve<br>17</a></div></th><th class="fc-widget-header fc-sat fc-past" data-date="2018-08-18"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-18&quot;,&quot;type&quot;:&quot;day&quot;}">sa<br>18</a></div></th><th class="fc-widget-header fc-sun fc-past" data-date="2018-08-19"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-19&quot;,&quot;type&quot;:&quot;day&quot;}">di<br>19</a></div></th><th class="fc-widget-header fc-em-cell fc-mon fc-past" data-date="2018-08-20"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-20&quot;,&quot;type&quot;:&quot;day&quot;}">lu<br>20</a></div></th><th class="fc-widget-header fc-tue fc-past" data-date="2018-08-21"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-21&quot;,&quot;type&quot;:&quot;day&quot;}">ma<br>21</a></div></th><th class="fc-widget-header fc-wed fc-past" data-date="2018-08-22"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-22&quot;,&quot;type&quot;:&quot;day&quot;}">me<br>22</a></div></th><th class="fc-widget-header fc-thu fc-past" data-date="2018-08-23"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-23&quot;,&quot;type&quot;:&quot;day&quot;}">je<br>23</a></div></th><th class="fc-widget-header fc-fri fc-past" data-date="2018-08-24"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-24&quot;,&quot;type&quot;:&quot;day&quot;}">ve<br>24</a></div></th><th class="fc-widget-header fc-sat fc-past" data-date="2018-08-25"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-25&quot;,&quot;type&quot;:&quot;day&quot;}">sa<br>25</a></div></th><th class="fc-widget-header fc-sun fc-past" data-date="2018-08-26"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-26&quot;,&quot;type&quot;:&quot;day&quot;}">di<br>26</a></div></th><th class="fc-widget-header fc-em-cell fc-mon fc-past" data-date="2018-08-27"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-27&quot;,&quot;type&quot;:&quot;day&quot;}">lu<br>27</a></div></th><th class="fc-widget-header fc-tue fc-past" data-date="2018-08-28"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-28&quot;,&quot;type&quot;:&quot;day&quot;}">ma<br>28</a></div></th><th class="fc-widget-header fc-wed fc-past" data-date="2018-08-29"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-29&quot;,&quot;type&quot;:&quot;day&quot;}">me<br>29</a></div></th><th class="fc-widget-header fc-thu fc-past" data-date="2018-08-30"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-30&quot;,&quot;type&quot;:&quot;day&quot;}">je<br>30</a></div></th><th class="fc-widget-header fc-fri fc-past" data-date="2018-08-31"><div class="fc-cell-content"><a class="fc-cell-text" data-goto="{&quot;date&quot;:&quot;2018-08-31&quot;,&quot;type&quot;:&quot;day&quot;}">ve<br>31</a></div></th></tr></tbody></table></div> <div class="fc-bg"></div> </div></div></div></td> </tr> </thead> <tbody class="fc-body"> <tr> <td class="fc-resource-area fc-widget-content" style="width: 15%;"><div class="fc-scroller-clip"><div class="fc-scroller" style="overflow-x: auto; overflow-y: scroll; height: 865px; margin: 0px -15px 0px 0px;"><div class="fc-scroller-canvas" style="min-width: 70px;"> <div class="fc-content"><div class="fc-rows"> <table class=""><colgroup><col class="fc-main-col"></colgroup><tbody><tr><td class="fc-divider" colspan="1"><div style="height: 36px;"><div class="fc-cell-content"><span class="fc-expander"><span class="fc-icon fc-icon-down-triangle"></span></span><span class="fc-cell-text">AEMO37 - AEMO Renforcé</span></div></div></td></tr><tr data-resource-id="2205411361"><td class="fc-widget-content"><div style="height: 36px;"><div class="fc-cell-content"><span class="fc-icon"></span><span class="fc-expander-space"><span class="fc-icon"></span></span><span class="fc-cell-text"><a href="/people/22054/movements" title="validé le "> BRIZIOU Océane</a></span></div></div></td></tr><tr><td class="fc-divider" colspan="1"><div style="height: 36px;"><div class="fc-cell-content"><span class="fc-expander"><span class="fc-icon fc-icon-down-triangle"></span></span><span class="fc-cell-text">AEMO37 - AEMO</span></div></div></td></tr><tr data-resource-id="2205411362"><td class="fc-widget-content"><div style="height: 36px;"><div class="fc-cell-content"><span class="fc-icon"></span><span class="fc-expander-space"><span class="fc-icon"></span></span><span class="fc-cell-text"><a href="/people/22054/movements" title="validé le "> BRIZIOU Océane</a></span></div></div></td></tr></tbody> </table> </div></div> <div class="fc-bg"></div> </div></div></div></td> <td class="fc-divider fc-col-resizer fc-widget-header"></td> <td class="fc-time-area fc-widget-content"><div class="fc-scroller-clip"><div class="fc-scroller" style="overflow: auto; height: 865px; margin: 0px;"><div class="fc-scroller-canvas" style="width: 0px; min-width: 1394px;"> <div class="fc-content"><div class="fc-rows"> <table class=""> <tbody><tr><td class="fc-divider"> <div style="height: 36px;"></div> </td></tr><tr data-resource-id="2205411361"><td class="fc-widget-content"> <div style="height: 36px;"> <div class="fc-event-container" style="height: 22px;"><a class="fc-timeline-event fc-h-event fc-event fc-start fc-not-end" style="background-color: rgb(221, 225, 246); border-color: rgb(221, 225, 246); left: 1145px; right: -1394px; top: 0px; color: black;" data-original-title="" title=""><div class="fc-content"><span class="fc-time">15:45</span><span class="fc-title" style="top: 0px; left: 0px;">Suspend de P.E.C.(S)</span></div><div class="fc-bg"></div></a></div> <div class="fc-bgevent-container"><div class="fc-bgevent" style="background-color: rgb(142, 243, 91); left: 0px; right: -1394px;" data-original-title="" title=""></div></div></div> </td></tr><tr><td class="fc-divider"> <div style="height: 36px;"></div> </td></tr><tr data-resource-id="2205411362"><td class="fc-widget-content"> <div style="height: 36px;"> <div class="fc-event-container" style="height: 0px;"></div> <div class="fc-bgevent-container"><div class="fc-bgevent" style="background-color: rgb(142, 243, 91); left: 0px; right: -1394px;" data-original-title="" title=""></div></div></div> </td></tr></tbody> </table> </div></div> <div class="fc-bg"><div class="fc-slats"><table class=""><colgroup><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col style="width: 44px;"><col></colgroup><tbody><tr><td class="fc-widget-content fc-wed fc-past fc-day" data-date="2018-08-01"><div></div></td><td class="fc-widget-content fc-thu fc-past fc-day" data-date="2018-08-02"><div></div></td><td class="fc-widget-content fc-fri fc-past fc-day" data-date="2018-08-03"><div></div></td><td class="fc-widget-content fc-sat fc-past fc-day" data-date="2018-08-04"><div></div></td><td class="fc-widget-content fc-sun fc-past fc-day" data-date="2018-08-05"><div></div></td><td class="fc-widget-content fc-mon fc-past fc-day fc-em-cell" data-date="2018-08-06"><div></div></td><td class="fc-widget-content fc-tue fc-past fc-day" data-date="2018-08-07"><div></div></td><td class="fc-widget-content fc-wed fc-past fc-day" data-date="2018-08-08"><div></div></td><td class="fc-widget-content fc-thu fc-past fc-day" data-date="2018-08-09"><div></div></td><td class="fc-widget-content fc-fri fc-past fc-day" data-date="2018-08-10"><div></div></td><td class="fc-widget-content fc-sat fc-past fc-day" data-date="2018-08-11"><div></div></td><td class="fc-widget-content fc-sun fc-past fc-day" data-date="2018-08-12"><div></div></td><td class="fc-widget-content fc-mon fc-past fc-day fc-em-cell" data-date="2018-08-13"><div></div></td><td class="fc-widget-content fc-tue fc-past fc-day" data-date="2018-08-14"><div></div></td><td class="fc-widget-content fc-wed fc-past fc-day" data-date="2018-08-15"><div></div></td><td class="fc-widget-content fc-thu fc-past fc-day" data-date="2018-08-16"><div></div></td><td class="fc-widget-content fc-fri fc-past fc-day" data-date="2018-08-17"><div></div></td><td class="fc-widget-content fc-sat fc-past fc-day" data-date="2018-08-18"><div></div></td><td class="fc-widget-content fc-sun fc-past fc-day" data-date="2018-08-19"><div></div></td><td class="fc-widget-content fc-mon fc-past fc-day fc-em-cell" data-date="2018-08-20"><div></div></td><td class="fc-widget-content fc-tue fc-past fc-day" data-date="2018-08-21"><div></div></td><td class="fc-widget-content fc-wed fc-past fc-day" data-date="2018-08-22"><div></div></td><td class="fc-widget-content fc-thu fc-past fc-day" data-date="2018-08-23"><div></div></td><td class="fc-widget-content fc-fri fc-past fc-day" data-date="2018-08-24"><div></div></td><td class="fc-widget-content fc-sat fc-past fc-day" data-date="2018-08-25"><div></div></td><td class="fc-widget-content fc-sun fc-past fc-day" data-date="2018-08-26"><div></div></td><td class="fc-widget-content fc-mon fc-past fc-day fc-em-cell" data-date="2018-08-27"><div></div></td><td class="fc-widget-content fc-tue fc-past fc-day" data-date="2018-08-28"><div></div></td><td class="fc-widget-content fc-wed fc-past fc-day" data-date="2018-08-29"><div></div></td><td class="fc-widget-content fc-thu fc-past fc-day" data-date="2018-08-30"><div></div></td><td class="fc-widget-content fc-fri fc-past fc-day" data-date="2018-08-31"><div></div></td></tr></tbody></table></div></div> </div></div></div></td> </tr> </tbody> </table></div></div></div>

问题 :

没有背景颜色a.fc-eventdiv.fc-bgevent甚至我在打印前选择了“背景图形”。

标签: cssfullcalendarfullcalendar-scheduler

解决方案


推荐阅读