A Notion-Style Calendar Is Just One CSS Grid

#javascript #webdev #beginners #css

Notion's calendar looks like a polished, complicated component. Build one and you'll find it's a 7-column CSS grid plus about three lines of date arithmetic. No date library, no calendar package.

This is Day 5 of my DesignFromZero series — recreate a slick UI from scratch and learn why it works.

Seven columns. That's the layout.

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

Drop your day cells in and the browser wraps them into weeks automatically. You never position a single cell by hand.

Where does the month start?

The 1st isn't always a Sunday. Ask JavaScript which weekday it is:

const startDay = new Date(year, month, 1).getDay(); // 0=Sun … 6=Sat

That number is exactly how many blank cells you prepend so dates line up under the right weekday header.

How many days this month?

The classic JS trick — day 0 of next month rolls back to the last day of this month:

const daysInMonth = new Date(year, month + 1, 0).getDate(); // 28/29/30/31

Leap years handled for free.

Pad both ends so rows never look ragged

This is the detail that makes it read as "Notion" and not a school worksheet:

// leading: the previous month's last few days, dimmed grey
for (let i = startDay - 1; i >= 0; i--) addCell(prevMonthDays - i, /* dim */ true);

// this month
for (let d = 1; d <= daysInMonth; d++) addCell(d, false, new Date(year, month, d));

// trailing: next month's first days, so the final row is full
const trailing = (7 - (startDay + daysInMonth) % 7) % 7;

Those grey overflow days are 90% of the "this looks professional" effect.

Today + events

Highlight today by comparing each cell's ISO date string to new Date(). Events live in a plain object keyed by date — render whatever sits under that key as colored chips:

const events = { "2026-06-21": [{ t: "Ship v2 🚀" }] };

const key = iso(date); // "2026-06-21"
(events[key] || []).forEach(e => {
  const chip = document.createElement("div");
  chip.textContent = e.t;
  cell.appendChild(chip);
});

That's Notion's "database on a calendar" in miniature.

Month navigation

prevBtn.onclick = () => { view.setMonth(view.getMonth() - 1); render(); };

Re-render and you're done. The built-in Date object does all the arithmetic — no moment, no date-fns for a clean month view.

🗓️ See it live + click any day to add an event: https://dev48v.infy.uk/design/day5-notion-calendar.html

Day 5 of DesignFromZero. A new UI clone every day, built from scratch.

DEV Community