v0.2.0 - Labels / i18n Customization

What's New

Labels / i18n Customization

You can now customize all user-facing text in YearFlow without editing the source code. Perfect for internationalization or personalization!

<YearPlanner 
  year={2026}
  labels={{
    header: { title: 'Planificador Anual' },
    legend: { title: 'Categorías' },
    eventModal: { buttonAdd: 'Añadir Evento' },
    // ... any other labels
  }}
/>

New Features

• labels prop - Pass partial label overrides for any component text
• defaultLabels - Access all default English labels
• mergeLabels() - Deep merge custom labels with defaults
• useLabels() hook - Access labels from context in custom components
• Full TypeScript support - All label types exported (PlannerLabels, HeaderLabels, etc.)

Customizable Sections

Section	What you can customize
header	Title, view buttons, quarter options
eventModal	Form labels, placeholders, buttons
addNoteModal	Form labels, placeholders, buttons
blockDayModal	Labels and buttons
legend	Panel title, add button, placeholder
notesPanel	Title, empty states, add button
eventsPanel	Title, empty state, add button
weekView	Header format, navigation, month names
calendarGrid	Add event tooltip, overflow text
eventBar	Overflow indicator
general	Loading text

See the README for full documentation.

v0.1.5

What's Changed

Bug Fixes - Responsive Layout

Year View:

• Fixed calendar grid disappearing at certain browser widths
• Added horizontal scrolling when viewport is too narrow
• Calendar months now use minmax(250px, 1fr) to prevent collapsing to zero

Week View:

• Fixed week title truncation ("Week of Janua..." → "Week of January 6, 2025")
• Fixed Sunday column being cut off - all 7 days now visible
• Added horizontal scroll wrapper with minimum 200px per day column
• Changed header to column layout for better responsiveness

General:

• Improved sidebar responsive behavior at all breakpoints
• Enhanced mobile layout with single-column sidebar at 600px

Installation

npm install yearflow@0.1.5

Or via CDN:

<script type="module">
  import { YearPlanner } from 'https://esm.sh/yearflow@0.1.5'
</script>

v0.1.4

What's Changed

Bug Fixes

• Fixed legend text overflow - Long category names like "Stale (Warning)" were being cut off without any visual indication
• Added text-overflow: ellipsis to legend labels for graceful truncation
• Added title attributes so full text appears on hover

Improvements

• Increased sidebar width from 320px to 380px for better readability
• Improved responsive behavior for legend panel

Installation

npm install yearflow@0.1.4

Or via CDN:

<script type="module">
  import { YearPlanner } from 'https://esm.sh/yearflow@0.1.4'
</script>

YearFlow v0.1.0

Initial Release

A beautiful year-at-a-glance planner component for React.

Features

• 12-month calendar grid with event management
• Multi-day event bars with visual spanning
• Customizable legend categories with colors and icons
• Built-in modals for events, notes, and blocked days
• localStorage, sessionStorage, and API persistence adapters
• Fully customizable theming via CSS variables
• TypeScript support with full type definitions

Installation

npm install yearflow

Usage

import { YearPlanner } from 'yearflow';
import 'yearflow/styles.css';

function App() {
  return <YearPlanner year={2026} />;
}

Links

• npm package
• Documentation