import { useState, useMemo } from "react"; import type { CalendarTemplateProps } from "../types"; export default function SwissInternationalTemplate({ title, year, month, habits, landscape, paperSize, onPrevMonth, onNextMonth, onToggleLandscape, isPrintMode, }: CalendarTemplateProps) { const dimensions = { a4: { portrait: { w: 740, h: 1046 }, landscape: { w: 1046, h: 740 } }, letter: { portrait: { w: 720, h: 932 }, landscape: { w: 932, h: 720 } }, }; const currentSize = dimensions[paperSize][landscape ? "landscape" : "portrait"]; const C = { bg: "#ffffff", text: "#000000", border: "#000000", accent: "#ff0000", // Classic Swiss Red muted: "#e0e0e0", gridLine: "#000000", }; const monthNames = [ "JANUAR", "FEBRUAR", "MÄRZ", "APRIL", "MAI", "JUNI", "JULI", "AUGUST", "SEPTEMBER", "OKTOBER", "NOVEMBER", "DEZEMBER" ]; const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; const calendarData = useMemo(() => { const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const weeks = []; let day = 1; for (let i = 0; i < 6; i++) { const week = []; for (let j = 0; j < 7; j++) { if ((i === 0 && j < firstDay) || day > daysInMonth) { week.push(null); } else { week.push(day); day++; } } weeks.push(week); if (day > daysInMonth) break; } return weeks; }, [year, month]); const containerStyle: React.CSSProperties = { width: `${currentSize.w}px`, height: `${currentSize.h}px`, backgroundColor: C.bg, color: C.text, fontFamily: '"Inter", "Helvetica", "Arial", sans-serif', padding: "40px", boxSizing: "border-box", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", border: isPrintMode ? "none" : "1px solid #ddd", margin: isPrintMode ? "0" : "20px auto", }; const headingStyle: React.CSSProperties = { fontSize: "72px", fontWeight: 900, lineHeight: 0.8, letterSpacing: "-0.05em", margin: 0, textTransform: "uppercase", maxWidth: "70%", }; const subHeadingStyle: React.CSSProperties = { fontSize: "24px", fontWeight: 400, marginTop: "10px", letterSpacing: "0.2em", borderTop: `4px solid ${C.text}`, paddingTop: "10px", display: "inline-block", }; const gridStyle: React.CSSProperties = { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", marginTop: "40px", flexGrow: 1, borderTop: `2px solid ${C.border}`, borderLeft: `2px solid ${C.border}`, }; const dayHeaderStyle: React.CSSProperties = { fontSize: "12px", fontWeight: 900, padding: "8px", borderRight: `2px solid ${C.border}`, borderBottom: `2px solid ${C.border}`, textAlign: "right", }; const cellStyle: React.CSSProperties = { borderRight: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}`, padding: "8px", position: "relative", height: "100%", minHeight: "80px", }; const dayNumberStyle: React.CSSProperties = { fontSize: "20px", fontWeight: 700, marginBottom: "10px", display: "block", }; const habitContainerStyle: React.CSSProperties = { display: "flex", flexWrap: "wrap", gap: "4px", }; const habitMarkerStyle = (active: boolean): React.CSSProperties => ({ width: "12px", height: "12px", backgroundColor: active ? C.text : "transparent", border: `1px solid ${C.text}`, display: "inline-block", }); return (

{onPrevMonth && } {onNextMonth && } {onToggleLandscape && }

{title}

{monthNames[month]} {year}

{(month + 1).toString().padStart(2, '0')}

{daysOfWeek.map(day => (

{day}

))} {calendarData.flat().map((day, idx) => (

{day && ( <> {day}

{habits.map(habit => (

))}

)}

))}

DESIGN SYSTEM / GRID-04 / SWISS MODULAR {paperSize.toUpperCase()} / {landscape ? "LANDSCAPE" : "PORTRAIT"}

); }

Sample Calendar