while printing calendar in google chrome, border are not showing up - css

Question

When I try to print the fullCalendar in google chrome its border are not showing up.
I've placed the #media print query to set border color and width. below is my code for media query.
#media print {
#briefingCalendar { width: 9in; margin-left:0px !important;}
.fc-widget-header, .fc-widget-content{ border: 1px solid #ccc !important;}
}
attached is the snapshot of my calendar without borders.
Below is the code of print view for my 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 accepts 3 parameters and I was assigning only two parameters.
Below is the proper way to use overrideElementCSS.
$("selector").printElement(
{
overrideElementCSS:[
'thisWillBeTheCSSUsed.css',
{ href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}]
});
Taken from [http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/]