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.
Yeah we wanted something that would print with exact physical sizes and there's no reliable support for that so we ended up generating PDF with PDFium in WebAssembly.
Thanks for the feedback! Agreed, I too have experienced those quirks. This applies to most modern CSS features in general :-)
FWIW, I also have had also success with running a server-side headless chromium instance on an app where I was generating nicely formatted exam from provided questions.
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 BRILLIANT!! Thank You. Such as simple idea I wonder I have never thought of doing it myself. I currently have Stick notes to do list but it is a little messy with some date on it.
The older I am, the more I use good old fashion analogue tools like pencil and paper.
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.
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.
[0] https://barish.me/blog/make-your-website-printable-with-css/
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.
FWIW, I also have had also success with running a server-side headless chromium instance on an app where I was generating nicely formatted exam from provided questions.
1. https://github.com/BafS/Gutenberg
https://voussoir.net/writing/css_for_printing
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.
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. ;-)
The older I am, the more I use good old fashion analogue tools like pencil and paper.
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!
https://neatnik.net/calendar/?sofshavua=1&year=2026
It's hard to write on such small boxes.
https://github.com/klimeryk/recalendar.js
P.S. Maybe I should just remove the part in parentheses, since a number of people are completely ignoring it.