Skip to content
Template Empire
Search components
Template Empire menu
ProductsCompareStandardsEnterpriseResources
Browse components

Calendar Mosaic

A free logos and stats calendar mosaic for date-positioned monthly values and unknown days in React.

Daily activity — February 2024

MondayTuesdayWednesdayThursdayFridaySaturdaySunday
0 tasks4 tasksUnknownUnknown
UnknownUnknownUnknownUnknownUnknownUnknownUnknown
UnknownUnknownUnknownUnknownUnknownUnknownUnknown
UnknownUnknownUnknownUnknownUnknownUnknownUnknown
UnknownUnknownUnknown2 tasks
  1. : 0 tasks
  2. : 4 tasks
  3. : Unknown
  4. : Unknown
  5. : Unknown
  6. : Unknown
  7. : Unknown
  8. : Unknown
  9. : Unknown
  10. : Unknown
  11. : Unknown
  12. : Unknown
  13. : Unknown
  14. : Unknown
  15. : Unknown
  16. : Unknown
  17. : Unknown
  18. : Unknown
  19. : Unknown
  20. : Unknown
  21. : Unknown
  22. : Unknown
  23. : Unknown
  24. : Unknown
  25. : Unknown
  26. : Unknown
  27. : Unknown
  28. : Unknown
  29. : 2 tasks

Customise

Code

const observations = [
  { date: "2024-02-01", value: 0 },
  { date: "2024-02-02", value: 4 },
  { date: "2024-02-29", value: null },
];

<StatCalendarMosaic
  year={2024}
  month={2}
  title="Daily activity"
  observations={observations}
  unit=" tasks"
/>

Calendar Mosaic places observations on their Gregorian dates and includes a complete textual list for review. Zero remains an observed value, while null and absent dates are labelled unknown.

It validates month bounds, ISO dates, duplicate observations and finite non-negative values. Invalid input is reported instead of being coerced into a plausible calendar.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/stat-calendar-mosaic

Usage

import { StatCalendarMosaic } from "@/components/stat-calendar-mosaic";

const observations = [{ date: "2024-02-01", value: 0 }, { date: "2024-02-02", value: 4 }, { date: "2024-02-29", value: null }];

export function MonthlyActivity() {
  return <StatCalendarMosaic year={2024} month={2} title="Daily activity" observations={observations} unit=" tasks" />;
}

Props

PropTypeDefaultDescription
yearnumberrequiredGregorian year from 1 to 9999.
monthnumberrequiredGregorian month from 1 (January) to 12 (December).
titlestringrequiredAccessible name and visible heading.
observationsCalendarObservation[]requiredStrict ISO date observations with finite non-negative values; null means explicitly unknown.
unitstring""Text appended to recorded values.
classNamestringundefinedAdditional classes merged with the calendar section.

Customisation

The calendar uses semantic surface, text and border tokens. Pass the reporting period and observations directly; include null when a date is known to be unknown:

<StatCalendarMosaic year={2024} month={2} title="Daily activity" observations={observations} unit=" tasks" />

Frequently asked questions

Is Calendar Mosaic free for commercial use?
Yes. The component is MIT licensed and may be used in personal and commercial projects.
How is zero different from a missing value?
Zero is rendered as a recorded zero. Null and dates without an observation are labelled unknown.
Does it support leap years?
Yes. Calendar positions follow Gregorian month lengths, including February 29 in leap years.

Related components

Need a complete production interface?Template Empire templates bring reusable interface patterns together in complete, production-ready projects.Browse Template Empire templates