css - 在谷歌浏览器中打印日历时，边框不显示

Question

当我尝试在 google chrome 中打印 fullCalendar 时，它的边框没有显示。

我放置了@media 打印查询来设置边框颜色和宽度。下面是我的媒体查询代码。

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

     }

附件是我的无边框日历快照。

下面是我的 fullCalendar 的打印 View 代码。

<?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/]