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.

eddiechankaitai, i am VERY sorry for not responding to this report for SUCH a long time. i have just been procrastinating this bug b/c it seems like a very hard thing to fix (if not impossible), but to be fare, i have not even investigated it. i will do this before releasing the next release. -adam

Issue 137 has been merged into this issue.

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

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

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 :(

sorry for posting again but I have to say that this thing is happening no matter if I print preview from mozilla or IE

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.

Issue 278 has been merged into this issue.

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.

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.

Hi adam, First of all thanks for the amazing calendar. Are there any news about the print solution?

Best André

Yep - chiming in with another "boy we really need this". :)

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.

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

Any news about pdf printing? Or an html print friendly page? Thanks again adam for the amazing project

I'm going to tag along with this, any news so far? Thanks in advance.

I desperatly need this too. Any News? Perhaps a plain version of the calender for printing purposes is the best shot?

Any news? This feature is long overdue. Please update us on the status. Thanks

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);

}

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!

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.

Issue 807 has been merged into this issue.

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!

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..

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.

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.

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!

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.

@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.

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 in month view onto a second page like a 'table' being printed across multiple pages.

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+

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?

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".

(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.

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.

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).

Ouch...thanks for the reply.

Ray

Is there any update on the print functionality in IE? Thanks.

Can't we implement a hidden, simpler, non-interactive fullcallendar widget alongside the current one that gets shown through adding a:

..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.

gets shown in the printing output through having print CSS file I mean.

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

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;

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...

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; }

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

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

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: 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.

Comment deleted

Issue 1865 has been merged into this issue.

Issue 2178 has been merged into this issue.

Issue 2178 brings up the flaw about when the calendar is liquid width, when you go to print, the events' y coordinates are misaligned.

correction: their y coordinates are fine, their widths are wrong

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).

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%');});

Sorry for the post again, forgot to add:

Place the above code before calling $('#calendar').fullCalendar({ ... });

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.

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.

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.

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.

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/

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?

@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.

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.