Event Calendar with Shadcn theme 💅

Shadcn has become wildly popular, and is an easy way to set up a web-app with some well-styled components. But lately, when I've seen my users integrate the Schedule-X scheduler into an app with Shadcn, it just doesn't look right...

🎉 Enter @schedule-x/theme-shadcn

In this tutorial, I will walk you through how to integrate Schedule-X into a Shadcn project. Also, a demo app with this calendar can be viewed at: https://schedule-x-shadcn.vercel.app/

1) Install Schedule-X

First let's install the dependencies we need.

npm i @schedule-x/react @schedule-x/calendar @schedule-x/theme-shadcn 

2) Import and set up some CSS

Then we need to import the CSS for the calendar...

// layout.tsx or _app.tsx depending on your router
import '@schedule-x/theme-shadcn/dist/index.css';

...and set some styles for the calendar wrapper element. The calendar does not have any default height set to it, since this will differ for every use-case.

/* globals.css */
.sx-react-calendar-wrapper {
  height: 700px;
  width: 100%;
}

3) Create calendar component

Then the most important piece; the event calendar component. In this case we're using useNextCalendarApp. If you're using React but not in a Nextjs-app, you should use the useCalendarApp-hook instead.

// EventCalendar.tsx
'use client';
import {ScheduleXCalendar, useNextCalendarApp} from "@schedule-x/react";
import {createViewDay, createViewMonthAgenda, createViewMonthGrid, createViewWeek} from "@schedule-x/calendar";

export default function EventCalendar() {
  const calendarApp = useNextCalendarApp({
    views: [
      createViewWeek(),
      createViewDay(),
      createViewMonthAgenda(),
      createViewMonthGrid(),
    ],
    theme: 'shadcn',
    calendars: {
      johndoe: {
        label: 'John Doe',
        colorName: 'johndoe',
        lightColors: {
          main: 'hsl(210 40% 93.1%)',
          container: '#000',
          onContainer: 'hsl(210 40% 93.1%)',
        },
      },
    },
    selectedDate: '2023-12-01',
    events: [
      {
        id: 1,
        title: 'Coffee with John',
        start: '2023-12-01',
        end: '2023-12-01',
        calendarId: 'johndoe'
      },
      {
        id: 2,
        title: 'Breakfast with Sam',
        description: 'Discuss the new project',
        location: 'Starbucks',
        start: '2023-11-29 05:00',
        end: '2023-11-29 06:00',
        calendarId: 'johndoe'
      },
      {
        id: 3,
        title: 'Gym',
        start: '2023-11-27 06:00',
        end: '2023-11-27 07:00',
        calendarId: 'johndoe'
      },
      {
        id: 4,
        title: 'Media fasting',
        start: '2023-12-01',
        end: '2023-12-03',
        calendarId: 'johndoe'
      },
      {
        id: 5,
        title: 'Some appointment',
        people: ['John'],
        start: '2023-12-03 03:00',
        end: '2023-12-03 04:30',
        calendarId: 'johndoe'
      },
    ]
  })

  return <>
    <ScheduleXCalendar calendarApp={calendarApp} />
  </>
}

Now we're almost there! Lastly, you need to import the EventCalendar.tsx component you just created, in your app:

<EventCalendar />

And that's it!

For more info and documentation for the Schedule-X event calendar, please visit: https://schedule-x.dev

If you like the project, you can also show some appreciation by leaving a star for the GitHub repo, over at: https://github.com/schedule-x/schedule-x