CSS rules for printing is one of my favorite features of the web. You get a powerful typesetter directly in your browser. For those wondering how it's done, I wrote about it [0] recently for my friends who frequently asked how I generated PDFs for my blogs.
Thank you for the nice (and still short) article - I really liked it.
However, while these rules apply for web pages, I would like to... let's say warn all developers expecting CSS is a good option for accurate printing.
It may work for single page printouts or "make this page more printable" approaches, but don't expect it to be an easy opt out of providing PDFs for every single use case.
CSS for printing gets annoying pretty quick as soon as you have some more sophisticated requirements. You should probably also know that print-CSS is not fully cross browser compatible - there are quirks and caveats for every single one of them regarding font sizing, margin, padding and page-layouts.
I would not recommend to use HTML + CSS for something that really needs to be exactly the same layout in every browser.
The neatnik calendar is very nice. Others are talking about enhancements they've done and I've done my own, creating a pretty faithful JavaScript implementation with enhancements:
I did something, much simpler, some time back in Google Sheets. Around year-end, I go and edit the location of the starting dates each month (drag around, some formatting). I also like the weekdays lined up instead. Use it more as a bigger-picture timeline/schedule for the year, for the family, and me.
Here is the template from last year that I shared with friends. If you are looking at it, take this as a base or an idea and build on it — finances, big life events, travel, etc.
The “Year” tab is kinda like a big-picture plan of where family members are in their years, education, and, hence, significant life events. As the months go by in the year, just fold/hide that portion.
PS. I’m tinkering with moving to a plainer text format this year, in MarkDown planning for a 10-year, 20-year, 30-years, and then kinda brain-simulation of what might be in 50 or even 100 years after I’m gone. I plan for the family/generation as an entity and I just insert myself as one of the role in it. ;-)
This is a really clever tool. I love the clean, one-page layout for tracking habits over a full year.
One suggestion: would it be possible to add a quarterly version? Like three months per page, or separate pages for each quarter? It'd be great for shorter-term goals without everything feeling so crammed on one sheet.
Saw this last year and liked it so much I added something very similar to it to Infumap (https://github.com/infumap/infumap). You can drag items of arbitrary type onto dates. When more than one item is associated with a date, a numbered button appears; clicking it lets you cycle through them. Items can be pages or links to pages, which when clicked show the page as a popup. Calendar pages in the parent page display as a list of all items scheduled for the next seven days.
I've used a Google Sheet exactly like this. Highlighted weekends and laid out with all days of the year. Export as PDF can fit on a single sheet of paper. But I also print it out on a huge paper and hang it up for my family. [https://bettersheets.co/bigyear]
This is really nice. I keep track of most important habits to me like how often I go to gym, how much protein I eat everyday, and how many days I read (books), on something physical (pen and paper). Mostly on monthly calendars. This would make tracking each of them separately on a single piece of paper across the entire year pretty neat.
I used to make these for myself and found them very helpful for planning out the year. Mine had only one difference, which was aligning the days of the week between each month.
I think they mean writing Tu Th Sa Su instead of T T S S (personally I'm a fan of T / theta if I'm doing single-letter abbreviations but Sat/Sun is still not the best)
Maybe we should all adopt Chinese weekday names: Sunday (星期日) remains same, Firstday (星期一) for Monday, Seconday (星期二) for Tuesday, Thirday (星期三) for Wednesday, Fourthday (星期四) for Thursday, Fifthday (星期五) for Friday and Sixthday (星期六) for Saturday. One-letter abbreviations would be simply S, 1 through 6.
Daveseah.com was a favorite bookmark for me -- his "printable CEO" series of task planners and calendars were cool.
I have since fallen off the productivity wagon unfortunately.
For many years past I have printed and used stacks of the Emergent Task Planner.
He has a Compact Calendar that has somewhat similar layout as OP.
Edit to add link:
https://davidseah.com/node/compact-calendar/
The website domain seems to have changed a bit.
CSS rules for printing is one of my favorite features of the web. You get a powerful typesetter directly in your browser. For those wondering how it's done, I wrote about it [0] recently for my friends who frequently asked how I generated PDFs for my blogs.
[0] https://barish.me/blog/make-your-website-printable-with-css/
Neat, I did one of these too :)
https://voussoir.net/writing/css_for_printing
Thank you for the nice (and still short) article - I really liked it.
However, while these rules apply for web pages, I would like to... let's say warn all developers expecting CSS is a good option for accurate printing.
It may work for single page printouts or "make this page more printable" approaches, but don't expect it to be an easy opt out of providing PDFs for every single use case.
CSS for printing gets annoying pretty quick as soon as you have some more sophisticated requirements. You should probably also know that print-CSS is not fully cross browser compatible - there are quirks and caveats for every single one of them regarding font sizing, margin, padding and page-layouts.
I would not recommend to use HTML + CSS for something that really needs to be exactly the same layout in every browser.
Gutenberg[1] Print Styles has been my go-to for a very long time. If I remember correctly, the issues I faced was that I could not control pagination.
1. https://github.com/BafS/Gutenberg
The neatnik calendar is very nice. Others are talking about enhancements they've done and I've done my own, creating a pretty faithful JavaScript implementation with enhancements:
https://github.com/abetusk/neatocal
https://abetusk.github.io/neatocal/ (demo)
URL parameters can be used to alter behavior. Here's a highlight of some of them:
https://abetusk.github.io/neatocal/?layout=aligned-weekdays&... (weekend highlighted, aligned)
https://abetusk.github.io/neatocal/?start_month=7 (academic)
https://abetusk.github.io/neatocal/?start_month=6&n_month=6 (second half, 6 month)
https://abetusk.github.io/neatocal/?month_code=1%E6%9C%88,2%... (chinese month and day)
There's also a data file option for more complex date notes.
The info box doesn't mention this but it also has an alternative layout where days are aligned by weekdays: https://neatnik.net/calendar/?layout=aligned-weekdays
The same, but for the year 2026: https://neatnik.net/calendar/?year=2026&layout=aligned-weekd...
I did something, much simpler, some time back in Google Sheets. Around year-end, I go and edit the location of the starting dates each month (drag around, some formatting). I also like the weekdays lined up instead. Use it more as a bigger-picture timeline/schedule for the year, for the family, and me.
Here is the template from last year that I shared with friends. If you are looking at it, take this as a base or an idea and build on it — finances, big life events, travel, etc.
The “Year” tab is kinda like a big-picture plan of where family members are in their years, education, and, hence, significant life events. As the months go by in the year, just fold/hide that portion.
https://docs.google.com/spreadsheets/d/1YwAf8vgVR0FbTU6n1dVO...
PS. I’m tinkering with moving to a plainer text format this year, in MarkDown planning for a 10-year, 20-year, 30-years, and then kinda brain-simulation of what might be in 50 or even 100 years after I’m gone. I plan for the family/generation as an entity and I just insert myself as one of the role in it. ;-)
That's good, you should also give me a way to hide the modal to actually see the calendar before I go for printing. Nice work.
I just looked at the print preview in Firefox. Worked fine for me.
This is a really clever tool. I love the clean, one-page layout for tracking habits over a full year.
One suggestion: would it be possible to add a quarterly version? Like three months per page, or separate pages for each quarter? It'd be great for shorter-term goals without everything feeling so crammed on one sheet.
Thanks for making and sharing this!
Saw this last year and liked it so much I added something very similar to it to Infumap (https://github.com/infumap/infumap). You can drag items of arbitrary type onto dates. When more than one item is associated with a date, a numbered button appears; clicking it lets you cycle through them. Items can be pages or links to pages, which when clicked show the page as a popup. Calendar pages in the parent page display as a list of all items scheduled for the next seven days.
For those living in other parts of the world here ya go:
https://neatnik.net/calendar/?sofshavua=1&year=2026
Append `&sofshavua=1` to the URL.
I've used a Google Sheet exactly like this. Highlighted weekends and laid out with all days of the year. Export as PDF can fit on a single sheet of paper. But I also print it out on a huge paper and hang it up for my family. [https://bettersheets.co/bigyear]
As an enhancement, it would be cool to be able to spread into multiple pages. 1 month per page, or 2 months per page, ..., 12 months per page.
It's hard to write on such small boxes.
This is really nice. I keep track of most important habits to me like how often I go to gym, how much protein I eat everyday, and how many days I read (books), on something physical (pen and paper). Mostly on monthly calendars. This would make tracking each of them separately on a single piece of paper across the entire year pretty neat.
I used to make these for myself and found them very helpful for planning out the year. Mine had only one difference, which was aligning the days of the week between each month.
I like the highlighting of weekends, but wish the weekends aligned across months.
https://neatnik.net/calendar/?year=2026&layout=aligned-weekd...
What does the dark background mean? I could only see it inside my print preview (see Fiveplus comment). Otherwise I like.
Saturday and Sunday. Looking at the source, it also accepts `sofshavua=1` options to highlight Fridays and Saturdays instead.
Oh duh, parsed it wrong - too used to 30day calendar views.
I've used recalendar.js the past few years for my eInk devices:
https://github.com/klimeryk/recalendar.js
Nice. It would be nice to have an option to create a per month print as well.
Adding one letter to the day of the week would be way less confusing.
No need to look too closely, now ;)
I think they mean writing Tu Th Sa Su instead of T T S S (personally I'm a fan of T / theta if I'm doing single-letter abbreviations but Sat/Sun is still not the best)
Maybe we should all adopt Chinese weekday names: Sunday (星期日) remains same, Firstday (星期一) for Monday, Seconday (星期二) for Tuesday, Thirday (星期三) for Wednesday, Fourthday (星期四) for Thursday, Fifthday (星期五) for Friday and Sixthday (星期六) for Saturday. One-letter abbreviations would be simply S, 1 through 6.
Print? Paper? Jot down with what? My calendar in the cloud performs these functions far better (from my perspective and work habits).
P.S. Maybe I should just remove the part in parentheses, since a number of people are completely ignoring it.
Which calendar is that? I haven’t found one with a decent year view similar to the one here.
Give it a shot.