diff --git a/apps/www/__registry__/default/blocks/fullscreen-calendar/page.tsx b/apps/www/__registry__/default/blocks/fullscreen-calendar/page.tsx
new file mode 100644
index 00000000000..9e413c6efed
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/fullscreen-calendar/page.tsx
@@ -0,0 +1,9 @@
+import { FullScreenCalendar } from "@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar"
+
+export default function Page() {
+  return (
+    <div className="flex h-screen flex-1 flex-col">
+      <FullScreenCalendar />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/fullscreen-calendar/page.tsx b/apps/www/__registry__/new-york/blocks/fullscreen-calendar/page.tsx
new file mode 100644
index 00000000000..486735d1ae8
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/fullscreen-calendar/page.tsx
@@ -0,0 +1,9 @@
+import { FullScreenCalendar } from "@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar"
+
+export default function Page() {
+  return (
+    <div className="flex h-screen flex-1 flex-col">
+      <FullScreenCalendar />
+    </div>
+  )
+}
diff --git a/apps/www/public/r/styles/default/fullscreen-calendar.json b/apps/www/public/r/styles/default/fullscreen-calendar.json
new file mode 100644
index 00000000000..f63acd2c895
--- /dev/null
+++ b/apps/www/public/r/styles/default/fullscreen-calendar.json
@@ -0,0 +1,50 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "fullscreen-calendar",
+  "type": "registry:block",
+  "title": "Fullscreen Calendar",
+  "author": "Ahmed Mayara (https://ahmedmayara.vercel.app)",
+  "description": "A simple fullscreen calendar that allows to navigate between months and displays events.",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/fullscreen-calendar/page.tsx",
+      "content": "import { FullScreenCalendar } from \"@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen flex-1 flex-col\">\n      <FullScreenCalendar />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/fullscreen-calendar/page.tsx"
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  add,\n  eachDayOfInterval,\n  endOfMonth,\n  endOfWeek,\n  format,\n  parse,\n  startOfToday,\n  startOfWeek,\n} from \"date-fns\"\n\nimport { FullScreenCalendarDay } from \"@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-day\"\nimport { FullScreenCalendarHeader } from \"@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-header\"\nimport { FullScreenCalendarWeekDays } from \"@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days\"\n\n// Dummy data\nconst data = [\n  {\n    day: new Date(\"2025-01-02\"),\n    events: [\n      {\n        id: 1,\n        name: \"Q1 Planning Session\",\n        time: \"10:00 AM\",\n        datetime: \"2025-01-02T00:00\",\n      },\n      {\n        id: 2,\n        name: \"Team Sync\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-02T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-07\"),\n    events: [\n      {\n        id: 3,\n        name: \"Product Launch Review\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-07T00:00\",\n      },\n      {\n        id: 4,\n        name: \"Marketing Sync\",\n        time: \"11:00 AM\",\n        datetime: \"2025-01-07T00:00\",\n      },\n      {\n        id: 5,\n        name: \"Vendor Meeting\",\n        time: \"4:30 PM\",\n        datetime: \"2025-01-07T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-10\"),\n    events: [\n      {\n        id: 6,\n        name: \"Team Building Workshop\",\n        time: \"11:00 AM\",\n        datetime: \"2025-01-10T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-13\"),\n    events: [\n      {\n        id: 7,\n        name: \"Budget Analysis Meeting\",\n        time: \"3:30 PM\",\n        datetime: \"2025-01-14T00:00\",\n      },\n      {\n        id: 8,\n        name: \"Sprint Planning\",\n        time: \"9:00 AM\",\n        datetime: \"2025-01-14T00:00\",\n      },\n      {\n        id: 9,\n        name: \"Design Review\",\n        time: \"1:00 PM\",\n        datetime: \"2025-01-14T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-16\"),\n    events: [\n      {\n        id: 10,\n        name: \"Client Presentation\",\n        time: \"10:00 AM\",\n        datetime: \"2025-01-16T00:00\",\n      },\n      {\n        id: 11,\n        name: \"Team Lunch\",\n        time: \"12:30 PM\",\n        datetime: \"2025-01-16T00:00\",\n      },\n      {\n        id: 12,\n        name: \"Project Status Update\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-16T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-21\"),\n    events: [\n      {\n        id: 13,\n        name: \"Tech Stack Review\",\n        time: \"1:00 PM\",\n        datetime: \"2025-01-21T00:00\",\n      },\n      {\n        id: 14,\n        name: \"Security Training\",\n        time: \"3:00 PM\",\n        datetime: \"2025-01-21T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-23\"),\n    events: [\n      {\n        id: 15,\n        name: \"Marketing Strategy Session\",\n        time: \"2:30 PM\",\n        datetime: \"2025-01-23T00:00\",\n      },\n      {\n        id: 16,\n        name: \"Social Media Planning\",\n        time: \"10:00 AM\",\n        datetime: \"2025-01-23T00:00\",\n      },\n      {\n        id: 17,\n        name: \"Content Review\",\n        time: \"4:00 PM\",\n        datetime: \"2025-01-23T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-28\"),\n    events: [\n      {\n        id: 18,\n        name: \"Monthly All-Hands\",\n        time: \"4:00 PM\",\n        datetime: \"2025-01-28T00:00\",\n      },\n      {\n        id: 19,\n        name: \"Department Sync\",\n        time: \"10:30 AM\",\n        datetime: \"2025-01-28T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-30\"),\n    events: [\n      {\n        id: 20,\n        name: \"Project Retrospective\",\n        time: \"11:30 AM\",\n        datetime: \"2025-01-30T00:00\",\n      },\n      {\n        id: 21,\n        name: \"Sprint Demo\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-30T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-31\"),\n    events: [\n      {\n        id: 22,\n        name: \"Quarterly Report Review\",\n        time: \"3:00 PM\",\n        datetime: \"2025-01-31T00:00\",\n      },\n      {\n        id: 23,\n        name: \"Year Planning\",\n        time: \"9:30 AM\",\n        datetime: \"2025-01-31T00:00\",\n      },\n      {\n        id: 24,\n        name: \"Team Happy Hour\",\n        time: \"5:00 PM\",\n        datetime: \"2025-01-31T00:00\",\n      },\n    ],\n  },\n]\n\nexport function FullScreenCalendar() {\n  const today = startOfToday()\n  const [selectedDay, setSelectedDay] = React.useState(today)\n  const [currentMonth, setCurrentMonth] = React.useState(\n    format(today, \"MMM-yyyy\")\n  )\n  const firstDayCurrentMonth = parse(currentMonth, \"MMM-yyyy\", new Date())\n\n  const days = eachDayOfInterval({\n    start: startOfWeek(firstDayCurrentMonth),\n    end: endOfWeek(endOfMonth(firstDayCurrentMonth)),\n  })\n\n  function previousMonth() {\n    const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 })\n    setCurrentMonth(format(firstDayNextMonth, \"MMM-yyyy\"))\n  }\n\n  function nextMonth() {\n    const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 })\n    setCurrentMonth(format(firstDayNextMonth, \"MMM-yyyy\"))\n  }\n\n  function goToToday() {\n    setCurrentMonth(format(today, \"MMM-yyyy\"))\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col\">\n      <FullScreenCalendarHeader\n        startOfMonth={firstDayCurrentMonth}\n        endOfMonth={endOfMonth(firstDayCurrentMonth)}\n        nextMonth={nextMonth}\n        previousMonth={previousMonth}\n        goToToday={goToToday}\n      />\n      <div className=\"lg:flex lg:flex-auto lg:flex-col\">\n        <FullScreenCalendarWeekDays />\n        <div className=\"flex text-xs leading-6 lg:flex-auto\">\n          <div className=\"hidden w-full border-x lg:grid lg:grid-cols-7 lg:grid-rows-5\">\n            {days.map((day, dayIdx) => (\n              <FullScreenCalendarDay\n                data={data}\n                key={dayIdx}\n                day={day}\n                selectedDay={selectedDay}\n                setSelectedDay={setSelectedDay}\n                firstDayCurrentMonth={firstDayCurrentMonth}\n                dayIndex={dayIdx}\n              />\n            ))}\n          </div>\n\n          <div className=\"isolate grid w-full grid-cols-7 grid-rows-5 border-x lg:hidden\">\n            {days.map((day, dayIdx) => (\n              <FullScreenCalendarDay\n                data={data}\n                key={dayIdx}\n                day={day}\n                selectedDay={selectedDay}\n                setSelectedDay={setSelectedDay}\n                firstDayCurrentMonth={firstDayCurrentMonth}\n                dayIndex={dayIdx}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  format,\n  getDay,\n  isEqual,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\n\ninterface FullscreenCalendarDayProps {\n  day: Date\n  selectedDay: Date\n  setSelectedDay: React.Dispatch<React.SetStateAction<Date>>\n  firstDayCurrentMonth: Date\n  dayIndex: number\n  data: {\n    day: Date\n    events: {\n      id: number\n      name: string\n      time: string\n      datetime: string\n    }[]\n  }[]\n}\n\nconst colStartClasses = [\n  \"\",\n  \"col-start-2\",\n  \"col-start-3\",\n  \"col-start-4\",\n  \"col-start-5\",\n  \"col-start-6\",\n  \"col-start-7\",\n]\n\nexport function FullScreenCalendarDay({\n  day,\n  selectedDay,\n  setSelectedDay,\n  firstDayCurrentMonth,\n  dayIndex,\n  data,\n}: FullscreenCalendarDayProps) {\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (!isDesktop) {\n    return (\n      <button\n        onClick={() => setSelectedDay(day)}\n        key={dayIndex}\n        type=\"button\"\n        className={cn(\n          isEqual(day, selectedDay) && \"text-primary-foreground\",\n          !isEqual(day, selectedDay) &&\n            !isToday(day) &&\n            isSameMonth(day, firstDayCurrentMonth) &&\n            \"text-foreground\",\n          !isEqual(day, selectedDay) &&\n            !isToday(day) &&\n            !isSameMonth(day, firstDayCurrentMonth) &&\n            \"text-muted-foreground\",\n          (isEqual(day, selectedDay) || isToday(day)) && \"font-semibold\",\n          \"flex h-14 flex-col border-b border-r px-3 py-2 hover:bg-muted focus:z-10\"\n        )}\n      >\n        <time\n          dateTime={format(day, \"yyyy-MM-dd\")}\n          className={cn(\n            \"ml-auto flex size-6 items-center justify-center rounded-full\",\n            isEqual(day, selectedDay) &&\n              isToday(day) &&\n              \"bg-primary text-primary-foreground\",\n            isEqual(day, selectedDay) &&\n              !isToday(day) &&\n              \"bg-primary text-primary-foreground\"\n          )}\n        >\n          {format(day, \"d\")}\n        </time>\n        {data.filter((date) => isSameDay(date.day, day)).length > 0 && (\n          <div>\n            {data\n              .filter((date) => isSameDay(date.day, day))\n              .map((date) => (\n                <div\n                  key={date.day.toString()}\n                  className=\"-mx-0.5 mt-auto flex flex-wrap-reverse\"\n                >\n                  {date.events.map((event) => (\n                    <span\n                      key={event.id}\n                      className=\"mx-0.5 mt-1 h-1.5 w-1.5 rounded-full bg-muted-foreground\"\n                    />\n                  ))}\n                </div>\n              ))}\n          </div>\n        )}\n      </button>\n    )\n  }\n\n  return (\n    <div\n      key={dayIndex}\n      onClick={() => setSelectedDay(day)}\n      className={cn(\n        dayIndex === 0 && colStartClasses[getDay(day)],\n        !isEqual(day, selectedDay) &&\n          !isToday(day) &&\n          !isSameMonth(day, firstDayCurrentMonth) &&\n          \"bg-accent/50 text-muted-foreground\",\n        \"relative flex flex-col border-b border-r hover:bg-muted focus:z-10\",\n        !isEqual(day, selectedDay) && \"hover:bg-accent/75\"\n      )}\n    >\n      <header className=\"flex items-center justify-between p-2.5\">\n        <button\n          type=\"button\"\n          className={cn(\n            isEqual(day, selectedDay) && \"text-primary-foreground\",\n            !isEqual(day, selectedDay) &&\n              !isToday(day) &&\n              isSameMonth(day, firstDayCurrentMonth) &&\n              \"text-foreground\",\n            !isEqual(day, selectedDay) &&\n              !isToday(day) &&\n              !isSameMonth(day, firstDayCurrentMonth) &&\n              \"text-muted-foreground\",\n            isEqual(day, selectedDay) &&\n              isToday(day) &&\n              \"border-none bg-primary\",\n            isEqual(day, selectedDay) && !isToday(day) && \"bg-foreground\",\n            (isEqual(day, selectedDay) || isToday(day)) && \"font-semibold\",\n            \"flex h-7 w-7 items-center justify-center rounded-full text-xs hover:border\"\n          )}\n        >\n          <time dateTime={format(day, \"yyyy-MM-dd\")}>{format(day, \"d\")}</time>\n        </button>\n      </header>\n      <div className=\"flex-1 p-2.5\">\n        {data\n          .filter((event) => isSameDay(event.day, day))\n          .map((day) => (\n            <div key={day.day.toString()} className=\"space-y-1.5\">\n              {day.events.slice(0, 1).map((event) => (\n                <div\n                  key={event.id}\n                  className=\"flex flex-col items-start gap-1 rounded-lg border bg-muted/50 p-2 text-xs leading-tight\"\n                >\n                  <p className=\"font-medium leading-none\">{event.name}</p>\n                  <p className=\"leading-none text-muted-foreground\">\n                    {event.time}\n                  </p>\n                </div>\n              ))}\n              {day.events.length > 1 && (\n                <div className=\"text-xs text-muted-foreground\">\n                  + {day.events.length - 1} more\n                </div>\n              )}\n            </div>\n          ))}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { format, startOfToday } from \"date-fns\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  PlusCircleIcon,\n  SearchIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\ninterface FullScreenCalendarHeaderProps {\n  startOfMonth: Date\n  endOfMonth: Date\n  nextMonth: () => void\n  goToToday: () => void\n  previousMonth: () => void\n}\n\nexport function FullScreenCalendarHeader({\n  nextMonth,\n  goToToday,\n  previousMonth,\n  startOfMonth,\n  endOfMonth,\n}: FullScreenCalendarHeaderProps) {\n  const today = startOfToday()\n\n  return (\n    <div className=\"flex flex-col space-y-4 p-4 md:flex-row md:items-center md:justify-between md:space-y-0 lg:flex-none\">\n      <div className=\"flex flex-auto\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"hidden w-20 flex-col items-center justify-center rounded-lg border bg-muted p-0.5 md:flex\">\n            <h1 className=\"p-1 text-xs uppercase text-muted-foreground\">\n              {format(today, \"MMM\")}\n            </h1>\n            <div className=\"flex w-full items-center justify-center rounded-lg border bg-background p-0.5 text-lg font-bold\">\n              <span>{format(today, \"d\")}</span>\n            </div>\n          </div>\n          <div className=\"flex flex-col\">\n            <h2 className=\"text-lg font-semibold text-foreground\">\n              {format(startOfMonth, \"MMMM, yyyy\")}\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              {format(startOfMonth, \"MMM d, yyyy\")} -{\" \"}\n              {format(endOfMonth, \"MMM d, yyyy\")}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-4 md:flex-row md:gap-6\">\n        <Button variant=\"outline\" size=\"icon\" className=\"hidden lg:flex\">\n          <SearchIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n        </Button>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-6 lg:block\" />\n\n        <div className=\"inline-flex w-full -space-x-px rounded-lg shadow-sm shadow-black/5 md:w-auto rtl:space-x-reverse\">\n          <Button\n            onClick={previousMonth}\n            className=\"rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10\"\n            variant=\"outline\"\n            size=\"icon\"\n            aria-label=\"Navigate to previous month\"\n          >\n            <ChevronLeftIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n          </Button>\n          <Button\n            onClick={goToToday}\n            className=\"w-full rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10 md:w-auto\"\n            variant=\"outline\"\n          >\n            Today\n          </Button>\n          <Button\n            onClick={nextMonth}\n            className=\"rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10\"\n            variant=\"outline\"\n            size=\"icon\"\n            aria-label=\"Navigate to next month\"\n          >\n            <ChevronRightIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n          </Button>\n        </div>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-6 md:block\" />\n\n        <Separator\n          orientation=\"horizontal\"\n          className=\"block w-full md:hidden\"\n        />\n\n        <Button className=\"w-full gap-2 md:w-auto\">\n          <PlusCircleIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n          <span>New Event</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx",
+      "content": "import React from \"react\"\n\nexport function FullScreenCalendarWeekDays() {\n  return (\n    <div className=\"grid grid-cols-7 border text-center text-xs font-semibold leading-6 lg:flex-none\">\n      <div className=\"border-r py-2.5\">Sun</div>\n      <div className=\"border-r py-2.5\">Mon</div>\n      <div className=\"border-r py-2.5\">Tue</div>\n      <div className=\"border-r py-2.5\">Wed</div>\n      <div className=\"border-r py-2.5\">Thu</div>\n      <div className=\"border-r py-2.5\">Fri</div>\n      <div className=\"py-2.5\">Sat</div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "calendars"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/fullscreen-calendar-dark.png b/apps/www/public/r/styles/new-york/fullscreen-calendar-dark.png
new file mode 100644
index 00000000000..2d8ac5307cc
Binary files /dev/null and b/apps/www/public/r/styles/new-york/fullscreen-calendar-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/fullscreen-calendar-light.png b/apps/www/public/r/styles/new-york/fullscreen-calendar-light.png
new file mode 100644
index 00000000000..2e6ddfcff2e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/fullscreen-calendar-light.png differ
diff --git a/apps/www/public/r/styles/new-york/fullscreen-calendar.json b/apps/www/public/r/styles/new-york/fullscreen-calendar.json
new file mode 100644
index 00000000000..c69ee66854c
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/fullscreen-calendar.json
@@ -0,0 +1,50 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "fullscreen-calendar",
+  "type": "registry:block",
+  "title": "Fullscreen Calendar",
+  "author": "Ahmed Mayara (https://ahmedmayara.vercel.app)",
+  "description": "A simple fullscreen calendar that allows to navigate between months and displays events.",
+  "dependencies": [
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "blocks/fullscreen-calendar/page.tsx",
+      "content": "import { FullScreenCalendar } from \"@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-screen flex-1 flex-col\">\n      <FullScreenCalendar />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/fullscreen-calendar/page.tsx"
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  add,\n  eachDayOfInterval,\n  endOfMonth,\n  endOfWeek,\n  format,\n  parse,\n  startOfToday,\n  startOfWeek,\n} from \"date-fns\"\n\nimport { FullScreenCalendarDay } from \"@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-day\"\nimport { FullScreenCalendarHeader } from \"@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-header\"\nimport { FullScreenCalendarWeekDays } from \"@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days\"\n\n// Dummy data\nconst data = [\n  {\n    day: new Date(\"2025-01-02\"),\n    events: [\n      {\n        id: 1,\n        name: \"Q1 Planning Session\",\n        time: \"10:00 AM\",\n        datetime: \"2025-01-02T00:00\",\n      },\n      {\n        id: 2,\n        name: \"Team Sync\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-02T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-07\"),\n    events: [\n      {\n        id: 3,\n        name: \"Product Launch Review\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-07T00:00\",\n      },\n      {\n        id: 4,\n        name: \"Marketing Sync\",\n        time: \"11:00 AM\",\n        datetime: \"2025-01-07T00:00\",\n      },\n      {\n        id: 5,\n        name: \"Vendor Meeting\",\n        time: \"4:30 PM\",\n        datetime: \"2025-01-07T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-10\"),\n    events: [\n      {\n        id: 6,\n        name: \"Team Building Workshop\",\n        time: \"11:00 AM\",\n        datetime: \"2025-01-10T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-13\"),\n    events: [\n      {\n        id: 7,\n        name: \"Budget Analysis Meeting\",\n        time: \"3:30 PM\",\n        datetime: \"2025-01-14T00:00\",\n      },\n      {\n        id: 8,\n        name: \"Sprint Planning\",\n        time: \"9:00 AM\",\n        datetime: \"2025-01-14T00:00\",\n      },\n      {\n        id: 9,\n        name: \"Design Review\",\n        time: \"1:00 PM\",\n        datetime: \"2025-01-14T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-16\"),\n    events: [\n      {\n        id: 10,\n        name: \"Client Presentation\",\n        time: \"10:00 AM\",\n        datetime: \"2025-01-16T00:00\",\n      },\n      {\n        id: 11,\n        name: \"Team Lunch\",\n        time: \"12:30 PM\",\n        datetime: \"2025-01-16T00:00\",\n      },\n      {\n        id: 12,\n        name: \"Project Status Update\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-16T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-21\"),\n    events: [\n      {\n        id: 13,\n        name: \"Tech Stack Review\",\n        time: \"1:00 PM\",\n        datetime: \"2025-01-21T00:00\",\n      },\n      {\n        id: 14,\n        name: \"Security Training\",\n        time: \"3:00 PM\",\n        datetime: \"2025-01-21T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-23\"),\n    events: [\n      {\n        id: 15,\n        name: \"Marketing Strategy Session\",\n        time: \"2:30 PM\",\n        datetime: \"2025-01-23T00:00\",\n      },\n      {\n        id: 16,\n        name: \"Social Media Planning\",\n        time: \"10:00 AM\",\n        datetime: \"2025-01-23T00:00\",\n      },\n      {\n        id: 17,\n        name: \"Content Review\",\n        time: \"4:00 PM\",\n        datetime: \"2025-01-23T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-28\"),\n    events: [\n      {\n        id: 18,\n        name: \"Monthly All-Hands\",\n        time: \"4:00 PM\",\n        datetime: \"2025-01-28T00:00\",\n      },\n      {\n        id: 19,\n        name: \"Department Sync\",\n        time: \"10:30 AM\",\n        datetime: \"2025-01-28T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-30\"),\n    events: [\n      {\n        id: 20,\n        name: \"Project Retrospective\",\n        time: \"11:30 AM\",\n        datetime: \"2025-01-30T00:00\",\n      },\n      {\n        id: 21,\n        name: \"Sprint Demo\",\n        time: \"2:00 PM\",\n        datetime: \"2025-01-30T00:00\",\n      },\n    ],\n  },\n  {\n    day: new Date(\"2025-01-31\"),\n    events: [\n      {\n        id: 22,\n        name: \"Quarterly Report Review\",\n        time: \"3:00 PM\",\n        datetime: \"2025-01-31T00:00\",\n      },\n      {\n        id: 23,\n        name: \"Year Planning\",\n        time: \"9:30 AM\",\n        datetime: \"2025-01-31T00:00\",\n      },\n      {\n        id: 24,\n        name: \"Team Happy Hour\",\n        time: \"5:00 PM\",\n        datetime: \"2025-01-31T00:00\",\n      },\n    ],\n  },\n]\n\nexport function FullScreenCalendar() {\n  const today = startOfToday()\n  const [selectedDay, setSelectedDay] = React.useState(today)\n  const [currentMonth, setCurrentMonth] = React.useState(\n    format(today, \"MMM-yyyy\")\n  )\n  const firstDayCurrentMonth = parse(currentMonth, \"MMM-yyyy\", new Date())\n\n  const days = eachDayOfInterval({\n    start: startOfWeek(firstDayCurrentMonth),\n    end: endOfWeek(endOfMonth(firstDayCurrentMonth)),\n  })\n\n  function previousMonth() {\n    const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 })\n    setCurrentMonth(format(firstDayNextMonth, \"MMM-yyyy\"))\n  }\n\n  function nextMonth() {\n    const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 })\n    setCurrentMonth(format(firstDayNextMonth, \"MMM-yyyy\"))\n  }\n\n  function goToToday() {\n    setCurrentMonth(format(today, \"MMM-yyyy\"))\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col\">\n      <FullScreenCalendarHeader\n        startOfMonth={firstDayCurrentMonth}\n        endOfMonth={endOfMonth(firstDayCurrentMonth)}\n        nextMonth={nextMonth}\n        previousMonth={previousMonth}\n        goToToday={goToToday}\n      />\n      <div className=\"lg:flex lg:flex-auto lg:flex-col\">\n        <FullScreenCalendarWeekDays />\n        <div className=\"flex text-xs leading-6 lg:flex-auto\">\n          <div className=\"hidden w-full border-x lg:grid lg:grid-cols-7 lg:grid-rows-5\">\n            {days.map((day, dayIdx) => (\n              <FullScreenCalendarDay\n                data={data}\n                key={dayIdx}\n                day={day}\n                selectedDay={selectedDay}\n                setSelectedDay={setSelectedDay}\n                firstDayCurrentMonth={firstDayCurrentMonth}\n                dayIndex={dayIdx}\n              />\n            ))}\n          </div>\n\n          <div className=\"isolate grid w-full grid-cols-7 grid-rows-5 border-x lg:hidden\">\n            {days.map((day, dayIdx) => (\n              <FullScreenCalendarDay\n                data={data}\n                key={dayIdx}\n                day={day}\n                selectedDay={selectedDay}\n                setSelectedDay={setSelectedDay}\n                firstDayCurrentMonth={firstDayCurrentMonth}\n                dayIndex={dayIdx}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  format,\n  getDay,\n  isEqual,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\n\ninterface FullscreenCalendarDayProps {\n  day: Date\n  selectedDay: Date\n  setSelectedDay: React.Dispatch<React.SetStateAction<Date>>\n  firstDayCurrentMonth: Date\n  dayIndex: number\n  data: {\n    day: Date\n    events: {\n      id: number\n      name: string\n      time: string\n      datetime: string\n    }[]\n  }[]\n}\n\nconst colStartClasses = [\n  \"\",\n  \"col-start-2\",\n  \"col-start-3\",\n  \"col-start-4\",\n  \"col-start-5\",\n  \"col-start-6\",\n  \"col-start-7\",\n]\n\nexport function FullScreenCalendarDay({\n  day,\n  selectedDay,\n  setSelectedDay,\n  firstDayCurrentMonth,\n  dayIndex,\n  data,\n}: FullscreenCalendarDayProps) {\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (!isDesktop) {\n    return (\n      <button\n        onClick={() => setSelectedDay(day)}\n        key={dayIndex}\n        type=\"button\"\n        className={cn(\n          isEqual(day, selectedDay) && \"text-primary-foreground\",\n          !isEqual(day, selectedDay) &&\n            !isToday(day) &&\n            isSameMonth(day, firstDayCurrentMonth) &&\n            \"text-foreground\",\n          !isEqual(day, selectedDay) &&\n            !isToday(day) &&\n            !isSameMonth(day, firstDayCurrentMonth) &&\n            \"text-muted-foreground\",\n          (isEqual(day, selectedDay) || isToday(day)) && \"font-semibold\",\n          \"flex h-14 flex-col border-b border-r px-3 py-2 hover:bg-muted focus:z-10\"\n        )}\n      >\n        <time\n          dateTime={format(day, \"yyyy-MM-dd\")}\n          className={cn(\n            \"ml-auto flex size-6 items-center justify-center rounded-full\",\n            isEqual(day, selectedDay) &&\n              isToday(day) &&\n              \"bg-primary text-primary-foreground\",\n            isEqual(day, selectedDay) &&\n              !isToday(day) &&\n              \"bg-primary text-primary-foreground\"\n          )}\n        >\n          {format(day, \"d\")}\n        </time>\n        {data.filter((date) => isSameDay(date.day, day)).length > 0 && (\n          <div>\n            {data\n              .filter((date) => isSameDay(date.day, day))\n              .map((date) => (\n                <div\n                  key={date.day.toString()}\n                  className=\"-mx-0.5 mt-auto flex flex-wrap-reverse\"\n                >\n                  {date.events.map((event) => (\n                    <span\n                      key={event.id}\n                      className=\"mx-0.5 mt-1 h-1.5 w-1.5 rounded-full bg-muted-foreground\"\n                    />\n                  ))}\n                </div>\n              ))}\n          </div>\n        )}\n      </button>\n    )\n  }\n\n  return (\n    <div\n      key={dayIndex}\n      onClick={() => setSelectedDay(day)}\n      className={cn(\n        dayIndex === 0 && colStartClasses[getDay(day)],\n        !isEqual(day, selectedDay) &&\n          !isToday(day) &&\n          !isSameMonth(day, firstDayCurrentMonth) &&\n          \"bg-accent/50 text-muted-foreground\",\n        \"relative flex flex-col border-b border-r hover:bg-muted focus:z-10\",\n        !isEqual(day, selectedDay) && \"hover:bg-accent/75\"\n      )}\n    >\n      <header className=\"flex items-center justify-between p-2.5\">\n        <button\n          type=\"button\"\n          className={cn(\n            isEqual(day, selectedDay) && \"text-primary-foreground\",\n            !isEqual(day, selectedDay) &&\n              !isToday(day) &&\n              isSameMonth(day, firstDayCurrentMonth) &&\n              \"text-foreground\",\n            !isEqual(day, selectedDay) &&\n              !isToday(day) &&\n              !isSameMonth(day, firstDayCurrentMonth) &&\n              \"text-muted-foreground\",\n            isEqual(day, selectedDay) &&\n              isToday(day) &&\n              \"border-none bg-primary\",\n            isEqual(day, selectedDay) && !isToday(day) && \"bg-foreground\",\n            (isEqual(day, selectedDay) || isToday(day)) && \"font-semibold\",\n            \"flex h-7 w-7 items-center justify-center rounded-full text-xs hover:border\"\n          )}\n        >\n          <time dateTime={format(day, \"yyyy-MM-dd\")}>{format(day, \"d\")}</time>\n        </button>\n      </header>\n      <div className=\"flex-1 p-2.5\">\n        {data\n          .filter((event) => isSameDay(event.day, day))\n          .map((day) => (\n            <div key={day.day.toString()} className=\"space-y-1.5\">\n              {day.events.slice(0, 1).map((event) => (\n                <div\n                  key={event.id}\n                  className=\"flex flex-col items-start gap-1 rounded-lg border bg-muted/50 p-2 text-xs leading-tight\"\n                >\n                  <p className=\"font-medium leading-none\">{event.name}</p>\n                  <p className=\"leading-none text-muted-foreground\">\n                    {event.time}\n                  </p>\n                </div>\n              ))}\n              {day.events.length > 1 && (\n                <div className=\"text-xs text-muted-foreground\">\n                  + {day.events.length - 1} more\n                </div>\n              )}\n            </div>\n          ))}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { format, startOfToday } from \"date-fns\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  PlusCircleIcon,\n  SearchIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\ninterface FullScreenCalendarHeaderProps {\n  startOfMonth: Date\n  endOfMonth: Date\n  nextMonth: () => void\n  goToToday: () => void\n  previousMonth: () => void\n}\n\nexport function FullScreenCalendarHeader({\n  nextMonth,\n  goToToday,\n  previousMonth,\n  startOfMonth,\n  endOfMonth,\n}: FullScreenCalendarHeaderProps) {\n  const today = startOfToday()\n\n  return (\n    <div className=\"flex flex-col space-y-4 p-4 md:flex-row md:items-center md:justify-between md:space-y-0 lg:flex-none\">\n      <div className=\"flex flex-auto\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"hidden w-20 flex-col items-center justify-center rounded-lg border bg-muted p-0.5 md:flex\">\n            <h1 className=\"p-1 text-xs uppercase text-muted-foreground\">\n              {format(today, \"MMM\")}\n            </h1>\n            <div className=\"flex w-full items-center justify-center rounded-lg border bg-background p-0.5 text-lg font-bold\">\n              <span>{format(today, \"d\")}</span>\n            </div>\n          </div>\n          <div className=\"flex flex-col\">\n            <h2 className=\"text-lg font-semibold text-foreground\">\n              {format(startOfMonth, \"MMMM, yyyy\")}\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              {format(startOfMonth, \"MMM d, yyyy\")} -{\" \"}\n              {format(endOfMonth, \"MMM d, yyyy\")}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-4 md:flex-row md:gap-6\">\n        <Button variant=\"outline\" size=\"icon\" className=\"hidden lg:flex\">\n          <SearchIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n        </Button>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-6 lg:block\" />\n\n        <div className=\"inline-flex w-full -space-x-px rounded-lg shadow-sm shadow-black/5 md:w-auto rtl:space-x-reverse\">\n          <Button\n            onClick={previousMonth}\n            className=\"rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10\"\n            variant=\"outline\"\n            size=\"icon\"\n            aria-label=\"Navigate to previous month\"\n          >\n            <ChevronLeftIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n          </Button>\n          <Button\n            onClick={goToToday}\n            className=\"w-full rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10 md:w-auto\"\n            variant=\"outline\"\n          >\n            Today\n          </Button>\n          <Button\n            onClick={nextMonth}\n            className=\"rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10\"\n            variant=\"outline\"\n            size=\"icon\"\n            aria-label=\"Navigate to next month\"\n          >\n            <ChevronRightIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n          </Button>\n        </div>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-6 md:block\" />\n\n        <Separator\n          orientation=\"horizontal\"\n          className=\"block w-full md:hidden\"\n        />\n\n        <Button className=\"w-full gap-2 md:w-auto\">\n          <PlusCircleIcon size={16} strokeWidth={2} aria-hidden=\"true\" />\n          <span>New Event</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx",
+      "content": "import React from \"react\"\n\nexport function FullScreenCalendarWeekDays() {\n  return (\n    <div className=\"grid grid-cols-7 border text-center text-xs font-semibold leading-6 lg:flex-none\">\n      <div className=\"border-r py-2.5\">Sun</div>\n      <div className=\"border-r py-2.5\">Mon</div>\n      <div className=\"border-r py-2.5\">Tue</div>\n      <div className=\"border-r py-2.5\">Wed</div>\n      <div className=\"border-r py-2.5\">Thu</div>\n      <div className=\"border-r py-2.5\">Fri</div>\n      <div className=\"py-2.5\">Sat</div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "calendars"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx
new file mode 100644
index 00000000000..27a45083bb7
--- /dev/null
+++ b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx
@@ -0,0 +1,174 @@
+"use client"
+
+import React from "react"
+import {
+  format,
+  getDay,
+  isEqual,
+  isSameDay,
+  isSameMonth,
+  isToday,
+} from "date-fns"
+
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from "@/hooks/use-media-query"
+
+interface FullscreenCalendarDayProps {
+  day: Date
+  selectedDay: Date
+  setSelectedDay: React.Dispatch<React.SetStateAction<Date>>
+  firstDayCurrentMonth: Date
+  dayIndex: number
+  data: {
+    day: Date
+    events: {
+      id: number
+      name: string
+      time: string
+      datetime: string
+    }[]
+  }[]
+}
+
+const colStartClasses = [
+  "",
+  "col-start-2",
+  "col-start-3",
+  "col-start-4",
+  "col-start-5",
+  "col-start-6",
+  "col-start-7",
+]
+
+export function FullScreenCalendarDay({
+  day,
+  selectedDay,
+  setSelectedDay,
+  firstDayCurrentMonth,
+  dayIndex,
+  data,
+}: FullscreenCalendarDayProps) {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  if (!isDesktop) {
+    return (
+      <button
+        onClick={() => setSelectedDay(day)}
+        key={dayIndex}
+        type="button"
+        className={cn(
+          isEqual(day, selectedDay) && "text-primary-foreground",
+          !isEqual(day, selectedDay) &&
+            !isToday(day) &&
+            isSameMonth(day, firstDayCurrentMonth) &&
+            "text-foreground",
+          !isEqual(day, selectedDay) &&
+            !isToday(day) &&
+            !isSameMonth(day, firstDayCurrentMonth) &&
+            "text-muted-foreground",
+          (isEqual(day, selectedDay) || isToday(day)) && "font-semibold",
+          "flex h-14 flex-col border-b border-r px-3 py-2 hover:bg-muted focus:z-10"
+        )}
+      >
+        <time
+          dateTime={format(day, "yyyy-MM-dd")}
+          className={cn(
+            "ml-auto flex size-6 items-center justify-center rounded-full",
+            isEqual(day, selectedDay) &&
+              isToday(day) &&
+              "bg-primary text-primary-foreground",
+            isEqual(day, selectedDay) &&
+              !isToday(day) &&
+              "bg-primary text-primary-foreground"
+          )}
+        >
+          {format(day, "d")}
+        </time>
+        {data.filter((date) => isSameDay(date.day, day)).length > 0 && (
+          <div>
+            {data
+              .filter((date) => isSameDay(date.day, day))
+              .map((date) => (
+                <div
+                  key={date.day.toString()}
+                  className="-mx-0.5 mt-auto flex flex-wrap-reverse"
+                >
+                  {date.events.map((event) => (
+                    <span
+                      key={event.id}
+                      className="mx-0.5 mt-1 h-1.5 w-1.5 rounded-full bg-muted-foreground"
+                    />
+                  ))}
+                </div>
+              ))}
+          </div>
+        )}
+      </button>
+    )
+  }
+
+  return (
+    <div
+      key={dayIndex}
+      onClick={() => setSelectedDay(day)}
+      className={cn(
+        dayIndex === 0 && colStartClasses[getDay(day)],
+        !isEqual(day, selectedDay) &&
+          !isToday(day) &&
+          !isSameMonth(day, firstDayCurrentMonth) &&
+          "bg-accent/50 text-muted-foreground",
+        "relative flex flex-col border-b border-r hover:bg-muted focus:z-10",
+        !isEqual(day, selectedDay) && "hover:bg-accent/75"
+      )}
+    >
+      <header className="flex items-center justify-between p-2.5">
+        <button
+          type="button"
+          className={cn(
+            isEqual(day, selectedDay) && "text-primary-foreground",
+            !isEqual(day, selectedDay) &&
+              !isToday(day) &&
+              isSameMonth(day, firstDayCurrentMonth) &&
+              "text-foreground",
+            !isEqual(day, selectedDay) &&
+              !isToday(day) &&
+              !isSameMonth(day, firstDayCurrentMonth) &&
+              "text-muted-foreground",
+            isEqual(day, selectedDay) &&
+              isToday(day) &&
+              "border-none bg-primary",
+            isEqual(day, selectedDay) && !isToday(day) && "bg-foreground",
+            (isEqual(day, selectedDay) || isToday(day)) && "font-semibold",
+            "flex h-7 w-7 items-center justify-center rounded-full text-xs hover:border"
+          )}
+        >
+          <time dateTime={format(day, "yyyy-MM-dd")}>{format(day, "d")}</time>
+        </button>
+      </header>
+      <div className="flex-1 p-2.5">
+        {data
+          .filter((event) => isSameDay(event.day, day))
+          .map((day) => (
+            <div key={day.day.toString()} className="space-y-1.5">
+              {day.events.slice(0, 1).map((event) => (
+                <div
+                  key={event.id}
+                  className="flex flex-col items-start gap-1 rounded-lg border bg-muted/50 p-2 text-xs leading-tight"
+                >
+                  <p className="font-medium leading-none">{event.name}</p>
+                  <p className="leading-none text-muted-foreground">
+                    {event.time}
+                  </p>
+                </div>
+              ))}
+              {day.events.length > 1 && (
+                <div className="text-xs text-muted-foreground">
+                  + {day.events.length - 1} more
+                </div>
+              )}
+            </div>
+          ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx
new file mode 100644
index 00000000000..7af48917fbb
--- /dev/null
+++ b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import React from "react"
+import { format, startOfToday } from "date-fns"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PlusCircleIcon,
+  SearchIcon,
+} from "lucide-react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Separator } from "@/registry/default/ui/separator"
+
+interface FullScreenCalendarHeaderProps {
+  startOfMonth: Date
+  endOfMonth: Date
+  nextMonth: () => void
+  goToToday: () => void
+  previousMonth: () => void
+}
+
+export function FullScreenCalendarHeader({
+  nextMonth,
+  goToToday,
+  previousMonth,
+  startOfMonth,
+  endOfMonth,
+}: FullScreenCalendarHeaderProps) {
+  const today = startOfToday()
+
+  return (
+    <div className="flex flex-col space-y-4 p-4 md:flex-row md:items-center md:justify-between md:space-y-0 lg:flex-none">
+      <div className="flex flex-auto">
+        <div className="flex items-center gap-4">
+          <div className="hidden w-20 flex-col items-center justify-center rounded-lg border bg-muted p-0.5 md:flex">
+            <h1 className="p-1 text-xs uppercase text-muted-foreground">
+              {format(today, "MMM")}
+            </h1>
+            <div className="flex w-full items-center justify-center rounded-lg border bg-background p-0.5 text-lg font-bold">
+              <span>{format(today, "d")}</span>
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <h2 className="text-lg font-semibold text-foreground">
+              {format(startOfMonth, "MMMM, yyyy")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {format(startOfMonth, "MMM d, yyyy")} -{" "}
+              {format(endOfMonth, "MMM d, yyyy")}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 md:flex-row md:gap-6">
+        <Button variant="outline" size="icon" className="hidden lg:flex">
+          <SearchIcon size={16} strokeWidth={2} aria-hidden="true" />
+        </Button>
+
+        <Separator orientation="vertical" className="hidden h-6 lg:block" />
+
+        <div className="inline-flex w-full -space-x-px rounded-lg shadow-sm shadow-black/5 md:w-auto rtl:space-x-reverse">
+          <Button
+            onClick={previousMonth}
+            className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
+            variant="outline"
+            size="icon"
+            aria-label="Navigate to previous month"
+          >
+            <ChevronLeftIcon size={16} strokeWidth={2} aria-hidden="true" />
+          </Button>
+          <Button
+            onClick={goToToday}
+            className="w-full rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10 md:w-auto"
+            variant="outline"
+          >
+            Today
+          </Button>
+          <Button
+            onClick={nextMonth}
+            className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
+            variant="outline"
+            size="icon"
+            aria-label="Navigate to next month"
+          >
+            <ChevronRightIcon size={16} strokeWidth={2} aria-hidden="true" />
+          </Button>
+        </div>
+
+        <Separator orientation="vertical" className="hidden h-6 md:block" />
+
+        <Separator
+          orientation="horizontal"
+          className="block w-full md:hidden"
+        />
+
+        <Button className="w-full gap-2 md:w-auto">
+          <PlusCircleIcon size={16} strokeWidth={2} aria-hidden="true" />
+          <span>New Event</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx
new file mode 100644
index 00000000000..8b584c318ce
--- /dev/null
+++ b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+
+export function FullScreenCalendarWeekDays() {
+  return (
+    <div className="grid grid-cols-7 border text-center text-xs font-semibold leading-6 lg:flex-none">
+      <div className="border-r py-2.5">Sun</div>
+      <div className="border-r py-2.5">Mon</div>
+      <div className="border-r py-2.5">Tue</div>
+      <div className="border-r py-2.5">Wed</div>
+      <div className="border-r py-2.5">Thu</div>
+      <div className="border-r py-2.5">Fri</div>
+      <div className="py-2.5">Sat</div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar.tsx b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar.tsx
new file mode 100644
index 00000000000..aa1c25e7f38
--- /dev/null
+++ b/apps/www/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar.tsx
@@ -0,0 +1,287 @@
+"use client"
+
+import React from "react"
+import {
+  add,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  parse,
+  startOfToday,
+  startOfWeek,
+} from "date-fns"
+
+import { FullScreenCalendarDay } from "@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-day"
+import { FullScreenCalendarHeader } from "@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-header"
+import { FullScreenCalendarWeekDays } from "@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days"
+
+// Dummy data
+const data = [
+  {
+    day: new Date("2025-01-02"),
+    events: [
+      {
+        id: 1,
+        name: "Q1 Planning Session",
+        time: "10:00 AM",
+        datetime: "2025-01-02T00:00",
+      },
+      {
+        id: 2,
+        name: "Team Sync",
+        time: "2:00 PM",
+        datetime: "2025-01-02T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-07"),
+    events: [
+      {
+        id: 3,
+        name: "Product Launch Review",
+        time: "2:00 PM",
+        datetime: "2025-01-07T00:00",
+      },
+      {
+        id: 4,
+        name: "Marketing Sync",
+        time: "11:00 AM",
+        datetime: "2025-01-07T00:00",
+      },
+      {
+        id: 5,
+        name: "Vendor Meeting",
+        time: "4:30 PM",
+        datetime: "2025-01-07T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-10"),
+    events: [
+      {
+        id: 6,
+        name: "Team Building Workshop",
+        time: "11:00 AM",
+        datetime: "2025-01-10T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-13"),
+    events: [
+      {
+        id: 7,
+        name: "Budget Analysis Meeting",
+        time: "3:30 PM",
+        datetime: "2025-01-14T00:00",
+      },
+      {
+        id: 8,
+        name: "Sprint Planning",
+        time: "9:00 AM",
+        datetime: "2025-01-14T00:00",
+      },
+      {
+        id: 9,
+        name: "Design Review",
+        time: "1:00 PM",
+        datetime: "2025-01-14T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-16"),
+    events: [
+      {
+        id: 10,
+        name: "Client Presentation",
+        time: "10:00 AM",
+        datetime: "2025-01-16T00:00",
+      },
+      {
+        id: 11,
+        name: "Team Lunch",
+        time: "12:30 PM",
+        datetime: "2025-01-16T00:00",
+      },
+      {
+        id: 12,
+        name: "Project Status Update",
+        time: "2:00 PM",
+        datetime: "2025-01-16T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-21"),
+    events: [
+      {
+        id: 13,
+        name: "Tech Stack Review",
+        time: "1:00 PM",
+        datetime: "2025-01-21T00:00",
+      },
+      {
+        id: 14,
+        name: "Security Training",
+        time: "3:00 PM",
+        datetime: "2025-01-21T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-23"),
+    events: [
+      {
+        id: 15,
+        name: "Marketing Strategy Session",
+        time: "2:30 PM",
+        datetime: "2025-01-23T00:00",
+      },
+      {
+        id: 16,
+        name: "Social Media Planning",
+        time: "10:00 AM",
+        datetime: "2025-01-23T00:00",
+      },
+      {
+        id: 17,
+        name: "Content Review",
+        time: "4:00 PM",
+        datetime: "2025-01-23T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-28"),
+    events: [
+      {
+        id: 18,
+        name: "Monthly All-Hands",
+        time: "4:00 PM",
+        datetime: "2025-01-28T00:00",
+      },
+      {
+        id: 19,
+        name: "Department Sync",
+        time: "10:30 AM",
+        datetime: "2025-01-28T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-30"),
+    events: [
+      {
+        id: 20,
+        name: "Project Retrospective",
+        time: "11:30 AM",
+        datetime: "2025-01-30T00:00",
+      },
+      {
+        id: 21,
+        name: "Sprint Demo",
+        time: "2:00 PM",
+        datetime: "2025-01-30T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-31"),
+    events: [
+      {
+        id: 22,
+        name: "Quarterly Report Review",
+        time: "3:00 PM",
+        datetime: "2025-01-31T00:00",
+      },
+      {
+        id: 23,
+        name: "Year Planning",
+        time: "9:30 AM",
+        datetime: "2025-01-31T00:00",
+      },
+      {
+        id: 24,
+        name: "Team Happy Hour",
+        time: "5:00 PM",
+        datetime: "2025-01-31T00:00",
+      },
+    ],
+  },
+]
+
+export function FullScreenCalendar() {
+  const today = startOfToday()
+  const [selectedDay, setSelectedDay] = React.useState(today)
+  const [currentMonth, setCurrentMonth] = React.useState(
+    format(today, "MMM-yyyy")
+  )
+  const firstDayCurrentMonth = parse(currentMonth, "MMM-yyyy", new Date())
+
+  const days = eachDayOfInterval({
+    start: startOfWeek(firstDayCurrentMonth),
+    end: endOfWeek(endOfMonth(firstDayCurrentMonth)),
+  })
+
+  function previousMonth() {
+    const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 })
+    setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy"))
+  }
+
+  function nextMonth() {
+    const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 })
+    setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy"))
+  }
+
+  function goToToday() {
+    setCurrentMonth(format(today, "MMM-yyyy"))
+  }
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <FullScreenCalendarHeader
+        startOfMonth={firstDayCurrentMonth}
+        endOfMonth={endOfMonth(firstDayCurrentMonth)}
+        nextMonth={nextMonth}
+        previousMonth={previousMonth}
+        goToToday={goToToday}
+      />
+      <div className="lg:flex lg:flex-auto lg:flex-col">
+        <FullScreenCalendarWeekDays />
+        <div className="flex text-xs leading-6 lg:flex-auto">
+          <div className="hidden w-full border-x lg:grid lg:grid-cols-7 lg:grid-rows-5">
+            {days.map((day, dayIdx) => (
+              <FullScreenCalendarDay
+                data={data}
+                key={dayIdx}
+                day={day}
+                selectedDay={selectedDay}
+                setSelectedDay={setSelectedDay}
+                firstDayCurrentMonth={firstDayCurrentMonth}
+                dayIndex={dayIdx}
+              />
+            ))}
+          </div>
+
+          <div className="isolate grid w-full grid-cols-7 grid-rows-5 border-x lg:hidden">
+            {days.map((day, dayIdx) => (
+              <FullScreenCalendarDay
+                data={data}
+                key={dayIdx}
+                day={day}
+                selectedDay={selectedDay}
+                setSelectedDay={setSelectedDay}
+                firstDayCurrentMonth={firstDayCurrentMonth}
+                dayIndex={dayIdx}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/blocks/fullscreen-calendar/page.tsx b/apps/www/registry/default/blocks/fullscreen-calendar/page.tsx
new file mode 100644
index 00000000000..9e413c6efed
--- /dev/null
+++ b/apps/www/registry/default/blocks/fullscreen-calendar/page.tsx
@@ -0,0 +1,9 @@
+import { FullScreenCalendar } from "@/registry/default/blocks/fullscreen-calendar/components/fullscreen-calendar"
+
+export default function Page() {
+  return (
+    <div className="flex h-screen flex-1 flex-col">
+      <FullScreenCalendar />
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx
new file mode 100644
index 00000000000..27a45083bb7
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx
@@ -0,0 +1,174 @@
+"use client"
+
+import React from "react"
+import {
+  format,
+  getDay,
+  isEqual,
+  isSameDay,
+  isSameMonth,
+  isToday,
+} from "date-fns"
+
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from "@/hooks/use-media-query"
+
+interface FullscreenCalendarDayProps {
+  day: Date
+  selectedDay: Date
+  setSelectedDay: React.Dispatch<React.SetStateAction<Date>>
+  firstDayCurrentMonth: Date
+  dayIndex: number
+  data: {
+    day: Date
+    events: {
+      id: number
+      name: string
+      time: string
+      datetime: string
+    }[]
+  }[]
+}
+
+const colStartClasses = [
+  "",
+  "col-start-2",
+  "col-start-3",
+  "col-start-4",
+  "col-start-5",
+  "col-start-6",
+  "col-start-7",
+]
+
+export function FullScreenCalendarDay({
+  day,
+  selectedDay,
+  setSelectedDay,
+  firstDayCurrentMonth,
+  dayIndex,
+  data,
+}: FullscreenCalendarDayProps) {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  if (!isDesktop) {
+    return (
+      <button
+        onClick={() => setSelectedDay(day)}
+        key={dayIndex}
+        type="button"
+        className={cn(
+          isEqual(day, selectedDay) && "text-primary-foreground",
+          !isEqual(day, selectedDay) &&
+            !isToday(day) &&
+            isSameMonth(day, firstDayCurrentMonth) &&
+            "text-foreground",
+          !isEqual(day, selectedDay) &&
+            !isToday(day) &&
+            !isSameMonth(day, firstDayCurrentMonth) &&
+            "text-muted-foreground",
+          (isEqual(day, selectedDay) || isToday(day)) && "font-semibold",
+          "flex h-14 flex-col border-b border-r px-3 py-2 hover:bg-muted focus:z-10"
+        )}
+      >
+        <time
+          dateTime={format(day, "yyyy-MM-dd")}
+          className={cn(
+            "ml-auto flex size-6 items-center justify-center rounded-full",
+            isEqual(day, selectedDay) &&
+              isToday(day) &&
+              "bg-primary text-primary-foreground",
+            isEqual(day, selectedDay) &&
+              !isToday(day) &&
+              "bg-primary text-primary-foreground"
+          )}
+        >
+          {format(day, "d")}
+        </time>
+        {data.filter((date) => isSameDay(date.day, day)).length > 0 && (
+          <div>
+            {data
+              .filter((date) => isSameDay(date.day, day))
+              .map((date) => (
+                <div
+                  key={date.day.toString()}
+                  className="-mx-0.5 mt-auto flex flex-wrap-reverse"
+                >
+                  {date.events.map((event) => (
+                    <span
+                      key={event.id}
+                      className="mx-0.5 mt-1 h-1.5 w-1.5 rounded-full bg-muted-foreground"
+                    />
+                  ))}
+                </div>
+              ))}
+          </div>
+        )}
+      </button>
+    )
+  }
+
+  return (
+    <div
+      key={dayIndex}
+      onClick={() => setSelectedDay(day)}
+      className={cn(
+        dayIndex === 0 && colStartClasses[getDay(day)],
+        !isEqual(day, selectedDay) &&
+          !isToday(day) &&
+          !isSameMonth(day, firstDayCurrentMonth) &&
+          "bg-accent/50 text-muted-foreground",
+        "relative flex flex-col border-b border-r hover:bg-muted focus:z-10",
+        !isEqual(day, selectedDay) && "hover:bg-accent/75"
+      )}
+    >
+      <header className="flex items-center justify-between p-2.5">
+        <button
+          type="button"
+          className={cn(
+            isEqual(day, selectedDay) && "text-primary-foreground",
+            !isEqual(day, selectedDay) &&
+              !isToday(day) &&
+              isSameMonth(day, firstDayCurrentMonth) &&
+              "text-foreground",
+            !isEqual(day, selectedDay) &&
+              !isToday(day) &&
+              !isSameMonth(day, firstDayCurrentMonth) &&
+              "text-muted-foreground",
+            isEqual(day, selectedDay) &&
+              isToday(day) &&
+              "border-none bg-primary",
+            isEqual(day, selectedDay) && !isToday(day) && "bg-foreground",
+            (isEqual(day, selectedDay) || isToday(day)) && "font-semibold",
+            "flex h-7 w-7 items-center justify-center rounded-full text-xs hover:border"
+          )}
+        >
+          <time dateTime={format(day, "yyyy-MM-dd")}>{format(day, "d")}</time>
+        </button>
+      </header>
+      <div className="flex-1 p-2.5">
+        {data
+          .filter((event) => isSameDay(event.day, day))
+          .map((day) => (
+            <div key={day.day.toString()} className="space-y-1.5">
+              {day.events.slice(0, 1).map((event) => (
+                <div
+                  key={event.id}
+                  className="flex flex-col items-start gap-1 rounded-lg border bg-muted/50 p-2 text-xs leading-tight"
+                >
+                  <p className="font-medium leading-none">{event.name}</p>
+                  <p className="leading-none text-muted-foreground">
+                    {event.time}
+                  </p>
+                </div>
+              ))}
+              {day.events.length > 1 && (
+                <div className="text-xs text-muted-foreground">
+                  + {day.events.length - 1} more
+                </div>
+              )}
+            </div>
+          ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx
new file mode 100644
index 00000000000..61ede970824
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import React from "react"
+import { format, startOfToday } from "date-fns"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PlusCircleIcon,
+  SearchIcon,
+} from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Separator } from "@/registry/new-york/ui/separator"
+
+interface FullScreenCalendarHeaderProps {
+  startOfMonth: Date
+  endOfMonth: Date
+  nextMonth: () => void
+  goToToday: () => void
+  previousMonth: () => void
+}
+
+export function FullScreenCalendarHeader({
+  nextMonth,
+  goToToday,
+  previousMonth,
+  startOfMonth,
+  endOfMonth,
+}: FullScreenCalendarHeaderProps) {
+  const today = startOfToday()
+
+  return (
+    <div className="flex flex-col space-y-4 p-4 md:flex-row md:items-center md:justify-between md:space-y-0 lg:flex-none">
+      <div className="flex flex-auto">
+        <div className="flex items-center gap-4">
+          <div className="hidden w-20 flex-col items-center justify-center rounded-lg border bg-muted p-0.5 md:flex">
+            <h1 className="p-1 text-xs uppercase text-muted-foreground">
+              {format(today, "MMM")}
+            </h1>
+            <div className="flex w-full items-center justify-center rounded-lg border bg-background p-0.5 text-lg font-bold">
+              <span>{format(today, "d")}</span>
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <h2 className="text-lg font-semibold text-foreground">
+              {format(startOfMonth, "MMMM, yyyy")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {format(startOfMonth, "MMM d, yyyy")} -{" "}
+              {format(endOfMonth, "MMM d, yyyy")}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 md:flex-row md:gap-6">
+        <Button variant="outline" size="icon" className="hidden lg:flex">
+          <SearchIcon size={16} strokeWidth={2} aria-hidden="true" />
+        </Button>
+
+        <Separator orientation="vertical" className="hidden h-6 lg:block" />
+
+        <div className="inline-flex w-full -space-x-px rounded-lg shadow-sm shadow-black/5 md:w-auto rtl:space-x-reverse">
+          <Button
+            onClick={previousMonth}
+            className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
+            variant="outline"
+            size="icon"
+            aria-label="Navigate to previous month"
+          >
+            <ChevronLeftIcon size={16} strokeWidth={2} aria-hidden="true" />
+          </Button>
+          <Button
+            onClick={goToToday}
+            className="w-full rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10 md:w-auto"
+            variant="outline"
+          >
+            Today
+          </Button>
+          <Button
+            onClick={nextMonth}
+            className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
+            variant="outline"
+            size="icon"
+            aria-label="Navigate to next month"
+          >
+            <ChevronRightIcon size={16} strokeWidth={2} aria-hidden="true" />
+          </Button>
+        </div>
+
+        <Separator orientation="vertical" className="hidden h-6 md:block" />
+
+        <Separator
+          orientation="horizontal"
+          className="block w-full md:hidden"
+        />
+
+        <Button className="w-full gap-2 md:w-auto">
+          <PlusCircleIcon size={16} strokeWidth={2} aria-hidden="true" />
+          <span>New Event</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx
new file mode 100644
index 00000000000..8b584c318ce
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+
+export function FullScreenCalendarWeekDays() {
+  return (
+    <div className="grid grid-cols-7 border text-center text-xs font-semibold leading-6 lg:flex-none">
+      <div className="border-r py-2.5">Sun</div>
+      <div className="border-r py-2.5">Mon</div>
+      <div className="border-r py-2.5">Tue</div>
+      <div className="border-r py-2.5">Wed</div>
+      <div className="border-r py-2.5">Thu</div>
+      <div className="border-r py-2.5">Fri</div>
+      <div className="py-2.5">Sat</div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar.tsx b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar.tsx
new file mode 100644
index 00000000000..dff0d178c98
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar.tsx
@@ -0,0 +1,287 @@
+"use client"
+
+import React from "react"
+import {
+  add,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  parse,
+  startOfToday,
+  startOfWeek,
+} from "date-fns"
+
+import { FullScreenCalendarDay } from "@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-day"
+import { FullScreenCalendarHeader } from "@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-header"
+import { FullScreenCalendarWeekDays } from "@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar-week-days"
+
+// Dummy data
+const data = [
+  {
+    day: new Date("2025-01-02"),
+    events: [
+      {
+        id: 1,
+        name: "Q1 Planning Session",
+        time: "10:00 AM",
+        datetime: "2025-01-02T00:00",
+      },
+      {
+        id: 2,
+        name: "Team Sync",
+        time: "2:00 PM",
+        datetime: "2025-01-02T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-07"),
+    events: [
+      {
+        id: 3,
+        name: "Product Launch Review",
+        time: "2:00 PM",
+        datetime: "2025-01-07T00:00",
+      },
+      {
+        id: 4,
+        name: "Marketing Sync",
+        time: "11:00 AM",
+        datetime: "2025-01-07T00:00",
+      },
+      {
+        id: 5,
+        name: "Vendor Meeting",
+        time: "4:30 PM",
+        datetime: "2025-01-07T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-10"),
+    events: [
+      {
+        id: 6,
+        name: "Team Building Workshop",
+        time: "11:00 AM",
+        datetime: "2025-01-10T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-13"),
+    events: [
+      {
+        id: 7,
+        name: "Budget Analysis Meeting",
+        time: "3:30 PM",
+        datetime: "2025-01-14T00:00",
+      },
+      {
+        id: 8,
+        name: "Sprint Planning",
+        time: "9:00 AM",
+        datetime: "2025-01-14T00:00",
+      },
+      {
+        id: 9,
+        name: "Design Review",
+        time: "1:00 PM",
+        datetime: "2025-01-14T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-16"),
+    events: [
+      {
+        id: 10,
+        name: "Client Presentation",
+        time: "10:00 AM",
+        datetime: "2025-01-16T00:00",
+      },
+      {
+        id: 11,
+        name: "Team Lunch",
+        time: "12:30 PM",
+        datetime: "2025-01-16T00:00",
+      },
+      {
+        id: 12,
+        name: "Project Status Update",
+        time: "2:00 PM",
+        datetime: "2025-01-16T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-21"),
+    events: [
+      {
+        id: 13,
+        name: "Tech Stack Review",
+        time: "1:00 PM",
+        datetime: "2025-01-21T00:00",
+      },
+      {
+        id: 14,
+        name: "Security Training",
+        time: "3:00 PM",
+        datetime: "2025-01-21T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-23"),
+    events: [
+      {
+        id: 15,
+        name: "Marketing Strategy Session",
+        time: "2:30 PM",
+        datetime: "2025-01-23T00:00",
+      },
+      {
+        id: 16,
+        name: "Social Media Planning",
+        time: "10:00 AM",
+        datetime: "2025-01-23T00:00",
+      },
+      {
+        id: 17,
+        name: "Content Review",
+        time: "4:00 PM",
+        datetime: "2025-01-23T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-28"),
+    events: [
+      {
+        id: 18,
+        name: "Monthly All-Hands",
+        time: "4:00 PM",
+        datetime: "2025-01-28T00:00",
+      },
+      {
+        id: 19,
+        name: "Department Sync",
+        time: "10:30 AM",
+        datetime: "2025-01-28T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-30"),
+    events: [
+      {
+        id: 20,
+        name: "Project Retrospective",
+        time: "11:30 AM",
+        datetime: "2025-01-30T00:00",
+      },
+      {
+        id: 21,
+        name: "Sprint Demo",
+        time: "2:00 PM",
+        datetime: "2025-01-30T00:00",
+      },
+    ],
+  },
+  {
+    day: new Date("2025-01-31"),
+    events: [
+      {
+        id: 22,
+        name: "Quarterly Report Review",
+        time: "3:00 PM",
+        datetime: "2025-01-31T00:00",
+      },
+      {
+        id: 23,
+        name: "Year Planning",
+        time: "9:30 AM",
+        datetime: "2025-01-31T00:00",
+      },
+      {
+        id: 24,
+        name: "Team Happy Hour",
+        time: "5:00 PM",
+        datetime: "2025-01-31T00:00",
+      },
+    ],
+  },
+]
+
+export function FullScreenCalendar() {
+  const today = startOfToday()
+  const [selectedDay, setSelectedDay] = React.useState(today)
+  const [currentMonth, setCurrentMonth] = React.useState(
+    format(today, "MMM-yyyy")
+  )
+  const firstDayCurrentMonth = parse(currentMonth, "MMM-yyyy", new Date())
+
+  const days = eachDayOfInterval({
+    start: startOfWeek(firstDayCurrentMonth),
+    end: endOfWeek(endOfMonth(firstDayCurrentMonth)),
+  })
+
+  function previousMonth() {
+    const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 })
+    setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy"))
+  }
+
+  function nextMonth() {
+    const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 })
+    setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy"))
+  }
+
+  function goToToday() {
+    setCurrentMonth(format(today, "MMM-yyyy"))
+  }
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <FullScreenCalendarHeader
+        startOfMonth={firstDayCurrentMonth}
+        endOfMonth={endOfMonth(firstDayCurrentMonth)}
+        nextMonth={nextMonth}
+        previousMonth={previousMonth}
+        goToToday={goToToday}
+      />
+      <div className="lg:flex lg:flex-auto lg:flex-col">
+        <FullScreenCalendarWeekDays />
+        <div className="flex text-xs leading-6 lg:flex-auto">
+          <div className="hidden w-full border-x lg:grid lg:grid-cols-7 lg:grid-rows-5">
+            {days.map((day, dayIdx) => (
+              <FullScreenCalendarDay
+                data={data}
+                key={dayIdx}
+                day={day}
+                selectedDay={selectedDay}
+                setSelectedDay={setSelectedDay}
+                firstDayCurrentMonth={firstDayCurrentMonth}
+                dayIndex={dayIdx}
+              />
+            ))}
+          </div>
+
+          <div className="isolate grid w-full grid-cols-7 grid-rows-5 border-x lg:hidden">
+            {days.map((day, dayIdx) => (
+              <FullScreenCalendarDay
+                data={data}
+                key={dayIdx}
+                day={day}
+                selectedDay={selectedDay}
+                setSelectedDay={setSelectedDay}
+                firstDayCurrentMonth={firstDayCurrentMonth}
+                dayIndex={dayIdx}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/blocks/fullscreen-calendar/page.tsx b/apps/www/registry/new-york/blocks/fullscreen-calendar/page.tsx
new file mode 100644
index 00000000000..486735d1ae8
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/fullscreen-calendar/page.tsx
@@ -0,0 +1,9 @@
+import { FullScreenCalendar } from "@/registry/new-york/blocks/fullscreen-calendar/components/fullscreen-calendar"
+
+export default function Page() {
+  return (
+    <div className="flex h-screen flex-1 flex-col">
+      <FullScreenCalendar />
+    </div>
+  )
+}
diff --git a/apps/www/registry/registry-blocks.ts b/apps/www/registry/registry-blocks.ts
index 956be895488..47a045c1954 100644
--- a/apps/www/registry/registry-blocks.ts
+++ b/apps/www/registry/registry-blocks.ts
@@ -567,4 +567,38 @@ export const blocks: Registry["items"] = [
     ],
     categories: ["authentication", "login"],
   },
+  {
+    name: "fullscreen-calendar",
+    author: "Ahmed Mayara (https://ahmedmayara.vercel.app)",
+    title: "Fullscreen Calendar",
+    description:
+      "A simple fullscreen calendar that allows to navigate between months and displays events.",
+    type: "registry:block",
+    registryDependencies: ["button", "separator"],
+    dependencies: ["date-fns"],
+    files: [
+      {
+        path: "blocks/fullscreen-calendar/page.tsx",
+        type: "registry:page",
+        target: "app/fullscreen-calendar/page.tsx",
+      },
+      {
+        path: "blocks/fullscreen-calendar/components/fullscreen-calendar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/fullscreen-calendar/components/fullscreen-calendar-day.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/fullscreen-calendar/components/fullscreen-calendar-header.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/fullscreen-calendar/components/fullscreen-calendar-week-days.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["calendars"],
+  },
 ]
diff --git a/apps/www/registry/registry-categories.ts b/apps/www/registry/registry-categories.ts
index 8687469fd0e..82328fb2deb 100644
--- a/apps/www/registry/registry-categories.ts
+++ b/apps/www/registry/registry-categories.ts
@@ -59,4 +59,9 @@ export const registryCategories = [
     slug: "charts-tooltip",
     hidden: true,
   },
+  {
+    name: "Calendars",
+    slug: "calendars",
+    hidden: false,
+  },
 ]