| Issue 35: | Problems with printing | |
| 43 people starred this issue and may be notified of changes. | Back to list |
What steps will reproduce the problem? 1. In IE7, print the document and select "Landscape" for printing. The events is all missing. What is the expected output? What do you see instead? Events can be shown in printing in IE7. What version of the product are you using? On what operating system? your latest version 1.2 and IE7 in XP latest SP Please provide any additional information below.
Aug 30, 2009
Project Member
#1
adamrs...@gmail.com
Nov 27, 2009
Issue 137 has been merged into this issue.
Nov 27, 2009
fullcalendar is due for a case study on printing in IE. might be able to achieve this through CSS tricks in fullcalendar.css, but will probably require more drastic measures such as: - a completely different stylesheet for printing (media='print') - a "print" button that renders the calendars via different print-safe mechanisms and puts it in a popup w/ a print dialog
Summary:
Problems with printing in IE
Status: Accepted Labels: -Priority-Medium
Dec 2, 2009
HI Adam, I tried to use the jQuery printElement plug in with the calendar, but it's not working.... I think the printElement has to be a function within the fullcalendar object. Can you please give that some thought or try it out? We want to use the fullcalender in our project, but can't really put it on production if it can't print nicely. Thanks Annie
Dec 9, 2009
Hi Adam,
I picked your calendar because it was working and looking very good but the main
feature for my application is that has to be printable on most browsers, including IE.
Since the css background-color property is not working for printing I made some
images with different colors for all days from a month.(All days from displayed
calendar has an event attached).
When I take a print preview I have the following problem:
The boxes with the events are not fitting the day box, from row to row they are going
down, breaking the fit of the events display.
I attached a picture with what I'm having trouble.
I have a red and a white square images which I render them with this method:
"
eventRender: function(event, eventElement) {
if (event.imageurl) {
if (eventElement.find('span.fc-event-time').length) {
eventElement.find('span.fc-event-time').before($(event.imageurl));
} else {
eventElement.find('span.fc-event-title').before($(event.imageurl));
}
}
}"
Please help me with a solution for this. As you can see the events are going down a
bit slowly slowly and breaks the position from the cells.
The calendar has to be printable with all events inside :(
Dec 9, 2009
sorry for posting again but I have to say that this thing is happening no matter if I print preview from mozilla or IE
Dec 20, 2009
I unfortunately have to confirm this... I am unable to print the agendaWeek or agendaDay view in either IE or Firefox. I can print it in Chrome / Safari though. Firefox didn't have a problem printing the Month view though, I didn't try IE.
Jan 19, 2010
Issue 278 has been merged into this issue.
Jan 20, 2010
I am trying to add/Edit/Delete Event,add/Edit/Delete of the event is not working with IE8,but same is working in Mozilla.Please let me know the how i can make this work with IE8. Please help me.it is critical.
Feb 5, 2010
hsiaoisun, i think the printElement plugin just sends the element to the printer. looks like you can give it an alternate stylesheet though, but think that is too simple for fullcalendar. i will look into this problem more for the next release. i haven't assessed all the solutions yet, so i can't say how long it will take. will keep this thread updated.
Summary:
Problems with printing
Apr 7, 2010
Hi adam, First of all thanks for the amazing calendar. Are there any news about the print solution? Best André
May 5, 2010
Yep - chiming in with another "boy we really need this". :)
May 5, 2010
i was able to make a css file with stripped out areas so it makes a plain Jane calendar. then i was able to import using fetch url via adobes acrobat(pdf). this sorta makes a printable/savable calendar. but its still not right i really wish i had money id surely pay for a workable print routine, the church project im working on is really upset they cant print the calendar correctly. and is about ready to force me to look for another calendar project or go back to Google(does not really work right either and no mysql entries) too much work to change to another calendar. i have it reading from mysql just fine now, really need to work on recurring events entry too(but another story) i REALLY cant stress enough how important this is to print the calendar in pdf format.
May 30, 2010
ive had others contact me to say there are ways to use a pdf class to make the calendar printable, but i have as of yet to reinvent a way to display the info. i have used adobe acrobat to make a saved monthly calendar(ONLY firefox displays the correct info and can strip out the header and page/date info) google chrome renders a bit better. i have had supper problems getting it to work right. it drops lines for the day boxes, it overlaps the info all sorts of problems is there a way to make PLAIN Jane HTML render as a page instead of the loaded java/jquery what ever it is info for the render inside the calendar div, this way it can be manipulated on the page and a header and footer info can be make to a html render of the calendar and even ccs formating. as it stands its almost impossible to adjust the info with out hacking the css and trying to hit and miss to get it all to work, not knowing where css is as i cant read raw html to see the section to adjust. and its also very hard for adobe to convert to a printable calendar too, then to size it just right so we can add custom hears and footers its down right hair pulling messed up. i SERIOUSLY do not want to goto another calendar or to make my own, but this is just stupid to try and work this way, and it really needs a way to print the calendar. what is needed to make this work..im all in to help im all in to test im at wits end and really angry i cant get it to work frustrated. i need this to work or i HAVE to do something else. trying to hit and miss and fabricate a way to do this is not cutting it
Jun 1, 2010
Any news about pdf printing? Or an html print friendly page? Thanks again adam for the amazing project
Jul 16, 2010
I'm going to tag along with this, any news so far? Thanks in advance.
Aug 7, 2010
I desperatly need this too. Any News? Perhaps a plain version of the calender for printing purposes is the best shot?
Sep 9, 2010
Any news? This feature is long overdue. Please update us on the status. Thanks
Sep 9, 2010
I made a simple work-around. It's certainly not ideal but it works most of the time for me. I added a print button to the page that resizes the calendar to fit a page, prints it, and returns the calendar to normal size.
If you have a lot of events, or long event titles, so that the calendar takes up more than one page then this will not work for you (or you'll only get the first page printed). Also this seems to only work correctly in FireFox.
function print_calendar()
{
// save current calendar width
w = $('#calendar').css('width');
// prepare calendar for printing
$('#calendar').css('width', '6.5in');
$('.fc-header').hide();
$('#calendar').fullCalendar('render');
window.print();
// return calendar to original, delay so the print processes the correct width
window.setTimeout(function() {
$('.fc-header').show();
$('#calendar').css('width', w);
$('#calendar').fullCalendar('render');
}, 1000);
}
Jan 24, 2011
hello everyone. thanks for chiming in with your frustrations and suggestions. i want to attack this feature for the next version of fullcalendar. are you still having trouble with latest version of fullcalendar? are you still having problems in IE8 and the latest versions of firefox? it would be VERY helpful if you could send me screenshots of messed up calendars in your "Print Preview" dialog box, or send me a PDF printout of the situation. this way, I have something more to work off of. thanks!
Jan 25, 2011
Attached is a PDF generated from FF 4 on Mac OS X. The saturday column is always squished and the second page has no events. (there are events on every single day of the calendar). Also there is no text (not sure why.. rather odd) Agenda views things seem to print mostly ok. It only prints the top (or visible) portion of the agenda since the agents overflows the height of the calendar.
Jan 26, 2011
Issue 807 has been merged into this issue.
Feb 1, 2011
i've just made some modifications that improve fullcalendar for printing. the main problem that has been fixed is when text on the events doesn't show up. also, there is now a printer-specific stylesheet that makes events more suited to printing (changes their borders and backgrounds). Try the demos/*.html files in the attached zip, or import the necessary fullcalendar files into your projects. the problem that still remains is when the calendar overflows a single page and either gets cut off completely (and squishes columns) or spans to another page (event positioning sometimes weird). mark.bos.., i will look into your approach a little more. but i think so far i've solved most of the problem. please let me know if this is a step in the right direction. thanks!
Feb 1, 2011
Testing in FF 4 beta 10, I'm getting less in the print version than before.. I get the "previous month" arrow, today button, and the month name, and nothing else. On the other hand.. your website prints perfectly..
Mar 20, 2011
i just released v1.5 which may/may-not have improved the printing situation for you. during my testing, it improved everything for me. the notable exception is in IE when i was doing landscape mode specifically, the events dont appear. to try to see these improvements, you'll need to use the fullcalendar.print.css that is included with the download. To 100% solve the printing problem, there will need to be some major changes with the way events are rendered. they will need to be children of the individual table cells, not just absolutely positioned on top of everything. this is a pretty major change, but i will start working on it as soon as i fix any bugs related to 1.5.
Mar 21, 2011
And of course the issue with making the events children of the individual table cells is you lose the "spanning multiple days" style event look. So, it most likely needs to be a separate "print view rendering" in a new window (if possible). Or do what google does with their calendar. Render it as a PDF server side and send that to the user for printing.
Mar 21, 2011
Hi Adam, Along the lines of the previous comment -- if you're going to radically change how events are rendered, could you consider doing this in a separate "print view rendering" if possible? I, and probably other people also, rely more than we should on the details of how the calendar is rendered to implement features not currently offered by fullcalendar. Thanks!
Mar 21, 2011
sorry i didn't clarify before. the changes in rendering will be internal only. everything will LOOK the same as before. i'm thinking of absolutely positioning the elements (so they can still span multiple days) but from within the cells. that might solve the printing problem. if i still can't get it to work, i might consider some crazier options (pdf output or "print" view) but i'd like to try to retrofit the current codebase first.
Mar 30, 2011
@adam Just peaking at this feature, retrofitting is definitely idea, I see you shipped a @Media Print Stylesheet with 1.5, which looks great, a lot of similar changes to what I was trying to do via may own sheet for printable functionality! I'm curious if you've seen anyone do any work with resizing to get the maximum possible printed area out of the calendar in either a portrait or landscape page. I've been playing with the CSS a lot but even hard-coded to a specific size I always get a different bit of clipping along some of the sides with different browser/print combinations.
Apr 13, 2011
Attaching some printed PDFs directly with the following settings. One of the strangest issues I'm having is text and or outline bars disappearing when the calendar wraps onto two pages, say for example, if enough events are added to a single week (month view). Another issue: cross-browser compatibility is an issue. Each browser treats the calendar slight different. But in general Firefox and IE tend to try to 'repeat' the <th> in month view onto a second page like a 'table' being printed across multiple pages.
Jun 15, 2011
I noticed that the text disappearing on FF4 can be solved by adding:
.fc-event-inner {
overflow: visible !important;
}
to the print stylesheet
Unfortunately that does not solve the disappearing events on page 2+
Jun 20, 2011
WHen I try to print 3 months of a calendar, there is no print button on the preview screen to start the print...what to do?
Sep 10, 2011
On Ubuntu I can print fine with Chromium but in Firefox when the calendar takes up more then one page the text on events disappears and the bottom part of the calendar on the first page looks "funky".
Sep 10, 2011
(Firefox printing issue) Forgot to mention that I m using Fullcalendar 1.5.1, haven't tried 1.5.2 but I suspect it's the same there.
Nov 28, 2011
Is there any movement on this issue? The lack of print capability is KILLING me. I've tried everything I know to try but nothing seems to work. I've spent most of my time trying to control the printing through CSS but the events don't respond.
Nov 28, 2011
I haven't seen much. Basically managing the way a page prints from a browser is almost impossible due to a lack of standardization across multiple browsers. If it's at all possible, you might consider rendering a PDF on the server (if that's a function of your platform) and returning it to the user before printing (this is what Google does to get uniform print capabilities).
Nov 28, 2011
Ouch...thanks for the reply. Ray
Mar 7, 2012
Is there any update on the print functionality in IE? Thanks.
Apr 21, 2012
Can't we implement a hidden, simpler, non-interactive fullcallendar widget alongside the current one that gets shown through adding a: <link rel='stylesheet' type='text/css' href='/css/fullcalendar.print.css' media='print'> ..when the user prints. That way we don't have to generate PDF files on the server and stuff like that, and probably get a consistent look across browsers when printing.
Apr 21, 2012
gets shown in the printing output through having print CSS file I mean.
May 31, 2012
We love fullCalendar and are using it on a very exciting project! But see there is an issue with printing in IE9, where the first page of the calendar prints fine but on the second page all the events overlap and are unreadible. When will there be a fix for this? also does anyone know when the next release of full calendar is coming out?? Thanks James
Jul 12, 2012
Here is a javascript snipit that expands on the code in comment #19 above. It resizes the calendar when the script detects a print command (regardless of where the command is issued) the resets it back to it's original size after printing. I tested this in the latest versions of both Safari and Firefox. It should also work in IE and Chrome.
I added the block right after "$(function() {" and before "$('#calendar').fullCalendar({"
w = $('#calendar').css('width');
var beforePrint = function() {
// prepare calendar for printing
$('#calendar').css('width', '7.5in');
$('#calendar').fullCalendar('render');
};
var afterPrint = function() {
$('#calendar').css('width', w);
$('#calendar').fullCalendar('render');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
Aug 20, 2012
rloates, your method works well for me. Of course, printing agendaWeek is still terribly borked but at least my users can print the calendar. damned tree eaters...
Sep 4, 2012
For chrome browsers you can add:
-webkit-print-color-adjust:exact;
to the .fc-event-inner css ie:
.fc-event-inner
{
-webkit-print-color-adjust:exact;
position: relative;
width: 100%;
height: 100%;
border-style: solid;
border-width: 0;
overflow: hidden;
}
Sep 5, 2012
hey folks so disapppointed that the "agendaWeek" doesnt work for printing. here is a screeneshot. the events seem to span over more than one day - even though the calendar (kind of) fits into the page. this means that wednesday events and onwards are "off the chart" so to speak... would be happy to hear ANY ideas! LINK: http://img31.imageshack.us/img31/8441/databasew.jpg
Sep 30, 2012
I'm having trouble getting the fullcalender to print all events when the display is set to Agenda format (fullcalendar 1.5.4, IE9.0.10). It will print onto one page, but it wants to start printing from 12:00AM (even with minTime set to 6:00), cutting off the remainder of the day. I think the actual look of the printout is probably good enough for us, as long as all of the events for each day will actually print. An image of the printed agenda, with times from around 0900 through to 1800 missing: http://www.flickr.com/photos/87880630@N06/8041434552/in/photostream
Jan 18, 2013
Using IE8. Having the issue of the first page not printing when the calendar should print on multiple pages. Prints fine if all fits onto one page. I am using David Marko's Mobile Calendar Application (http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&documentId=F0A2150A293C56438625794A003270D8) which implements Shaw's FullCalendar into an IBM Lotus Domino database. I was able to correct the issue with the following changes: A. In m_page_layout_template Custom Control, add overflow property to div. Should be able to see calendar grid and days but not events after this change: <div data-role="content" style='overflow:visible;'> For those not implementing in Domino, this may correspond to the .type-interior or .ui-content classes. B. In fullcalendar.css, change overflow property’s value to ‘visible’ in fc-view class: .fc-view { width: 100%; /* needed for view switching (when view is absolute) */ overflow: visible; } Thanks for the previous tips on this issue tracker page especially to #31 Jeff Nelson (Synthe) for pointing me in the right direction. I'm not familiar with a pure implementation of FullCalendar (without Domino) but I hope this helps others.
Aug 13, 2013
(No comment was entered for this change.)
Labels:
-Type-BehaviorMod Type-Bug
Aug 24, 2013
Issue 1865 has been merged into this issue.
Jun 10, 2014
Issue 2178 has been merged into this issue.
Jun 10, 2014
Issue 2178 brings up the flaw about when the calendar is liquid width, when you go to print, the events' y coordinates are misaligned.
Jun 10, 2014
correction: their y coordinates are fine, their *widths* are wrong
Jun 15, 2014
(No comment was entered for this change.)
Labels:
milestone-skeleton
Jul 16, 2014
The part of the script where the fc-event gets absolute positioned (top, left) based on the table cells does not get re-triggered when the print action is called (at least, this is the behaviour on Chrome 35) and this is what causes the offset on the printed layout. I'm not a beast regarding JS so I don't have any solutions to that yet (hope to get it figured out...), but I tried calling ".fullCalendar( 'render' )" when print.css gets used but does not seem to recalculate the positions :( Code on post #42 only worked in chrome devtool (with emulation of css media on), when previewing print page, same problem occurs (see Adam's pictures).
Jul 16, 2014
This is how I managed to fix the layout problem!
w = $('#calendar').css('width');
var renderEvent = function() {
// prepare calendar for printing
$('#calendar').css('width', w);
$('#calendar').fullCalendar('render');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
renderEvent();
} else {
renderEvent();
}
});
}
window.onbeforeprint = renderEvent;
window.onafterprint = renderEvent;
$(window).resize(function(){$('#calendar').css('width', '100%');});
Jul 16, 2014
Sorry for the post again, forgot to add:
Place the above code before calling $('#calendar').fullCalendar({ ... });
Jul 23, 2014
It has taken me a while, but I have implemented this the "right way" with a refactor of the HTML/CSS skeleton: http://blog.arshaw.com/1/post/2014/07/fullcalendar-210-beta.html Please try out the beta. The calendar is now liquid-width without needing JavaScript. This was the root solution for most of the problems. Also, no more absolute positioning of things. AS BEFORE, THE fullcalendar.print.css STYLESHEET IS NEEDED. The print stylesheet for the agenda views has taken quite a visual departure. A time grid so longer used. Timed event simply degrade to stacking in a list for each day. Would like to get your opinion on how this looks. There are also minor visual departures for month view, mostly with the height of the weeks. Also, buttons in the header become hidden.
Jul 25, 2014
I've prepared a jsFiddle at http://fiddle.jshell.net/wijgerden/ULvva/ to demonstrate the FullCalendar v2.1.0-beta implementation. Best use http://fiddle.jshell.net/wijgerden/ULvva/show/light/ and the browser Print / Print Preview after selecting your view to see the printing effect. To possibly get more pages, I've added extra "Event 1" ... "Event 20" events with longer titles to help on 2014-06-12 (some of which span into 2014-06-13); where 2014-06-12 also is the defaultDate on this demo.
Jul 28, 2014
Thanks a lot @van.wijgerden. I gotta investigate the weird problem in your demo where those last events at the end (before anything print-related happens) get scrunched up.
Aug 11, 2014
Don't worry Adam, the "scrunched up" is due to the fact that there are many parallel events: namely 10 of them, more or less around the same time. I've updated the fiddle to pinpoint to the v2.1.0-beta1 resources and made the width and height auto-size. Using http://fiddle.jshell.net/wijgerden/ULvva/show/light/ to view the result, resize the browser to very wide and you will see the 10 events that cross midnight: events 11 up to and including 20. Printing works and shows their continuation using dots.
Aug 11, 2014
A small NEW problem with printing occurs using the "more..." option in FullCalendar 2.1.0-beta2 when the user has expanded "+X more" as per https://code.google.com/p/fullcalendar/issues/detail?id=304 Steps for reproducing: 1. open http://fiddle.jshell.net/wijgerden/ub5uqcbv/show/light/ 2. note that Thu 12 June 2014 has "+17 more" events than shown 3. request print preview of browser, e.g. using [CTRL]+[p] 4. note that all looks fine for printing (the many events are shown on Thu 12 June 2014 as expected) 5. cancel the print/print preview to return to the month view 6. click on "+17 more" to open a popover seeing all events 7. keep the popover open (visible as expanded) 8. request print preview of browser, e.g. using [CTRL]+[p] 9. observe the 20 events on Thu 12 June 2014 to be shown twice; once properly on the proper grid location; but also another time in some popover location (may depend on page orientation) Expect: not to see the "more..." popover in print/print preview Problem: printing is not proper when user hase "more..." open Workaround: user can easily print (again) with popover closed See JSFiddle at http://jsfiddle.net/wijgerden/ub5uqcbv/ best tested via http://fiddle.jshell.net/wijgerden/ub5uqcbv/show/light/
Aug 12, 2014
The problem I see with the new print mode is that now the users cannot see the intervals between the events. If I have an event at 10~11 and another at 14~15, the user will not see the "free time" between 11 and 14. They are used to visually check the free times. Will it be possible to revert to the old position way of printing?
Aug 14, 2014
@van.wijgerden, thanks for the report. I can verify. I've made a separate issue for this: Issue 2242 . Thanks @ateista, I understand what you mean, but what you describe requires absolute positioning, which is very buggy and inconsistent across browser when doing printing. I made a conscious decision to forgo this. Also saves paper too :) But to get what you want, you might think about not using the provided print stylesheet at all, or modifying it at least.
Aug 14, 2014
(No comment was entered for this change.)
Status:
Implemented
Aug 26, 2014
This issue has been resolved with the official release of v2.1.0: http://blog.arshaw.com/1/post/2014/08/fullcalendar-210-released.html Please post any follow-up bug reports or feature requests as separate issues. Thanks.
Status:
Released
|
|
| ► Sign in to add a comment |