Dyna — Automatic printable planner generator

This is the core of the project: turning a static design into a dynamic template that generates correct calendars for any date while maintaining print quality.

1. Zone marking: a Figma-like visual editor

Zone marking was solved with Konva + react-konva (high-level HTML5 canvas) instead of pure SVG or Fabric.js. The user draws rectangles on the image, resizes them with handles, and can use a grid tool that generates several blocks at once from a single drag — key for quickly mapping a 7×5 monthly grid. There is also multi-selection with marquee and automatic alignment guides (snap), Figma-style.

Each zone is stored as absolute pixel coordinates relative to the original image — not as percentages:

interface Rectangle {
  x: number;
  y: number;
  width: number;
  height: number;
  fieldType: 'year' | 'month' | 'day' | 'startDay' | 'endDay';
  order: number; // order for mapping days in grids
}

The real challenge here was making sure editor zoom and pan did not misalign marked zones. The solution: coordinates always live in the original image space, and only the view is scaled visually. Pointer-to-image coordinate conversion is as simple as this:

const pointerToImage = useCallback(
  (pos: { x: number; y: number }) => ({
    x: (pos.x - offset.x) / scale,
    y: (pos.y - offset.y) / scale,
  }),
  [offset, scale]
);

2. Generating the correct calendar

The date engine relies on date-fns:

• getMonthsBetween(start, end) generates the list of months in the chosen range.
• For each month, getCalendarWeeks and getMonthDatesForGrid calculate full weeks and the monthly grid, respecting the configured week start day.
• getFieldValue resolves what text goes in each marked block, according to its fieldType and context (year, month, week, or specific day).
• “Leading/trailing” days (from the previous or next month that appear in a monthly view) are rendered in a secondary color to differentiate them.

The system supports 6 page types (cover, monthly divider, monthly view, weekly view, daily view, extras), and the generation order mirrors how a planner is used in real life: covers → for each month, divider + monthly view → if there are weekly and daily views, for each week the week is generated and then only the days of that week that fall in that month → extra pages at the end.

It also supports full i18n: English/Spanish language (with date-fns locales), year format (2026 vs 26), month format (January vs 1), and day format (6 vs Monday), all configurable per template.

3. From canvas to printable PDF

Export is 100% client-side, in two phases:

1. Page rasterization — each page is painted on an HTML Canvas 2D (background image + date text) and converted to base64 PNG.
2. PDF assembly — with pdf-lib, running in a Web Worker to avoid blocking the main thread, each PNG is embedded as a PDF page at the real size in points (for example, 595×842 pt for A4).

To maintain print quality, the system assumes 300 DPI by default and automatically detects whether the uploaded design corresponds to A4 or A5 by comparing its pixel dimensions against several known DPIs (72/96/144/150/300).

An annual planner with a daily view can generate hundreds of pages, so the bottleneck is rasterization. To mitigate it: visible progress in two phases (85% generation + 15% assembly), cache of already generated pages if the range does not change, and a prior estimate of the number of pages before starting export.