[blocks]: Full calendar

[duartejc]

Description

A full calendar block with Upcoming events, categories and a calendar view with options likw Month, Week, Day and List.

Example

https://example.crm.refine.dev/calendar

[TechEasyGenie]

A calendar view similar to Google calendar (Daily, weekly and monthly) would be interesting.

[RonDaha]

Something like this will be amazing
https://tailwindui.com/components/application-ui/data-display/calendars#component-c29139529079ea762f118812bbeaeb9e

[hsavit1]

anyone do this yet?

[GustavoOS]

there is also big-react-calendar which is MIT licensed.
full calendar has many features that are only available on premium subscription.

[techcoder2007]

We could also adapt https://fullcalendar.io/ with shadcn styling?

calendar.css

th.fc-col-header-cell {
  @apply border bg-secondary p-1;
}

.fc .fc-event {
  @apply bg-primary border;
}

.fc-timegrid-axis {
  @apply bg-secondary;
}

.fc-popover {
  @apply bg-secondary rounded-lg z-10 max-w-md !important;
}

.fc-popover-body {
  @apply bg-secondary;
}

.fc {
  --fc-border-color: hsl(var(--border));
  --fc-button-text-color: hsl(var(--primary-foreground));
  --fc-button-bg-color: hsl(var(--primary));
  --fc-button-border-color: hsl(var(--primary));
  --fc-button-hover-bg-color: hsl(var(--primary) / 0.9);
  --fc-button-hover-border-color: hsl(var(--primary) / 0.9);
  --fc-button-active-bg-color: hsl(var(--primary) / 0.9);
  --fc-button-active-border-color: hsl(var(--primary) / 0.9);
  --fc-event-bg-color: hsl(var(--primary));
  --fc-event-border-color: hsl(var(--primary));
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: hsl(var(--muted));
  --fc-neutral-text-color: hsl(var(--muted-foreground));
  --fc-today-bg-color: hsl(var(--primary) / 0.1);
  height: 100%;
  position: relative;
  width: 100%;
}

.fc .fc-toolbar {
  padding: 0.5rem 0;
}

.fc .fc-toolbar-title {
  color: hsl(var(--foreground));
  font-size: 1.25rem;
  font-weight: 600;
}

.fc .fc-button {
  font-weight: 500;
  border-radius: 0.375rem;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: none;
  transition: background-color 0.2s;
}

.fc .fc-button:focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.fc .fc-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fc .fc-list-event {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
}

.fc .fc-list-event:hover {
  color: black;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: hsl(var(--accent) / 0.1);
}

.fc .fc-col-header-cell {
  padding: 0.5rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.fc .fc-scrollgrid {
  border: none !important;
}

.fc .fc-scrollgrid td:last-of-type {
  border-right: none;
}

.fc .fc-scrollgrid tr:last-child td {
  border-bottom: none;
}

.fc .fc-daygrid-day-frame {
  padding: 0.25rem;
}

.fc .fc-daygrid-day-number {
  color: hsl(var(--foreground));
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.fc .fc-event {
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc .fc-event:hover {
  opacity: 0.9;
}

.fc .fc-timegrid-slot-label {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.fc .fc-timegrid-axis {
  border-right: none;
}

.fc .fc-timegrid-now-indicator-line {
  border-color: hsl(var(--destructive));
}

.fc .fc-timegrid-now-indicator-arrow {
  border-color: hsl(var(--destructive));
}

@media (max-width: 640px) {
  .fc .fc-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
  }

  .fc .fc-toolbar-chunk {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }

  .fc .fc-button {
    padding: 0.5rem;
  }
}

My calendar code

import { useLocale } from "@esm-front/services";
import { Card, cn } from "@esm-front/shared-ui";
import type { ScheduleGroup } from "@esm-front/shared/types";
import type { EventClickArg } from "@fullcalendar/core";
import enLocale from "@fullcalendar/core/locales/en-gb";
import ruLocale from "@fullcalendar/core/locales/ru";
import uzLocale from "@fullcalendar/core/locales/uz";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
import { format } from "date-fns";
import { motion } from "framer-motion";
import { type FC, useMemo, useRef, useState } from "react";
import { EventDetailsModal } from "../event-details-modal";

interface Props {
  scheduleData?: ScheduleGroup;
  onEventClick?: (eventInfo: EventClickArg) => void;
  maxEventsPerDay?: number;
}

export const FullCalendarGroupSchedule: FC<Props> = ({
  scheduleData,
  onEventClick,
  maxEventsPerDay = 4,
}) => {
  const { currentLanguage } = useLocale();
  const [isCredenzaOpen, setIsCredenzaOpen] = useState(false);
  const [selectedEvent, setSelectedEvent] = useState<any>(null);
  const calendarRef = useRef(null);

  const getLocale = (language: string) => {
    switch (language) {
      case "uz":
        return uzLocale;
      case "ru":
        return ruLocale;
      default:
        return enLocale;
    }
  };

  const events = useMemo(() => {
    if (!scheduleData) return [];

    const eventsByDate: Record<string, any[]> = {};

    Object.entries(scheduleData).forEach(([date, dayEvents]) => {
      if (!dayEvents) return [];
      eventsByDate[date] = dayEvents?.map((event, index) => ({
        id: `${date}-${event.room_id}-${index}`,
        title: event.group,
        start: `${date}T${event.start_time}`,
        end: `${date}T${event.end_time}`,
        extendedProps: {
          room: event.room?.name,
          group: event.group,
          date: date,
        },
      }));
    });

    return eventsByDate;
  }, [scheduleData]);

  const handleEventClick = (eventInfo: EventClickArg) => {
    const { start, end, title, extendedProps } = eventInfo.event;
    setSelectedEvent({
      title,
      startTime: start?.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
      }),
      endTime: end?.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
      }),
      date: format(extendedProps.date, "yyyy-MM-dd"),
      room: extendedProps.room,
      group: extendedProps.group,
    });
    setIsCredenzaOpen(true);
    onEventClick?.(eventInfo);
  };

  return (
    <>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
      >
        <Card className={cn("p-4 border-none w-full bg-transparent")}>
          <FullCalendar
            plugins={[
              dayGridPlugin,
              timeGridPlugin,
              interactionPlugin,
              listPlugin,
            ]}
            initialView="dayGridMonth"
            headerToolbar={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
            }}
            views={{
              dayGridMonth: {
                titleFormat: { year: "numeric", month: "long" },
                eventLimit: maxEventsPerDay,
                eventLimitClick: "popover",
              },
              timeGridWeek: {
                titleFormat: { year: "numeric", month: "long", day: "2-digit" },
                eventLimit: maxEventsPerDay,
              },
              timeGridDay: {
                titleFormat: { year: "numeric", month: "long", day: "2-digit" },
              },
              listWeek: {
                titleFormat: { year: "numeric", month: "long" },
              },
            }}
            locale={getLocale(currentLanguage)}
            events={Object.values(events).flat()}
            eventClick={handleEventClick}
            height="auto"
            themeSystem="standard"
            slotLabelFormat={{
              hour: "numeric",
              minute: "2-digit",
              hour12: false,
            }}
            eventTimeFormat={{
              hour: "numeric",
              minute: "2-digit",
              hour12: false,
            }}
            aspectRatio={1.6}
            slotMinTime="06:00:00"
            slotDuration="00:30:00"
            slotMaxTime="22:00:00"
            allDaySlot={false}
            editable={false}
            selectable={false}
            selectMirror={true}
            dayMaxEvents={maxEventsPerDay}
            weekends={true}
            nowIndicator={true}
            ref={calendarRef}
            eventContent={(arg) => {
              const { event, view } = arg;
              if (view.type === "dayGridMonth") {
                return {
                  html: `
                                    <div class="fc-event-main">
                                        <div class="fc-event-title">${event.title}</div>
                                    </div>
                                `,
                };
              }
              return true;
            }}
          />
        </Card>
      </motion.div>

      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={isCredenzaOpen ? { scale: 1, opacity: 1 } : {}}
        exit={{ scale: 0.9, opacity: 0 }}
        transition={{ duration: 0.3, ease: "easeOut" }}
      >
        <EventDetailsModal
          isOpen={isCredenzaOpen}
          onOpenChange={setIsCredenzaOpen}
          eventData={selectedEvent}
        />
      </motion.div>
    </>
  );
};

[BrianHung]

Does that tailwind library use any external components or just hand rolled?

[Sparticuz]

FYI, the next version of full calendar is going to have tailwind support

[timmypidashev]

Any update on this block? Would love to use a full calendar view in my project ❤️

[elio1fiore]

+1

[Joseph-Abboud]

Same here!

[Jamalahmad123]

same here!

[shakibhasan09]

Same here

[vermeerenmaxime]

This would be awesome, might start working on something..

[fstodulski]

+1

[Raasmusnilsson]

+1

[rodrgds]

+1

[islamaskar]

+1

[trueberryless]

Same here! true-tracker

[paulowsky]

+1

[KameiKento]

+1

[vermeerenmaxime]

I've worked on a full calendar alternative with shadcn components, framer motion, react dnd

I could create it into a full component, but now it's linked to my database types etc,

Calendar.mov

[charlesoestergaard]

Looks cool. Would love to see this as a component. :)

[robskinney]

I started something similar, it's available here if you want to take a look. An example site is also available here. Please feel free to improve upon it, would love help perfecting it.

[Anarbb]

@robskinney Thanks allot! this is perfect

[robskinney]

Hi, I have since pushed some updates to add drag and drop, a meeting scheduler which finds free time against time slots already on the calendar, improve mobile usability, and add some much-needed styling updates to beautify the component. Please check it out (github / live demo), and don't hesitate to post any Issues if you find anything, it's far from perfect.

[bibekgaihre]

@robskinney great work.

[techwithanirudh]

Found this, https://www.roadmap-ui.com/calendar

[humble78]

thanks a lot man!

[DreamwareDevelopment]

Here's my take on @0xBoom 's daily schedule which is all I needed for my use-case. (demo, code) What I like the most is that it'll autoscroll differently depending on your schedule, the time it is, and what day you're looking at.

[abue-ammar]

Here's my take on @0xBoom 's daily schedule which is all I needed for my use-case. (demo, code) What I like the most is that it'll autoscroll differently depending on your schedule, the time it is, and what day you're looking at.

design is broken and looks like Ai generated

[Steveb599]

Ai does better than that

[kaizenics]

+1

[charlietlamb]

@lramos33 had the best attempt imo so I made my own from scratch taking his as inspiration - only spent a few hours on this so might have missed a bug or two - feel free if you wanna contribute. Demo Repo. 🫡

[deiondz]

This is great! Gonna check out the code

[fres-sudo]

very well made man, big up for u <3

[charlietlamb]

very well made man, big up for u <3

Thank you mate!

[ahmedmayara]

I built this one earlier, I'm planning to add daily and weekly views soon. I already submitted a PR for this, you can view it #6373

Light Mode:

Dark Mode:

[list-jonas]

Hey everyone!

I saw the interest in having a Shadcn-themed event calendar component, and I’m excited to share something I’ve been working on. I just created a theme for React Big Calendar that is fully integrated with Shadcn styles.

You can check out the repo here:
https://github.com/list-jonas/shadcn-ui-big-calendar

Contributions and feedback are more than welcome!

Looking forward to seeing what you all think!

[illodev]

I'm developing an open-source calendar component with features similar to Google Calendar. It includes:

• Based on Shadcn
• Resize events
• Drag & drop events
• Cut, copy, paste, and duplicate events
• Day, week, custom range, and month views
• A state management API for handling events
• Localization and customization options
• Keyboard shortcuts for quick navigation

The goal is to make it flexible and easy to integrate into any React project.

The repository will be public in about two weeks. Let me know if you’d find something like this useful or if there's a feature you'd like to see.

🚨 NEW 🚨: Repository and a demo is now available: DEMO | REPO

Grabacion.de.pantalla.desde.2025-03-02.00-33-19.webm

Grabacion.de.pantalla.desde.2025-03-02.00-53-32.webm

[illodev]

@Steveb599 Thanks for the feedback!

• Padding: Could you clarify where exactly you see padding issues? I'll review the layout to ensure proper spacing.
• Add/Edit Events: Events can be created by selecting a time slot on the grid or by double-clicking on an empty space. Editing is available through double-clicking on an event or using the context menu. Let me know if a dedicated button would improve usability.
• Dummy Data: There's a script to generate events in apps/demo/src/data/seed.ts. Let me know if you need additional sample data.

[illodev]

The demo is just an example of how the calendar can be implemented, but you can use it however you like—adding more or fewer buttons, customizing interactions, or even using the calendar in a headless way with the useReactCalendar hook.

For a detailed look at the API types, check packages/react-calendar/src/types.ts.

[bibekgaihre]

The UI is so smooth specially in rearrangeable calendar events. I hope to see the npm package of this project

[krizh-p]

I've been trying out all the demos in this thread and this is hands down the best one so far

[jezzdk]

Yo @illodev :) Have you stopped development? I was looking for documentation on how to use your amazing calendar, but found only empty markdown files, haha 😃

[Meliketoaste]

https://schedule-x.dev/ author made a theme for shadcn https://dev.to/tomosterlund/event-calendar-with-shadcn-theme-l8k which seems interesting. https://schedule-x-shadcn.vercel.app/ is the demo. The theme can probably get some more tweaking. But it seems like a good option.

[sourcebert]

Just came across another calendar component from Origin UI (a Shadcn fork): https://originui.com/event-calendar

It's still in beta, but looks pretty promising! With a few tweaks, it could probably be adapted to work with the original Shadcn components even if you're not using Origin UI.

[yassir-jeraidi]

Hey there! 👋 I’ve crafted a feature-packed calendar with:

• 💻 Shadcn ui components based
• 📅 Sleek year view
• ✅ Agenda toggle
• ⏰ Support for 24/12-hour time format
• 🖱️ Drag-and-drop functionality
• 🌙 Dark mode
• 🎨 Color-based event filtering
• 🗂️ Event details dialog
• 🛠️ Full CRUD operations

this project stands on the solid core foundation by @lramos33 , enhanced with custom animations, improved context management, and a polished UI.

If you enjoy this project, please give it a star! ⭐

🔗 Demo: https://full-calendar-yassir-jr.vercel.app/calendar
👓 Repo: https://github.com/yassir-jeraidi/full-calendar

Screenshots:

[lramos33]

Good job man! And thanks for improving the calendar — I really like the year view!

[yassir-jeraidi]

New Features Added:

• Agenda Mode: You can now group events by dates or colors.

• PPR Support: Implemented Partial Prerendering (PPR) —currently experimental in Next.js and not available in production.

• UI Enhancements: Improved the overall user interface for a better experience.

[h0lme3]

Great thanks!

[yassir-jeraidi]

New Feature:
✅ Added support for event resizing from the top and bottom in day and week views.

🧼 Codebase refactored for better clarity, maintainability, and readability.

[techcoder2007]

Thats perfect

[lramos33]

Hey guys!

Inspired in the @yassir-jeraidi version on my calendar I just released the first update to my open-source project.

Added:

• Year view
• Agenda-style view
• New "mixed" variant for calendar badges
• Minor bug fixes
• Change all styles and components to "vanilla" shadcn
• Add drag and drop in the day, week and month view
• Add working and visible hours

Demo:
https://big-calendar.vercel.app/year-view

Repo:
https://github.com/lramos33/big-calendar

big-calendar.mp4

[humble78]

Hi Leonardo Romas! 👋

Can you add filter by color, global search to the agenda and also update nextjs, tailwindcss and shadcn to the latest version?

[kamami]

Hey guys!

Inspired in the @yassir-jeraidi version on my calendar I just released the first update to my open-source project.

Added:

• Year view
• Agenda-style view
• New "mixed" variant for calendar badges
• Minor bug fixes

Next up: drag and drop support

Demo: https://big-calendar.vercel.app/year-view

Repo: https://github.com/lramos33/big-calendar

big-calendar.mp4

Is this supporting the latest react-day-picker release with timezones?

[lramos33]

Hi Leonardo Romas! 👋

Can you add filter by color, global search to the agenda and also update nextjs, tailwindcss and shadcn to the latest version?

Updating the libraries and switching from my design system to shadcn is on my roadmap, but it’ll take some time. I’m currently focused on the drag-and-drop

[lramos33]

Hey guys!
Inspired in the @yassir-jeraidi version on my calendar I just released the first update to my open-source project.
Added:

• Year view
• Agenda-style view
• New "mixed" variant for calendar badges
• Minor bug fixes

Next up: drag and drop support
Demo: https://big-calendar.vercel.app/year-view
Repo: https://github.com/lramos33/big-calendar
big-calendar.mp4

Is this supporting the latest react-day-picker release with timezones?

I'm currently using version 8, but you can easily update it yourself if it's a priority for you. Library updates are planned for the next releases

[kcsujeet]

I'm also working on a Full Calendar alternative project. Preview here: https://gajjabko-calendar.pages.dev/

Features include:

• Day, week, month, and year views
• Smooth transitions with Framer Motion
• Drag-and-drop event support (DnD Kit)
• Light & dark mode support
• Scrollable, responsive layout

Will be open sourcing the project once it's complete. Currently 80% done.

Screen.Recording.2025-04-23.at.9.03.08.AM.mov

[kcsujeet]

And it's finally out. Check out the library here: https://ilamy.dev/

It's free and open source. No strings attached.

[0xBoom]

For those who are interested in a premium full event calendar with 8 different views and packed with features, ready to be implemented in your application, feel free to check out https://demo.fulleventcalendar.com

calendar-demo-video-1749289695113.mp4

[alex-cailler]

Hasn't anyone created something with full RRule support? Like Google Calendar or Apple Calendar?

There's no calendar out there that includes all the features like:
– RRule
– Drag and drop events
– Resizing events
– etc...

[kcsujeet]

I'm currently working on adding support for recurring events following rrule ... Drag and drop is already working. Resize is not yet planned. You can checkout here: https://ilamy.dev/demo/

[kcsujeet]

Recurring Events and iCal export now supported in ilamy-calendar.

1. Try it out here: https://ilamy.dev/demo/
2. Check the docs: https://ilamy.dev/docs/features/recurrence/

Screen.Recording.2025-08-04.at.7.57.10.PM.mov

Feedbacks, suggestions and bug reports are highly appreciated. 🙏