Marked Calendar

Calendar for tracking habits, moods, and events with color legends.

← Back to components GitHub Repo Playground

Interactive Mode (save-data)

Click a mood/color first, then click days to mark them. Data persists in localStorage.

Click "Get Marked Days" to see data

<marked-calendar save-data weekends change-view></marked-calendar>

Month View

Start directly in month view.

<marked-calendar view="month" change-view save-data></marked-calendar>

Spanish Language

Use lang="es" for Spanish labels.

<marked-calendar lang="es" name="Año en Pixeles"></marked-calendar>

Custom Legend

Define custom colors and labels via light DOM.

Completed
Missed
Partial

<marked-calendar save-data>
  <ul id="legend">
    <li code="#22c55e" label="✓">Completed</li>
    <li code="#ef4444" label="✗">Missed</li>
    <li code="#f59e0b" label="½">Partial</li>
  </ul>
</marked-calendar>

With Holidays

Define holidays that will be blocked from selection.

1/1
25/12
1/5

<marked-calendar save-data weekends>
  <ul id="holidays">
    <li title="New Year">1/1</li>
    <li title="Christmas">25/12</li>
  </ul>
</marked-calendar>

Read-Only Display

Without save-data, calendar is view-only.

<marked-calendar name="Display Only"></marked-calendar>