React & Next.js Guide

Integrate the widget into your React application using a dedicated component. This ensures proper lifecycle management and prevents memory leaks or hydration mismatches.

✓

Lifecycle Safety

Cleans up the script on unmount.

✓

Type Safety

Can be typed with TypeScript props.

✓

SSR Compatible

Works with Next.js and Remix.

Component Code

Back to Configurator

import { useEffect, useRef } from 'react';

export function CalendarWeekWidget() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Load the widget script
    const script = document.createElement('script');
    script.src = 'https://thecalendarweek.com/embed.js';
    script.async = true;
    
    script.onload = () => {
      // Initialize widget after script loads
      if (window.TheCalendarWeek) {
        window.TheCalendarWeek.init();
      }
    };
    
    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div
      ref={containerRef}
      className="tcw-embed"
        data-design="dashboard"
        data-variant="weekdays"
    />
  );
}

Note: If you are using Next.js App Router, ensure this component is a Client Component by adding 'use client' at the top of the file.