[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.

[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!

[vmnog]

I don't like the fact that I need to scroll to see the full calendar.

[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]

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 😃

[vmnog]

This is the best so far, good job!

[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.

[luebken]

Seems to have moved here https://github.com/origin-space

[deadcoder0904]

Okay, this is by far the best one yet (made by Cal.com) - https://github.com/origin-space/event-calendar (demo -> https://full-calendar-steel.vercel.app/)

[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, give it a star! ⭐

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

Screenshots:

[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.

[tofuwu-dev]

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

[vmnog]

Good job man, but could you make the calendar fill all the space available on the screen and make events rearrange size dynamically?

[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

[vmnog]

That's one of the best I find so far!! Congrats!

[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.

[vmnog]

That's a good library @kcsujeet ! I wish you could released in a composition pattern way with shadcn components, but you solved a lot of complex calendar issues in this project. Congrats!

[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

[vmnog]

That's not premium bro, it doesn't even have drag 'n drop feature...

[0xBoom]

@vmnog it is premium packed with a lot of features, with great UX and many happy buyers so far. Just because it does not have drag n drop does not mean its not premium dude..

[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. 🙏

[kcsujeet]

Just released v1.0.0 of ilamy-calendar which comes with a new and exciting feature Resource Calendar.

Please feel free to check it out and drop some feedbacks and a star 🌟 . : )

[kcsujeet]

@jezzdk Custom event form rendering is now available in v1.1.0 of ilamy-calendar.

[fily1212]

Nice resource! I was thinking if it is possible to view only the working hours/days. I'm thinking this use case: I want to show the appointments in a dancing school or in a elementary school, for instance. I would not be interested to see 0-7am, or 7pm-0, and sundays. Maybe a boolean exclude/include not working hours could be a solution.

[kcsujeet]

Hi @fily1212 ... business hours is actually supported in ilamy calendar. You can also see it in action in the demo here. There's also an improvement coming soon.

[fily1212]

Nice !
What I was suggesting was the possibility to hide non-working hours or non-working days completely.

For example, in a dancing school or an elementary school, the useful hours might be only 8am–7pm, Monday to Saturday. In that case, seeing empty slots like 0–7am, 7pm–midnight, or Sundays doesn’t add much.

A simple boolean option to include/exclude non-working hours (and maybe non-working days) could make the calendar cleaner and easier to use for these scenarios.

[kcsujeet]

@fily1212 That could be something I can look into. Feel free to raise an issue. The current approach is similar to how Full Calendar does it (demo).

[kamami]

Does this also support an Agenda View? Maybe even with ressource grouping?

[0xBoom]

FullEventCalendar does have Agenda view, Resource View, Detail View and many more.