во время печати календаря в Google Chrome, граница не отображается

Question

Когда я пытаюсь распечатать fullCalendar в Google Chrome, его граница не отображается.

Я разместил запрос печати @media, чтобы установить цвет и ширину границы. ниже мой код для медиа-запроса.

@media print { 
     #briefingCalendar { width: 9in; margin-left:0px !important;} 
     .fc-widget-header, .fc-widget-content{ border: 1px solid #ccc !important;} 

    } 

прилагается моментальный снимок моего календаря без границ.

Ниже приведен код зрения печати для моей fullCalendar.

<?php 
$baseUrl = Yii::app()->baseUrl; 
$cs = Yii::app()->getClientScript(); 
$cs->registerCssFile($baseUrl . '/css/jquery-ui-multiselect/jquery.multiselect.css', 'screen, projection'); 
$cs->registerCssFile($baseUrl . '/css/jquery-ui-multiselect/jquery.multiselect.filter.css', 'screen, projection'); 
$cs->registerCssFile($baseUrl . '/css/jquery-ui-multiselect/style.css', 'screen, projection'); 
$cssCoreUrl = $cs->getCoreScriptUrl(); 
$cs->registerCssFile($cssCoreUrl . '/jui/css/base/jquery-ui.css'); 
$cs->registerScriptFile($baseUrl . '/javascript/jquery-ui-multiselect/jquery.multiselect.js'); 
$cs->registerScriptFile($baseUrl . '/javascript/jquery-ui-multiselect/jquery.multiselect.filter.js'); 

$cs->registerScriptFile($baseUrl . '/javascript/fullcalendar/fullcalendar.js'); 
$cs->registerScriptFile($baseUrl . '/javascript/jquery.printelement.js'); 
$cs->registerCssFile($baseUrl . '/css/fullcalendar/fullcalendar.css'); 
$cs->registerCssFile($baseUrl . '/css/screen.css', 'print'); 
$cs->registerScriptFile($baseUrl . '/javascript/week_calendar/date.js'); 
$cs->registerScriptFile($baseUrl . '/javascript/sticky.js'); 

$cs->registerCss('calendar-print', ' 
    @media print { 
     #briefingCalendar { width: 9in; margin-left:0px !important;} 
     .fc-widget-header, .fc-widget-content{ border: 1px solid #ccc !important;} 

    } 
'); 

$date = DateTime::createFromFormat('Y-m-d', $_GET['startDate']); 
$formatDate = "<h2>".$date->format('F Y')."</h2>"; 

?> 
<div id="loading" style="margin-left: 0px; width: 9in;"></div> 
<div id="briefingCalendar" style="margin-left: 0px; width: 9in;"></div> 

<script type="text/javascript"> 

    var isCurrentBriefingCenterForTitles = '<?php echo $this->isCurrentBriefingCenterForCustomEventsTitle(Yii::app()->user->currentBriefingCenterId); ?>'; 

    $(document).ready(function() { 
     $('#briefingCalendar').fullCalendar('destroy').fullCalendar({ 
      loading: function(bool) { 
       if (bool){ 
        $('#loading').html("<div class='alert'><b> Loading calender data, please wait... </b></div>"); 
       } 
       else{ 
        $('#loading').hide(); 
        setTimeout(function(){printCalendar();}, 1000); 
       } 
      }, 

      year: '<?php echo date('Y', strtotime($startDate)) ?>', 
      month: '<?php echo date('m', strtotime($startDate)) - 1 ?>', 
      date: '<?php echo date('d', strtotime($startDate)) ?>', 
      defaultView: '<?php echo $view ?>', 
      timeFormat: { 
       'month': 'h(:mm)t{-h(:mm)t}', 
       'week': 'hh:mmtt{ - hh:mmtt}', 
       'day': 'hh:mmtt{ - hh:mmtt}' 
      }, 
      header: { 
       right: '', 
       center: 'title', 
       left: '' 
      }, 
      events: { 
       url: '<?php echo $this->createUrl('events') ?>' + '&type=mini&<?php echo $queryStr ?>', 
       borderColor: 'black' 
      }, 
      eventRender: function (event, element) { 
       element.find('.fc-event-title').html(renderEvent(event)); 
      }, 
      viewDisplay: resizeCalendar, 
      lazyFetching: false, 
      disableResizing: false 

     }); 
    }); 

    $('.fc-header-right').css('vertical-align', 'middle').html($('div#calendarOptions div.options').html()); 
    $('.fc-header-left').append($('div#fullCalendarOptions').html()); 

    function renderEvent(event) { 
     var data = ''; 
     if (!event.data.cn) { 
      var resultTime = ""; 
      if (event.data.Time) { 
       var startFormat = "am"; 
       var endFormat = "am"; 
       var time = event.data.Time.split("-"); 
       var startHours = parseFloat(time[0].substr(0, 3)); 
       var startMinutes = parseFloat(time[0].substr(3, 2)); 
       if (startHours >= 12) { 
        startHours -= 12; 
        startFormat = "pm"; 
       } 

       if (startHours == 0) 

        startHours = 12; 

       var endHours = parseFloat(time[1].substr(0, 3)); 
       var endMinutes = parseFloat(time[1].substr(4, 2)); 
       if (endHours >= 12) { 
        endHours -= 12; 
        endFormat = "pm"; 
       } 
       if (endHours == 0) 
        endHours = 12; 
       resultTime += startHours; 

       if (startMinutes != 0) { 

        if (startMinutes < 10) { 
         resultTime += ":0" + startMinutes; 
        } 
        else 
         resultTime += ":" + startMinutes; 
       } 
       if (startFormat != endFormat) 
        resultTime += startFormat; 
       resultTime += "-" + endHours; 
       if (endMinutes != 0) { 
        if (endMinutes < 10) { 
         resultTime += ":0" + endMinutes; 
        } 
        else 
         resultTime += ":" + endMinutes; 
       } 
       resultTime += endFormat; 

      } 

      if (isCurrentBriefingCenterForTitles) { 
       data = "<div class='cal-event'>" + 
        "<div class='head'>" + 
        "<img src='<?php echo $baseUrl ?>/images/briefing_status/" + event.data.statusIcon + "'>" + 
        "<span class='title'>" + event.title + "</span>" + 
        "</div>" + 
        "<div class='desc'>" + 
        "<label><i>Type: </i>" + event.data.visitType + "</label>" + 
        "<label><i>Eng: </i>" + event.data.techSupportEmail + "</label>" + 
        "<label><i>Loc: </i>" + event.data.briefingLoc + "</label>" + 
        "</div>" + 
        "</div>"; 
      } else { 
       data = "<div class='cal-event'>" + 
        "<div class='head'>" + 
        "<img src='<?php echo $baseUrl ?>/images/briefing_status/" + event.data.statusIcon + "'>" + 
        "<span class='title'>" + event.title + "</span>" + 
        "</div>" + 
        "<div class='desc'>"; 

       if (event.data.vesBriefingManager == null) { 
        data += "<label><i>Req: </i>" + event.data.RQ + "</label>"; 
       } 

       if (event.data.briefingManager && event.data.briefingManager != '' && event.data.briefingManager.name != '') { 

        var briefingManager = ""; 

        $.each(event.data.briefingManager, function(index, value){ 
         briefingManager += (value && value != "") ? value + ", " : ""; 
        }); 

        data += "<label><i><?php echo Yii::app()->settings->get("briefing", "customMgrField"); ?> </i>" 
         + briefingManager.replace(/,(\s+)?$/, '') 
         + "</label>"; 
       } 

       if (event.data.vesBriefingManager != null) { 
        data += "<label><i>VES Mgr: </i>" + event.data.vesBriefingManager + "</label>"; 
       } 

       data += "<label><i>Loc: </i>" + event.data.briefingLoc + "</label>"; 

       if (event.data.tourTime != null) { 
        data += "<label><i>Tour Time: </i>" + event.data.tourTime + "</label>"; 
       } 

       if (event.data.vicBriefingManager != null) { 
        data += "<label><i>Tour Host: </i>" + event.data.vicBriefingManager + "</label>"; 
       } 

       data += "</div>" + 
        "</div>"; 
      } 

     } else { 
      data = "<div class='cal-event'>" + 
       "<div class='head'>" + 
       "<img src='<?php echo $baseUrl ?>/images/calendar_note/" + event.data.noteType + "'>" + 
       "<span class='title'>" + event.title + "</span>" + 
       "</div>" + 
       "</div>"; 
     } 
     return data; 
    } 

    function resizeCalendar() { 
     var currentView = $('#briefingCalendar').fullCalendar('getView'); 
     if(currentView.name === 'agendaWeek' || currentView.name === 'agendaDay') { 

      currentView.setHeight(2000); 
      $(".fc-header-center").html(''); 
     }else if(currentView.name === 'month'){ 
      $(".fc-header-center").html('<?php echo $formatDate; ?>'); 
     } 

    } 

    function printCalendar() 
    { 
     $("#briefingCalendar").printElement(
      { 
       overrideElementCSS:[ 
        { href:'<?php echo $baseUrl . '/css/fullcalendar/fullcalendar.css'; ?>',media:'print'} 
       ], 
       printMode:'iframe' 

      }); 
    } 

</script> 

Answer 1

overrideElementCSS принимает 3 параметра и я назначая только два параметра. Ниже приведен правильный способ использования overrideElementCSS.

$("selector").printElement(
      { 
      overrideElementCSS:[ 
     'thisWillBeTheCSSUsed.css', 
     { href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}] 
      }); 

Взято из [http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/]