DEV Community

Cover image for Event Calendar with Shadcn theme đź’…
Tom Ă–sterlund
Tom Ă–sterlund

Posted on

7 1 1 1 2

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 
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

...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%;
}
Enter fullscreen mode Exit fullscreen mode

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} />
  </>
}

Enter fullscreen mode Exit fullscreen mode

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

<EventCalendar />
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay