Theming Guide

Learn how to customize the appearance of your FullEventCalendar to match your application's design.

Overview

FullEventCalendar is built with shadcn/ui components, which are themselves built on Tailwind CSS. This provides a powerful and flexible theming system that allows you to customize nearly every aspect of the calendar's appearance.

Tailwind CSS Integration

The calendar respects your application's Tailwind CSS theme settings. This includes:

Color schemes
Typography
Spacing
Rounded corners
Shadows

Dark Mode Support

FullEventCalendar automatically supports dark mode when your application does. It uses Tailwind's dark mode classes to adjust colors, contrast, and other visual elements.

Example of how dark mode works with the calendar:

import { ThemeProvider } from "next-themes";
import { EventCalendar } from "@/components/event-calendar";

export default function App() {
  return (
    <ThemeProvider attribute="class">
      <div className="min-h-screen">
        <EventCalendar
          /* Calendar props */
        />
      </div>
    </ThemeProvider>
  );
}

Customizing Event Colors

The calendar comes with predefined event colors, but you can easily customize these by modifying the color definitions in constants/eventColors.ts:

// Original color definitions
export const EVENT_COLOR_OPTIONS = [
  { label: 'Blue', value: 'blue' },
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
  { label: 'Yellow', value: 'yellow' },
  { label: 'Purple', value: 'purple' },
  { label: 'Orange', value: 'orange' }
];

// You can customize the color values by modifying the CSS classes used in getEventColor.ts

The actual color values are defined in the utils/getEventColor.ts file, which maps color names to specific CSS classes:

// Example of how colors are mapped to CSS classes
export const getEventColor = (color: string): string => {
  switch (color) {
    case 'blue':
      return 'bg-blue-500 dark:bg-blue-600 text-white';
    case 'red':
      return 'bg-red-500 dark:bg-red-600 text-white';
    case 'green':
      return 'bg-green-500 dark:bg-green-600 text-white';
    case 'yellow':
      return 'bg-yellow-500 dark:bg-yellow-600 text-black';
    case 'purple':
      return 'bg-purple-500 dark:bg-purple-600 text-white';
    case 'orange':
      return 'bg-orange-500 dark:bg-orange-600 text-white';
    default:
      return 'bg-gray-500 dark:bg-gray-600 text-white';
  }
};

To customize event colors:

Modify the getEventColor function to return different Tailwind CSS classes
Add or update entries in EVENT_COLOR_OPTIONS to reflect your custom colors

Custom CSS

For more specific styling needs, you can add custom CSS to target specific elements within the calendar. The calendar uses semantic class names that make it easy to target specific components.

Example of adding custom styles:

/* In your global CSS file */

/* Customize the today highlight */
.calendar-today {
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 0.5rem;
}

/* Make events more prominent */
.calendar-event {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.calendar-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Customizing Component Appearance

Since FullEventCalendar uses shadcn/ui components, you can customize the appearance of buttons, inputs, dialogs, and other UI elements by modifying your shadcn/ui component themes.

For example, to customize all buttons in the calendar:

Modify your shadcn/ui button component at components/ui/button.tsx
The changes will automatically apply to all buttons in the calendar

Skeleton Loading Animation

The calendar includes a custom skeleton loading animation for loading states. This animation is defined in your global CSS file:

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

.dark .skeleton-shimmer::after {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}

You can customize this animation by modifying these CSS rules.

Advanced Theming: Component Customization

For advanced customization needs, you can modify the calendar's component files directly. The component architecture is modular, making it easy to locate and update specific parts of the UI.

Key components you might want to customize:

views/CalendarHeader/CalendarHeader.tsx - The calendar's header with navigation and view controls
views/DayView/DayView.tsx - Day view implementation
views/WeekView/WeekView.tsx - Week view implementation
views/MonthView/MonthView.tsx - Month view implementation
views/YearView/YearView.tsx - Year view implementation
views/ListView/ListView.tsx - List view implementation
popups/EventPopup/EventPopup.tsx - Event details popup

Example of how to customize a component:

Copy the component from the calendar's source code
Create a new component in your project with your customizations
Import and use your custom component instead of the original

Responsive Design

FullEventCalendar is fully responsive and works well on desktop, tablet, and mobile devices. The layout adjusts automatically based on screen size.

You can customize the responsive behavior by modifying the Tailwind CSS breakpoints and responsive classes used in the components.

Accessibility Considerations

When customizing the calendar's appearance, keep accessibility in mind:

Maintain sufficient color contrast for text and background colors
Preserve focus indicators for keyboard navigation
Avoid removing semantic HTML elements or ARIA attributes

Theme Examples

Corporate Theme

// In your Tailwind config
const theme = {
  extend: {
    colors: {
      brand: {
        50: '#f0f9ff',
        100: '#e0f2fe',
        500: '#0ea5e9',
        600: '#0284c7',
        700: '#0369a1',
      }
    }
  }
}

// In your getEventColor.ts
export const getEventColor = (color: string): string => {
  switch (color) {
    case 'blue':
      return 'bg-brand-500 dark:bg-brand-600 text-white';
    // Other colors...
  }
};

Playful Theme

// In your Tailwind config
const theme = {
  extend: {
    borderRadius: {
      'xl': '1rem',
      '2xl': '1.5rem',
    },
    boxShadow: {
      'soft': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    }
  }
}

// In your CSS
.calendar-event {
  @apply rounded-xl shadow-soft;
}

Conclusion

FullEventCalendar's theming system gives you the flexibility to create a calendar that perfectly matches your application's design language. By leveraging Tailwind CSS, shadcn/ui components, and the modular architecture, you can achieve anything from simple color changes to comprehensive visual overhauls.