FullCalendar SharePoint Theme

A TypeScript library that applies SharePoint Online themes from SPFx web parts to FullCalendar, automatically styling calendar buttons and components based on your SharePoint site's theme.

Features

• 🎨 Automatically applies SharePoint theme colors to FullCalendar
• 🔘 Styles buttons with primary and secondary SharePoint theme colors
• 📱 Responsive and mobile-friendly
• 🎯 Fluent UI design language integration
• 🔧 TypeScript support with full type definitions
• ⚡ Zero dependencies (peer dependencies only)
• 🎭 Supports both light and dark SharePoint themes

Installation

npm install fullcalendar-spotheme

Peer Dependencies

{
  "@fullcalendar/core": ">=6",
  "@fullcalendar/react": ">=6",
  "react": ">=17"
}

Usage

Basic Usage in SPFx Web Part

import { applySharePointTheme } from 'fullcalendar-spotheme';
import 'fullcalendar-spotheme/dist/fullcalendar-theme.css';

export default class MyCalendarWebPart extends BaseClientSideWebPart<IMyWebPartProps> {
  
  public render(): void {
    // Get the SharePoint theme from context
    const spTheme = this.context.sdks?.microsoftTeams?.theme || 
                    this.context.theme;
    
    // Apply the theme to FullCalendar
    applySharePointTheme({
      spTheme: spTheme
    });

    // Render your FullCalendar component
    const element: React.ReactElement = React.createElement(
      MyCalendarComponent,
      {
        // your props
      }
    );

    ReactDom.render(element, this.domElement);
  }
}

With Scoped Selector

If you want to scope the theme to a specific container:

applySharePointTheme({
  spTheme: this.context.theme,
  scopeSelector: '#my-calendar-container'
});

React Component Example

import React, { useEffect, useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import { applySharePointTheme, IReadonlyTheme } from 'fullcalendar-spotheme';
import 'fullcalendar-spotheme/dist/fullcalendar-theme.css';

interface IMyCalendarProps {
  theme: IReadonlyTheme;
}

const MyCalendar: React.FC<IMyCalendarProps> = ({ theme }) => {
  const themeRef = useRef<any>();

  useEffect(() => {
    // Apply theme on mount and get theme controller
    themeRef.current = applySharePointTheme({
      spTheme: theme,
      scopeSelector: '.my-calendar-wrapper'
    });

    // Cleanup on unmount
    return () => {
      themeRef.current?.remove();
    };
  }, []);

  // Update theme when it changes
  useEffect(() => {
    if (themeRef.current) {
      themeRef.current.update(theme);
    }
  }, [theme]);

  return (
    <div className="my-calendar-wrapper">
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,dayGridWeek,dayGridDay'
        }}
        events={[
          { title: 'Meeting', date: '2026-01-15' },
          { title: 'Conference', date: '2026-01-20' }
        ]}
      />
    </div>
  );
};

export default MyCalendar;

Manual CSS Variable Access

If you want to get the CSS variables without auto-injection:

import { getThemeVariables, getThemeCSS } from 'fullcalendar-spotheme';

// Get variables as an object
const variables = getThemeVariables(spTheme);
console.log(variables['--fc-button-bg-color']); // e.g., "#0078d4"

// Get CSS string
const cssString = getThemeCSS(spTheme, ':root');
// Apply manually or save to file

Without Auto-Injection

const themeResult = applySharePointTheme({
  spTheme: spTheme,
  autoInject: false
});

// Manually inject later
const styleElement = document.createElement('style');
styleElement.textContent = themeResult.css;
document.head.appendChild(styleElement);

API Reference

applySharePointTheme(options)

Main function to apply SharePoint theme to FullCalendar.

Parameters:

• options.spTheme (required): SharePoint theme object from SPFx context
• options.scopeSelector (optional): CSS selector to scope theme (default: :root)
• options.autoInject (optional): Auto-inject styles into document (default: true)

Returns:

{
  variables: Record<string, string>;  // CSS variables object
  css: string;                         // Generated CSS string
  update: (newTheme) => void;          // Update theme dynamically
  remove: () => void;                   // Remove injected styles
}

getThemeVariables(spTheme)

Get theme CSS variables as an object without injecting styles.

getThemeCSS(spTheme, scopeSelector?)

Generate CSS string from SharePoint theme.

Available CSS Variables

The library generates the following CSS variables:

Button Variables

• --fc-button-bg-color - Primary button background
• --fc-button-border-color - Primary button border
• --fc-button-text-color - Primary button text
• --fc-button-hover-bg-color - Primary button hover background
• --fc-button-hover-border-color - Primary button hover border
• --fc-button-hover-text-color - Primary button hover text
• --fc-button-active-bg-color - Primary button active background
• --fc-button-secondary-bg-color - Secondary button background
• And more...

Calendar Variables

• --fc-page-bg-color - Calendar background
• --fc-border-color - Calendar borders
• --fc-today-bg-color - Today highlight background
• --fc-event-bg-color - Event background
• --fc-link-color - Link color
• And more...

SharePoint Palette Variables

All SharePoint palette colors are available:

• --fc-sp-theme-primary
• --fc-sp-theme-dark
• --fc-sp-neutral-lighter
• etc.

TypeScript Support

Full TypeScript definitions are included:

import type { 
  IReadonlyTheme, 
  IPalette, 
  ISemanticColors,
  FullCalendarThemeOptions 
} from 'fullcalendar-spotheme';

CSS Import

Import the CSS file in your component or web part:

import 'fullcalendar-spotheme/dist/fullcalendar-theme.css';

Or import in your SCSS:

@import '~fullcalendar-spotheme/dist/fullcalendar-theme.css';

Examples

Handling Theme Changes

// Listen to theme changes in SPFx
protected onThemeChanged(currentTheme: IReadonlyTheme): void {
  if (this.themeController) {
    this.themeController.update(currentTheme);
  }
}

Custom Event Colors

While the library applies default theme colors to events, you can still customize individual events:

events={[
  { 
    title: 'Important Meeting', 
    date: '2026-01-15',
    backgroundColor: spTheme.palette.red,
    borderColor: spTheme.palette.redDark
  }
]}

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• IE11 not supported (FullCalendar v6 requirement)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any issues or have questions, please file an issue on GitHub.

Changelog

1.0.0

• Initial release
• SharePoint theme integration
• FullCalendar button styling
• TypeScript support
• Fluent UI design language