Morph Calendar

1"use client";
2
3import { useCallback } from "react";
4import {
5  MorphCalendar,
6  type MorphCalendarDayData,
7  type MorphCalendarEvent,
8} from "@/registry/ui/morph-calendar";
9
10export function generateMorphCalendarDemoData(
11  date: Date,
12): MorphCalendarDayData {
13  const seed = date.getDate() + date.getMonth() * 31;
14  const eventTypes: MorphCalendarEvent["type"][] = [
15    "meeting",
16    "task",
17    "reminder",
18    "focus",
19  ];
20
21  const events: MorphCalendarEvent[] = Array.from(
22    { length: 2 + (seed % 4) },
23    (_, i) => ({
24      id: `event-${formatDateKey(date)}-${i}`,
25      title: [
26        "Team standup",
27        "Design review",
28        "Client call",
29        "Focus time",
30        "Project planning",
31        "Code review",
32        "1:1 meeting",
33        "Workshop",
34      ][((seed + i) * 7) % 8],
35      time: `${9 + ((seed + i) % 8)}:${i % 2 === 0 ? "00" : "30"}`,
36      type: eventTypes[(seed + i) % 4],
37      completed: i < 2,
38    }),
39  );
40
41  return {
42    events,
43    productivity: 60 + (seed % 35),
44    tasks: 4 + (seed % 5),
45    completed: 2 + (seed % 3),
46    notes: "Remember to follow up on the design feedback.",
47  };
48}
49
50function formatDateKey(date: Date) {
51  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
52}
53
54export function MorphCalendarDefaultExample() {
55  const getDayData = useCallback(
56    (date: Date) => generateMorphCalendarDemoData(date),
57    [],
58  );
59
60  const getActivityLevel = useCallback(
61    (date: Date) => (date.getDate() % 4) + 1,
62    [],
63  );
64
65  return (
66    <MorphCalendar
67      getDayData={getDayData}
68      getActivityLevel={getActivityLevel}
69    />
70  );
71}