react-yearly-calendar-grid 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +170 -0
  2. package/dist/index.d.mts +95 -0
  3. package/dist/index.d.ts +95 -0
  4. package/dist/index.js +1069 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +1064 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +57 -0
package/README.md ADDED
@@ -0,0 +1,170 @@
1
+ # react-yearly-calendar-grid
2
+
3
+ 年間カレンダーを表示するReactコンポーネント。ドラッグ&ドロップでイベントの移動・リサイズが可能。
4
+
5
+ ## インストール
6
+
7
+ ```bash
8
+ npm install react-yearly-calendar-grid
9
+ ```
10
+
11
+ ## 基本的な使い方
12
+
13
+ ```tsx
14
+ import { YearlyCalendar, CalendarEvent } from 'react-yearly-calendar-grid';
15
+
16
+ const events: CalendarEvent[] = [
17
+ {
18
+ id: '1',
19
+ date: new Date(2026, 0, 15),
20
+ title: '会議',
21
+ category: 'work',
22
+ },
23
+ {
24
+ id: '2',
25
+ date: new Date(2026, 1, 10),
26
+ endDate: new Date(2026, 1, 14),
27
+ title: '出張',
28
+ category: 'travel',
29
+ },
30
+ ];
31
+
32
+ const categoryColors = {
33
+ work: '#2563eb',
34
+ travel: '#16a34a',
35
+ };
36
+
37
+ function App() {
38
+ return (
39
+ <div style={{ height: '100vh' }}>
40
+ <YearlyCalendar
41
+ year={2026}
42
+ events={events}
43
+ categoryColors={categoryColors}
44
+ onEventClick={(event) => console.log('Clicked:', event)}
45
+ onDateClick={(date, events) => console.log('Date:', date, events)}
46
+ onEventMove={(event, newStart, newEnd) => {
47
+ console.log('Moved:', event.title, 'to', newStart);
48
+ }}
49
+ />
50
+ </div>
51
+ );
52
+ }
53
+ ```
54
+
55
+ ## Props
56
+
57
+ | Prop | 型 | 必須 | 説明 |
58
+ |------|-----|------|------|
59
+ | `year` | `number` | ○ | 表示する年 |
60
+ | `events` | `CalendarEvent[]` | - | イベント配列 |
61
+ | `categoryColors` | `Record<string, string>` | - | カテゴリごとの色 |
62
+ | `theme` | `ThemeColors` | - | テーマカラー設定 |
63
+ | `onDateClick` | `(date: Date, events: CalendarEvent[]) => void` | - | 日付クリック時 |
64
+ | `onEventClick` | `(event: CalendarEvent) => void` | - | イベントクリック時 |
65
+ | `onEventMove` | `(event, newStartDate, newEndDate) => void` | - | イベント移動/リサイズ時 |
66
+
67
+ ## CalendarEvent
68
+
69
+ ```ts
70
+ interface CalendarEvent {
71
+ id: string; // 一意のID
72
+ date: Date; // 開始日
73
+ endDate?: Date; // 終了日（複数日イベントの場合）
74
+ title: string; // タイトル
75
+ color?: string; // 個別の色（categoryColorsより優先）
76
+ category?: string; // カテゴリ（categoryColorsで色を指定）
77
+ }
78
+ ```
79
+
80
+ ## 機能
81
+
82
+ ### ドラッグ&ドロップ
83
+ イベントをドラッグして別の日に移動できます。複数日イベントは期間を維持したまま移動します。
84
+
85
+ ### リサイズ
86
+ 複数日イベントの上端/下端をドラッグして期間を伸縮できます。
87
+
88
+ ### 月またぎ表示
89
+ 複数月にまたがるイベントは各月に連続して表示されます。
90
+
91
+ ## テーマカスタマイズ
92
+
93
+ ```tsx
94
+ <YearlyCalendar
95
+ year={2026}
96
+ events={events}
97
+ theme={{
98
+ bgSunday: '#ffe4e6', // 日曜日の背景色
99
+ bgSaturday: '#e0f2fe', // 土曜日の背景色
100
+ buttonPrimary: '#059669', // ボタン色
101
+ tooltipBg: '#1f2937', // ツールチップ背景
102
+ }}
103
+ />
104
+ ```
105
+
106
+ ### ThemeColors
107
+
108
+ | プロパティ | 説明 | デフォルト |
109
+ |-----------|------|-----------|
110
+ | `bgWhite` | 通常セル背景 | `#ffffff` |
111
+ | `bgGray50` | ホバー時背景 | `#f9fafb` |
112
+ | `bgGray100` | ヘッダー背景 | `#f3f4f6` |
113
+ | `bgSunday` | 日曜日背景 | `#fef2f2` |
114
+ | `bgSaturday` | 土曜日背景 | `#eff6ff` |
115
+ | `bgDropHighlight` | ドロップ先ハイライト | `rgba(191, 219, 254, 0.5)` |
116
+ | `borderDefault` | ボーダー色 | `#d1d5db` |
117
+ | `borderDropHighlight` | ドロップ先ボーダー | `#3b82f6` |
118
+ | `textPrimary` | メインテキスト | `#111827` |
119
+ | `textSecondary` | サブテキスト | `#4b5563` |
120
+ | `textMuted` | 薄いテキスト | `#6b7280` |
121
+ | `tooltipBg` | ツールチップ背景 | `#111827` |
122
+ | `tooltipText` | ツールチップ文字 | `#ffffff` |
123
+ | `buttonPrimary` | ボタン背景 | `#2563eb` |
124
+ | `buttonPrimaryHover` | ボタンホバー | `#1d4ed8` |
125
+ | `floatingDateBg` | ドラッグ中日付表示 | `#2563eb` |
126
+ | `resizeFloatingBg` | リサイズ中日付表示 | `#9333ea` |
127
+
128
+ ## イベント移動の実装例
129
+
130
+ ```tsx
131
+ import { useState, useCallback } from 'react';
132
+ import { YearlyCalendar, CalendarEvent } from 'react-yearly-calendar-grid';
133
+
134
+ function App() {
135
+ const [events, setEvents] = useState<CalendarEvent[]>([
136
+ { id: '1', date: new Date(2026, 0, 15), title: '予定1' },
137
+ ]);
138
+
139
+ const handleEventMove = useCallback(
140
+ (event: CalendarEvent, newStartDate: Date, newEndDate: Date | undefined) => {
141
+ setEvents((prev) =>
142
+ prev.map((e) =>
143
+ e.id === event.id
144
+ ? { ...e, date: newStartDate, endDate: newEndDate }
145
+ : e
146
+ )
147
+ );
148
+ },
149
+ []
150
+ );
151
+
152
+ return (
153
+ <YearlyCalendar
154
+ year={2026}
155
+ events={events}
156
+ onEventMove={handleEventMove}
157
+ />
158
+ );
159
+ }
160
+ ```
161
+
162
+ ## 注意点
163
+
164
+ - コンテナに高さを指定してください（`height: 100vh` など）
165
+ - カレンダーは親要素いっぱいに広がります
166
+ - 依存ライブラリなし（React/ReactDOM のみ peerDependency）
167
+
168
+ ## License
169
+
170
+ MIT
package/dist/index.d.mts ADDED
@@ -0,0 +1,95 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { CSSProperties } from 'react';
3
+
4
+ interface CalendarEvent {
5
+ id: string;
6
+ date: Date;
7
+ endDate?: Date;
8
+ title: string;
9
+ color?: string;
10
+ category?: string;
11
+ }
12
+ interface ThemeColors {
13
+ bgWhite?: string;
14
+ bgGray50?: string;
15
+ bgGray100?: string;
16
+ bgSunday?: string;
17
+ bgSaturday?: string;
18
+ bgDropHighlight?: string;
19
+ borderDefault?: string;
20
+ borderDropHighlight?: string;
21
+ textPrimary?: string;
22
+ textSecondary?: string;
23
+ textMuted?: string;
24
+ tooltipBg?: string;
25
+ tooltipText?: string;
26
+ dialogOverlay?: string;
27
+ buttonPrimary?: string;
28
+ buttonPrimaryHover?: string;
29
+ floatingDateBg?: string;
30
+ resizeFloatingBg?: string;
31
+ }
32
+ interface YearlyCalendarProps {
33
+ year: number;
34
+ events?: CalendarEvent[];
35
+ onDateClick?: (date: Date, events: CalendarEvent[]) => void;
36
+ onEventClick?: (event: CalendarEvent) => void;
37
+ onEventMove?: (event: CalendarEvent, newStartDate: Date, newEndDate: Date | undefined) => void;
38
+ categoryColors?: Record<string, string>;
39
+ theme?: ThemeColors;
40
+ locale?: string;
41
+ }
42
+ interface DayCellProps {
43
+ date: Date | null;
44
+ events: CalendarEvent[];
45
+ isWeekend: boolean;
46
+ onDateClick?: (date: Date, events: CalendarEvent[]) => void;
47
+ onEventClick?: (event: CalendarEvent) => void;
48
+ }
49
+
50
+ declare function YearlyCalendar({ year, events, onDateClick, onEventClick, onEventMove, categoryColors, theme: customTheme, }: YearlyCalendarProps): react_jsx_runtime.JSX.Element;
51
+
52
+ declare const defaultTheme: Required<ThemeColors>;
53
+ declare function mergeTheme(custom?: ThemeColors): Required<ThemeColors>;
54
+ declare function createStyles(theme: Required<ThemeColors>): {
55
+ container: CSSProperties;
56
+ flexContainer: CSSProperties;
57
+ dayColumn: CSSProperties;
58
+ dayHeaderCell: CSSProperties;
59
+ dayCell: CSSProperties;
60
+ monthColumn: CSSProperties;
61
+ monthHeader: CSSProperties;
62
+ calendarCell: CSSProperties;
63
+ eventBarContainer: CSSProperties;
64
+ eventBar: CSSProperties;
65
+ dropIndicator: CSSProperties;
66
+ dropIndicatorInner: CSSProperties;
67
+ floatingDate: CSSProperties;
68
+ floatingDateContent: CSSProperties;
69
+ floatingDateSubtext: CSSProperties;
70
+ resizeFloatingContent: CSSProperties;
71
+ tooltip: CSSProperties;
72
+ tooltipContent: CSSProperties;
73
+ tooltipTitle: CSSProperties;
74
+ tooltipDate: CSSProperties;
75
+ dialogOverlay: CSSProperties;
76
+ dialogContent: CSSProperties;
77
+ dialogTitle: CSSProperties;
78
+ dialogBody: CSSProperties;
79
+ dialogEventTitle: CSSProperties;
80
+ dialogDateLabel: CSSProperties;
81
+ dialogButtons: CSSProperties;
82
+ dialogCancelButton: CSSProperties;
83
+ dialogConfirmButton: CSSProperties;
84
+ resizeHandle: CSSProperties;
85
+ resizeHandleTop: CSSProperties;
86
+ resizeHandleBottom: CSSProperties;
87
+ indicator: CSSProperties;
88
+ indicatorTop: CSSProperties;
89
+ indicatorBottom: CSSProperties;
90
+ verticalTitle: CSSProperties;
91
+ horizontalTitle: CSSProperties;
92
+ truncate: CSSProperties;
93
+ };
94
+
95
+ export { type CalendarEvent, type DayCellProps, type ThemeColors, YearlyCalendar, type YearlyCalendarProps, createStyles, defaultTheme, mergeTheme };
package/dist/index.d.ts ADDED
@@ -0,0 +1,95 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { CSSProperties } from 'react';
3
+
4
+ interface CalendarEvent {
5
+ id: string;
6
+ date: Date;
7
+ endDate?: Date;
8
+ title: string;
9
+ color?: string;
10
+ category?: string;
11
+ }
12
+ interface ThemeColors {
13
+ bgWhite?: string;
14
+ bgGray50?: string;
15
+ bgGray100?: string;
16
+ bgSunday?: string;
17
+ bgSaturday?: string;
18
+ bgDropHighlight?: string;
19
+ borderDefault?: string;
20
+ borderDropHighlight?: string;
21
+ textPrimary?: string;
22
+ textSecondary?: string;
23
+ textMuted?: string;
24
+ tooltipBg?: string;
25
+ tooltipText?: string;
26
+ dialogOverlay?: string;
27
+ buttonPrimary?: string;
28
+ buttonPrimaryHover?: string;
29
+ floatingDateBg?: string;
30
+ resizeFloatingBg?: string;
31
+ }
32
+ interface YearlyCalendarProps {
33
+ year: number;
34
+ events?: CalendarEvent[];
35
+ onDateClick?: (date: Date, events: CalendarEvent[]) => void;
36
+ onEventClick?: (event: CalendarEvent) => void;
37
+ onEventMove?: (event: CalendarEvent, newStartDate: Date, newEndDate: Date | undefined) => void;
38
+ categoryColors?: Record<string, string>;
39
+ theme?: ThemeColors;
40
+ locale?: string;
41
+ }
42
+ interface DayCellProps {
43
+ date: Date | null;
44
+ events: CalendarEvent[];
45
+ isWeekend: boolean;
46
+ onDateClick?: (date: Date, events: CalendarEvent[]) => void;
47
+ onEventClick?: (event: CalendarEvent) => void;
48
+ }
49
+
50
+ declare function YearlyCalendar({ year, events, onDateClick, onEventClick, onEventMove, categoryColors, theme: customTheme, }: YearlyCalendarProps): react_jsx_runtime.JSX.Element;
51
+
52
+ declare const defaultTheme: Required<ThemeColors>;
53
+ declare function mergeTheme(custom?: ThemeColors): Required<ThemeColors>;
54
+ declare function createStyles(theme: Required<ThemeColors>): {
55
+ container: CSSProperties;
56
+ flexContainer: CSSProperties;
57
+ dayColumn: CSSProperties;
58
+ dayHeaderCell: CSSProperties;
59
+ dayCell: CSSProperties;
60
+ monthColumn: CSSProperties;
61
+ monthHeader: CSSProperties;
62
+ calendarCell: CSSProperties;
63
+ eventBarContainer: CSSProperties;
64
+ eventBar: CSSProperties;
65
+ dropIndicator: CSSProperties;
66
+ dropIndicatorInner: CSSProperties;
67
+ floatingDate: CSSProperties;
68
+ floatingDateContent: CSSProperties;
69
+ floatingDateSubtext: CSSProperties;
70
+ resizeFloatingContent: CSSProperties;
71
+ tooltip: CSSProperties;
72
+ tooltipContent: CSSProperties;
73
+ tooltipTitle: CSSProperties;
74
+ tooltipDate: CSSProperties;
75
+ dialogOverlay: CSSProperties;
76
+ dialogContent: CSSProperties;
77
+ dialogTitle: CSSProperties;
78
+ dialogBody: CSSProperties;
79
+ dialogEventTitle: CSSProperties;
80
+ dialogDateLabel: CSSProperties;
81
+ dialogButtons: CSSProperties;
82
+ dialogCancelButton: CSSProperties;
83
+ dialogConfirmButton: CSSProperties;
84
+ resizeHandle: CSSProperties;
85
+ resizeHandleTop: CSSProperties;
86
+ resizeHandleBottom: CSSProperties;
87
+ indicator: CSSProperties;
88
+ indicatorTop: CSSProperties;
89
+ indicatorBottom: CSSProperties;
90
+ verticalTitle: CSSProperties;
91
+ horizontalTitle: CSSProperties;
92
+ truncate: CSSProperties;
93
+ };
94
+
95
+ export { type CalendarEvent, type DayCellProps, type ThemeColors, YearlyCalendar, type YearlyCalendarProps, createStyles, defaultTheme, mergeTheme };