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

``bash
npm install fullcalendar-spotheme
`

Peer Dependencies

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

Usage

$3

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

export default class MyCalendarWebPart extends BaseClientSideWebPart {

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);
}
}
`

$3

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

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

$3

`typescript
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 = ({ theme }) => {
const themeRef = useRef();

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 (


);
};

export default MyCalendar;
`

$3

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

`typescript
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
`

$3

`typescript
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

$3

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:
`typescript
{
variables: Record; // CSS variables object
css: string; // Generated CSS string
update: (newTheme) => void; // Update theme dynamically
remove: () => void; // Remove injected styles
}
`

$3

Get theme CSS variables as an object without injecting styles.

$3

Generate CSS string from SharePoint theme.

Available CSS Variables

The library generates the following CSS variables:

$3


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

$3

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

$3

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:

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

CSS Import

Import the CSS file in your component or web part:

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

Or import in your SCSS:

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

Examples

$3

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

$3

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

`typescript
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

$3

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