A flexible calendar with the full year on a single page.
Here's the original NeatoCal project.
This is a fork of NeatoCal by Abe Tusk, which itself is a JavaScript port of the very awesome Neatnik's Calendar project.
We're grateful for the original work by Neatnik and the improvements made in NeatoCal. This fork adds additional features and customizations while maintaining the original MIT license and spirit of the project.
Original NeatoCal: A JavaScript port of Neatnik's Calendar project, with added parameters (see below) and designed to be "dependency free" with all files local.
Printing problems? See printing issues.
| URL Parameter | Description | Example |
|---|---|---|
year |
Change year (default to current year) | ...?year=2030 |
start_month |
Start at month other than January. 0 indexed (0=Jan, 1=Feb, ...). |
...?start_month=7 |
n_month |
Change number of months to something other than 12 (default 12). |
...?n_month=6 |
layout |
Changes the layout of the calendar. adesso-year (default, see adesso-year layout), adesso-planner (see adesso-planner layout), default / neatocal-default (classic), aligned-weekdays, hallon-almanackan, or weekly-grid. |
...?layout=adesso-planner ...?layout=default ...?layout=weekly-grid |
start_day |
Start at day other than Monday. 0 indexed (0=Sun, 1=Mon, ...). Used by the aligned-weekdays layout (week start) and the adesso-year / adesso-planner layouts (the weekday the week number is shown on; defaults to 3=Wed there). |
...?layout=aligned-weekdays&start_day=0 |
prev_month / next_month |
Number of faded "context" months to show before / after the range — the overlapping months of the printed planner. Integer (true = 1, default 0). Rendered as extra columns by adesso-year and extra rows by adesso-planner. |
...?layout=adesso-year&prev_month=1&next_month=1 ...?layout=adesso-planner&prev_month=1&next_month=1 |
highlight_color |
Change the weekend highlight color (default eee) |
...?highlight_color=fee |
today_highlight_color |
Change the current day's highlight color | ...?today_highlight_color=f66 |
language |
Change the language for month and day codes. Values will be overridden if month_code or weekday_code is specified. |
...?language=ko-KR |
weekday_code |
Comma separated list of weekday codes to use (default Su,M,T,W,R,F,Sa). Elements can be blank if no weekday code is wanted. |
...?weekday_code=S,M,T,W,T,F,S |
weekday_format |
Change the representation of weekdays (language must be specified). long, short or narrow |
...?language=en&weekday_format=narrow |
month_code |
Comma separated list of month codes to use (default Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec). Elements can be blank if no month code is wanted. |
...?month_code=J,F,M,A,M,J,J,A,S,O,N,D |
month_format |
Change the representation of months (language must be specified). numeric, 2-digit, long, short or narrow |
...?language=en&month_format=narrow |
weekend_days |
Comma separated list of days weekend falls on (0=Sun, 1=Mon, ..., 6=Sat). Default to 0,6. |
...?weekend_days=5,6 |
cell_height |
CSS parameter to alter cell height. | ...?cell_height=1.5em |
show_moon_phase |
Display moon phases on calendar (default false). |
...?show_moon_phase=true |
moon_phase_style |
Moon phase display style: css (default), symbol, or name. |
...?show_moon_phase=true&moon_phase_style=symbol |
moon_phase_position |
Position of moon phase: below (default) or inline. |
...?show_moon_phase=true&moon_phase_position=inline |
moon_phase_display |
When to show moon phases: changes (default, only on phase transitions) or all (every day). |
...?show_moon_phase=true&moon_phase_display=all |
show_week_numbers |
Displays the week number. (default false) |
...?show_week_numbers=true |
font_family |
Changes the font. (default Oswald) |
...?font_family=sans-serif |
data |
Location of JSON data file. | ...?data=example/data.json |
ics |
Show the ICS drag-and-drop prompt overlay on load. | ...?ics |
help |
Show help screen | ...?help |
In addition, parameters for weekday text, weekend text, month text, week number, day in month and weekend day in month can be styled with font size, font weight, foreground and background color.
These are given as URL parameters with the [VARIABLE]_[CSSTYPE].
The following prefix and suffixes are available:
| Variable |
|---|
year |
month |
weekday |
weekend |
week |
date |
weekend_date |
| CSS Type Parameter | CSS Variable |
|---|---|
font_size |
fontSize |
font_weight |
fontWeight |
foreground_color |
color |
background_color |
background |
For example, ...?weekend_font_size=1.4vmin.
The above parameter list is versatile enough to provide many options for display. Below is an abbreviated list of presets that might be useful to people.
| Preset | Description |
|---|---|
| Color and aligned | Calendar with aligned days and red highlighted weekends |
| Academic calendar | An "academic calendar" that starts on Sept and runs through to August of the following year |
| Half Page left and right calendars | Two half page (6 months) calendars |
| Non-highlighted calendar | Calendar without the weekend highlighting |
| Chinese month and day | Calendar with (simplified) Chinese month and day abbreviations (thanks to myway42) |
| German month and day (using language code) | Calendar with German month and day abbreviations |
| Turkish month and day | Calendar with Turkish month and day abbreviations |
| Two year calendar | Two year single page calendar |
| Moon phase calendar | Calendar with SVG moon phases (shows only phase changes) |
| Moon phase symbols | Calendar with Unicode moon phase symbols |
| Moon phase every day | Calendar showing moon phase on every day |
adesso-year is a recreation of the official adesso Jahreskalender (year wall
planner) and is the default layout when no layout parameter is given. The
classic NeatoCal layout is still available via ?layout=default (alias
?layout=neatocal-default).
The layout applies a set of adesso-specific defaults, each of which can still be overridden with the usual URL parameters:
| Default | Value | Override |
|---|---|---|
| Theme | adesso blue background, white month band, rounded day "pills", weekend and holiday gradients | the --ay-* CSS custom properties in css/adessocal.css |
| Locale | German — two-letter weekdays (Mo, Di, …) and full month names (Januar, …) |
language, weekday_code, month_code |
| Year header | large, bold, white, baseline-aligned to the adesso logo | year_font_size, year_font_weight, year_foreground_color |
| Week numbers | shown, anchored on Wednesday | show_week_numbers, start_day |
| Today | highlighted in adesso pink (#f566ba) |
today_highlight_color |
| Context months | none by default; the printed planner shows the overlapping Dez '25 / Jan '27 months |
prev_month, next_month (extra faded columns) |
Special days (public holidays, adesso events, named days) are supplied through a data file. Example: data/adesso_2026.json.
http://.../?layout=adesso-year&year=2026&data=data/adesso_2026.json
Each date entry can be a plain string (a simple named day) or an object:
{
"2026-01-01": { "name": "Neujahr", "type": "holiday" },
"2026-01-06": { "name": "Hl. Drei Könige", "type": "holiday", "regions": "BW, BY, ST" },
"2026-02-05": { "name": "adesso data day", "type": "event" },
"2026-12-06": "2. Advent / Nikolaus"
}
name— text shown in the day cell.type—holidayrenders a green gradient pill;eventrenders a solid adesso-blue pill (used for adesso events). Defaults toholiday.regions— optional smaller line under the name (e.g. German state codes).
adesso-planner is a recreation of page 2 of the official adesso Jahreskalender —
the same calendar transposed: the months run down the page as rows and the day
of the month (1–31) runs across as columns. Set prev_month / next_month to show
the overlapping months before / after the range as faded "context" rows (e.g.
Dezember '25 and Januar '27 for a 2026 calendar).
http://.../?layout=adesso-planner&year=2026&data=data/adesso_2026.json
It shares the adesso theme, header/logo, today highlight and week-number behaviour with adesso-year and reads the same data file. The differences are:
| adesso-year | adesso-planner | |
|---|---|---|
| Axes | days as rows, months as columns | months as rows, days as columns |
| Cell content | day number + weekday + name | just the weekday letter (or the special-day name in its place) |
| Weekday code | two-letter (Mo, Di, …) |
single-letter, narrow (M, D, …); override with weekday_format / weekday_code |
| Week number | centered in the cell | top-right corner of the cell |
Holiday cells use the green gradient and an adesso event is drawn as a solid
adesso-blue cell, both with the name centered (in the accent colour / white).
There is a data file option that can be used to provide parameters or text in the day cells.
The data value can be an absolute URL like ?data=https://example.com/data.json.
The only caveats are browser rules: the remote host must allow CORS (e.g. Access-Control-Allow-Origin),
and mixed-content rules apply (HTTPS page can’t load HTTP JSON).
The format is:
{
"param": {
...
"color_cell" : [
{ "date":"YYYY-MM-DD", "color":"#rgb" },
...
{ "date":"YYYY-MM-DD", "color":"#rgb" }
]
},
"YYYY-MM-DD" : "text",
...
"YYYY-MM-DD" : "text"
}
The file example/data.json provides an example:
{
"param": {
"year":2030,
"layout":"aligned-weekdays",
"cell_height": "2em"
},
"2030-03-21" : "The quick brown fox jumps over the lazy yellow dog",
"2030-01-30" : "Sphynx of black quartz, judge my vow",
"2030-06-01" : "Thule Worm-God of the Lords",
"2030-08-11" : "Swarms Matriarch",
"2030-10-20" : "Higher Dimension Being"
}
The admissible parameters in the "param" : {} section have the same name as the URL parameters.
If a parameter is specified in the data file, they will override any parameters provided in the URL.
color_cell allows for individual cell highlighting (example).
See example/sched.json for the example data file with the color_cell array.
Moon phase parameters (show_moon_phase, moon_phase_style, moon_phase_position, moon_phase_display) can also be set in the param section
(moon phase example).
If the file is not present or isn't able to be parsed, the render will continue as the data file isn't present.
You can drop one or more .ics calendar files onto the page to import events on the fly.
Imported events are displayed in each day cell, and multi-day events render as a new entry each day
Using the ics URL parameter will make the drag-and-drop interface appear on initial load and disappear after
an ICS file is loaded.
An example ICS file is located in example/example.ics.
Notes:
- Recurrence rules (
RRULE) are supported for standard frequencies and intervals (FREQ,INTERVAL,UNTIL,COUNT,BYDAY,BYMONTHDAY,BYMONTH). - All-day and timed events are supported; all-day events use the end date as exclusive.
Neatnik's original repo can be found at source.tube/neatnik/calendar.