feat(calendar): replace list view with month/week/day grid + date detail dialog
カレンダー画面を一覧表示から実際のカレンダーグリッドへ変更。 - lib/calendar/grid.ts: 月グリッド/週/時間グリッド/取得範囲(rangeForView)の純粋な日付ヘルパー (+22 unit tests) - components/calendar/: CalendarView(月/週/日 切替・prev/next/今日)・MonthView(truncateチップ)・WeekView・DayView(時間グリッド+終日)・EventDetailDialog(詳細・フォーカス管理)・sourceColors - page.tsx: view/date searchParamsから範囲を計算しServer Componentで取得、CalendarViewへ渡す - e2e: 表示切替・詳細ダイアログ・ナビステップ(週=7日/日=1日)を追加
This commit is contained in:
Ken Yasue
@ -7,27 +7,34 @@ import {
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { ProjectNav } from '@/components/layout/ProjectNav';
|
||||
import { CalendarEventForm } from '@/components/calendar/CalendarEventForm';
|
||||
import { CalendarView } from '@/components/calendar/CalendarView';
|
||||
import {
|
||||
rangeForView,
|
||||
toISODate,
|
||||
parseISODate,
|
||||
type CalendarViewMode,
|
||||
} from '@/lib/calendar/grid';
|
||||
import { ForbiddenError, NotFoundError } from '@/lib/errors';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
const SOURCE_COLORS: Record<string, string> = {
|
||||
event: 'bg-blue-100 text-blue-700',
|
||||
milestone: 'bg-purple-100 text-purple-700',
|
||||
todo: 'bg-yellow-100 text-yellow-700',
|
||||
};
|
||||
const VALID_VIEWS: CalendarViewMode[] = ['month', 'week', 'day'];
|
||||
|
||||
function isCalendarView(v: unknown): v is CalendarViewMode {
|
||||
return typeof v === 'string' && (VALID_VIEWS as string[]).includes(v);
|
||||
}
|
||||
|
||||
export default async function CalendarPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ projectId: string }>;
|
||||
searchParams: Promise<{ from?: string; to?: string }>;
|
||||
searchParams: Promise<{ view?: string; date?: string }>;
|
||||
}) {
|
||||
const user = await getCurrentUser();
|
||||
if (!user) redirect('/login');
|
||||
const { projectId } = await params;
|
||||
const { from, to } = await searchParams;
|
||||
const { view, date } = await searchParams;
|
||||
|
||||
const projectService = createProjectService();
|
||||
let project: Awaited<ReturnType<typeof projectService.getProject>>;
|
||||
@ -40,55 +47,35 @@ export default async function CalendarPage({
|
||||
throw error;
|
||||
}
|
||||
|
||||
// デフォルトは当月
|
||||
const now = new Date();
|
||||
const defaultFrom = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`;
|
||||
const rangeFrom = from ?? defaultFrom;
|
||||
const rangeTo = to ?? defaultFrom.replace(/-01$/, '-28');
|
||||
// 表示モードと基準日を解決(不正値はデフォルトへフォールバック)
|
||||
const resolvedView: CalendarViewMode = isCalendarView(view) ? view : 'month';
|
||||
const today = new Date();
|
||||
const anchor =
|
||||
date && /^\d{4}-\d{2}-\d{2}$/.test(date) ? parseISODate(date) : today;
|
||||
|
||||
// ビューに応じた取得範囲を計算しイベントを取得。
|
||||
// アクセス権は getProject で参加確認済みなのでここでは再チェックしない。
|
||||
const range = rangeForView(resolvedView, anchor);
|
||||
const scheduleService = createScheduleService();
|
||||
const events = scheduleService.getCalendarEvents(user.id, project.id, {
|
||||
from: rangeFrom,
|
||||
to: rangeTo,
|
||||
});
|
||||
const events = scheduleService.getCalendarEvents(user.id, project.id, range);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header user={toPublicUser(user)} />
|
||||
<ProjectNav projectId={project.id} active="calendar" />
|
||||
<main className="mx-auto max-w-3xl space-y-6 p-6">
|
||||
<main className="mx-auto max-w-6xl space-y-6 p-6">
|
||||
<h1 className="text-2xl font-bold">カレンダー</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
期間: {rangeFrom} 〜 {rangeTo}
|
||||
</p>
|
||||
<CalendarEventForm projectId={project.id} defaultDate={defaultFrom} />
|
||||
<section className="space-y-2">
|
||||
{events.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">
|
||||
期間内のイベントはありません。
|
||||
</p>
|
||||
) : (
|
||||
events.map((e) => (
|
||||
<div
|
||||
key={e.key}
|
||||
className="flex items-center justify-between rounded border bg-white p-3 shadow-sm"
|
||||
data-testid={`calendar-event-${e.key}`}
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">{e.title}</p>
|
||||
<p className="text-xs text-gray-400">{e.startAt}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`rounded px-2 py-0.5 text-xs ${
|
||||
SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{e.source}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
<CalendarEventForm
|
||||
projectId={project.id}
|
||||
defaultDate={toISODate(anchor)}
|
||||
/>
|
||||
<CalendarView
|
||||
projectId={project.id}
|
||||
events={events}
|
||||
view={resolvedView}
|
||||
anchorDate={toISODate(anchor)}
|
||||
todayKey={toISODate(today)}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
185
components/calendar/CalendarView.tsx
Normal file
185
components/calendar/CalendarView.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { CalendarEventView } from '@/services/ScheduleService';
|
||||
import {
|
||||
getMonthGrid,
|
||||
getWeekDays,
|
||||
parseISODate,
|
||||
stepAnchor,
|
||||
toISODate,
|
||||
eventsOnDay,
|
||||
type CalendarViewMode,
|
||||
} from '@/lib/calendar/grid';
|
||||
import { WEEKDAY_LABELS } from '@/components/calendar/sourceColors';
|
||||
import { MonthView } from '@/components/calendar/MonthView';
|
||||
import { WeekView } from '@/components/calendar/WeekView';
|
||||
import { DayView } from '@/components/calendar/DayView';
|
||||
import { EventDetailDialog } from '@/components/calendar/EventDetailDialog';
|
||||
|
||||
const VIEW_LABELS: { mode: CalendarViewMode; label: string }[] = [
|
||||
{ mode: 'month', label: '月' },
|
||||
{ mode: 'week', label: '週' },
|
||||
{ mode: 'day', label: '日' },
|
||||
];
|
||||
|
||||
/**
|
||||
* カレンダーUIのクライアントコンテナ。
|
||||
* 表示モード切替・前/次/今日ナビ・詳細ダイアログを管理し、
|
||||
* データ取得はURL searchParams経由でServer Componentに委ねる。
|
||||
*/
|
||||
export function CalendarView({
|
||||
projectId,
|
||||
events,
|
||||
view,
|
||||
anchorDate,
|
||||
todayKey,
|
||||
}: {
|
||||
projectId: number;
|
||||
events: CalendarEventView[];
|
||||
view: CalendarViewMode;
|
||||
anchorDate: string;
|
||||
todayKey: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [selectedDateKey, setSelectedDateKey] = useState<string | null>(null);
|
||||
const anchor = parseISODate(anchorDate);
|
||||
|
||||
function navigate(nextView: CalendarViewMode, nextAnchor: Date) {
|
||||
const params = new URLSearchParams({
|
||||
view: nextView,
|
||||
date: toISODate(nextAnchor),
|
||||
});
|
||||
router.push(`/projects/${projectId}/calendar?${params.toString()}`);
|
||||
}
|
||||
|
||||
function changeView(nextView: CalendarViewMode) {
|
||||
navigate(nextView, anchor);
|
||||
}
|
||||
|
||||
function goPrev() {
|
||||
navigate(view, stepAnchor(view, anchor, -1));
|
||||
}
|
||||
|
||||
function goNext() {
|
||||
navigate(view, stepAnchor(view, anchor, 1));
|
||||
}
|
||||
|
||||
function goToday() {
|
||||
navigate(view, new Date());
|
||||
}
|
||||
|
||||
function openDetail(dateKey: string) {
|
||||
setSelectedDateKey(dateKey);
|
||||
}
|
||||
|
||||
const title = buildTitle(view, anchor);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h2
|
||||
className="text-xl font-bold text-gray-800"
|
||||
data-testid="calendar-title"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex overflow-hidden rounded border">
|
||||
{VIEW_LABELS.map((v) => (
|
||||
<button
|
||||
key={v.mode}
|
||||
type="button"
|
||||
onClick={() => changeView(v.mode)}
|
||||
className={`px-3 py-1 text-sm ${
|
||||
view === v.mode
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
data-testid={`calendar-view-${v.mode}`}
|
||||
>
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={goPrev}
|
||||
className="rounded border bg-white px-2 py-1 text-sm text-gray-600 hover:bg-gray-100"
|
||||
aria-label="前へ"
|
||||
data-testid="calendar-prev"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={goToday}
|
||||
className="rounded border bg-white px-3 py-1 text-sm text-gray-600 hover:bg-gray-100"
|
||||
data-testid="calendar-today"
|
||||
>
|
||||
今日
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={goNext}
|
||||
className="rounded border bg-white px-2 py-1 text-sm text-gray-600 hover:bg-gray-100"
|
||||
aria-label="次へ"
|
||||
data-testid="calendar-next"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{view === 'month' && (
|
||||
<MonthView
|
||||
events={events}
|
||||
weeks={getMonthGrid(anchor.getFullYear(), anchor.getMonth())}
|
||||
anchorMonth={anchor.getMonth()}
|
||||
todayKey={todayKey}
|
||||
onSelectDate={openDetail}
|
||||
/>
|
||||
)}
|
||||
{view === 'week' && (
|
||||
<WeekView
|
||||
events={events}
|
||||
days={getWeekDays(anchor)}
|
||||
todayKey={todayKey}
|
||||
onSelectDate={openDetail}
|
||||
/>
|
||||
)}
|
||||
{view === 'day' && (
|
||||
<DayView
|
||||
day={anchor}
|
||||
events={events}
|
||||
todayKey={todayKey}
|
||||
onSelectDate={openDetail}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedDateKey && (
|
||||
<EventDetailDialog
|
||||
date={parseISODate(selectedDateKey)}
|
||||
events={eventsOnDay(events, selectedDateKey)}
|
||||
onClose={() => setSelectedDateKey(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function buildTitle(view: CalendarViewMode, anchor: Date): string {
|
||||
if (view === 'month') {
|
||||
return `${anchor.getFullYear()}年${anchor.getMonth() + 1}月`;
|
||||
}
|
||||
if (view === 'week') {
|
||||
const days = getWeekDays(anchor);
|
||||
const s = days[0];
|
||||
const e = days[6];
|
||||
return `${s.getFullYear()}年${s.getMonth() + 1}月${s.getDate()}日 〜 ${e.getMonth() + 1}月${e.getDate()}日`;
|
||||
}
|
||||
return `${anchor.getFullYear()}年${anchor.getMonth() + 1}月${anchor.getDate()}日(${WEEKDAY_LABELS[anchor.getDay()]})`;
|
||||
}
|
||||
121
components/calendar/DayView.tsx
Normal file
121
components/calendar/DayView.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
'use client';
|
||||
|
||||
import type { CalendarEventView } from '@/services/ScheduleService';
|
||||
import {
|
||||
eventsOnDay,
|
||||
eventHour,
|
||||
formatTime,
|
||||
getDayHours,
|
||||
toISODate,
|
||||
} from '@/lib/calendar/grid';
|
||||
import {
|
||||
SOURCE_COLORS,
|
||||
SOURCE_CHIP_BORDER,
|
||||
WEEKDAY_LABELS,
|
||||
} from '@/components/calendar/sourceColors';
|
||||
|
||||
/**
|
||||
* 日表示(時間グリッド)。0:00〜23:00 を1時間刻みで表示し、
|
||||
* 時刻付きイベントを該当時刻行に、終日(日付のみ)イベントを上部に配置する。
|
||||
*/
|
||||
export function DayView({
|
||||
day,
|
||||
events,
|
||||
todayKey,
|
||||
onSelectDate,
|
||||
}: {
|
||||
day: Date;
|
||||
events: CalendarEventView[];
|
||||
todayKey: string;
|
||||
onSelectDate: (dateKey: string) => void;
|
||||
}) {
|
||||
const key = toISODate(day);
|
||||
const dayEvents = eventsOnDay(events, key);
|
||||
const allDay = dayEvents.filter((e) => eventHour(e.startAt) === null);
|
||||
const timed = dayEvents.filter((e) => eventHour(e.startAt) !== null);
|
||||
const hours = getDayHours();
|
||||
const isToday = key === todayKey;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-white">
|
||||
<div className="flex items-center justify-between border-b p-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
className="text-left"
|
||||
>
|
||||
<p className="text-lg font-bold text-gray-800">
|
||||
{day.getMonth() + 1}月{day.getDate()}日(
|
||||
{WEEKDAY_LABELS[day.getDay()]})
|
||||
</p>
|
||||
</button>
|
||||
{isToday && (
|
||||
<span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
|
||||
今日
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{allDay.length > 0 && (
|
||||
<div
|
||||
className="border-b bg-gray-50 p-2"
|
||||
data-testid="calendar-all-day-section"
|
||||
>
|
||||
<p className="mb-1 text-xs font-medium text-gray-500">終日</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{allDay.map((e) => (
|
||||
<button
|
||||
key={e.key}
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
title={e.title}
|
||||
className={`max-w-full truncate rounded border px-2 py-0.5 text-xs ${
|
||||
SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
|
||||
} ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
|
||||
data-testid={`calendar-event-${e.key}`}
|
||||
>
|
||||
{e.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-h-[600px] overflow-y-auto">
|
||||
{hours.map((h) => {
|
||||
const hourEvents = timed.filter((e) => eventHour(e.startAt) === h);
|
||||
return (
|
||||
<div
|
||||
key={h}
|
||||
className="flex border-b last:border-b-0"
|
||||
data-testid={`calendar-hour-${String(h).padStart(2, '0')}`}
|
||||
>
|
||||
<div className="w-16 shrink-0 border-r bg-gray-50 p-1 text-right text-xs text-gray-400">
|
||||
{String(h).padStart(2, '0')}:00
|
||||
</div>
|
||||
<div className="flex-1 p-1">
|
||||
{hourEvents.map((e) => (
|
||||
<button
|
||||
key={e.key}
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
title={e.title}
|
||||
className={`mb-1 block w-full truncate rounded border px-2 py-1 text-left text-xs ${
|
||||
SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
|
||||
} ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
|
||||
data-testid={`calendar-event-${e.key}`}
|
||||
>
|
||||
<span className="font-mono text-[10px] opacity-70">
|
||||
{formatTime(e.startAt)}
|
||||
</span>{' '}
|
||||
{e.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
113
components/calendar/EventDetailDialog.tsx
Normal file
113
components/calendar/EventDetailDialog.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { CalendarEventView } from '@/services/ScheduleService';
|
||||
import { formatTime } from '@/lib/calendar/grid';
|
||||
import {
|
||||
SOURCE_COLORS,
|
||||
SOURCE_LABELS,
|
||||
} from '@/components/calendar/sourceColors';
|
||||
|
||||
/**
|
||||
* 指定日のイベント詳細ダイアログ。
|
||||
* セル内ではtruncateされるタイトルも、ここでは全文と説明を表示する。
|
||||
* 開閉時にフォーカスをダイアログへ移し、閉じたら元の要素へ戻す。
|
||||
*/
|
||||
export function EventDetailDialog({
|
||||
date,
|
||||
events,
|
||||
onClose,
|
||||
}: {
|
||||
date: Date;
|
||||
events: CalendarEventView[];
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const previouslyFocused = document.activeElement as HTMLElement | null;
|
||||
dialogRef.current?.focus();
|
||||
return () => {
|
||||
previouslyFocused?.focus?.();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [onClose]);
|
||||
|
||||
const dateLabel = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
data-testid="calendar-detail-backdrop"
|
||||
>
|
||||
<div
|
||||
ref={dialogRef}
|
||||
tabIndex={-1}
|
||||
className="mt-16 w-full max-w-lg rounded-lg bg-white shadow-xl focus:outline-none"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`${dateLabel}のイベント`}
|
||||
data-testid="calendar-detail-dialog"
|
||||
>
|
||||
<div className="flex items-center justify-between border-b p-4">
|
||||
<h2 className="text-lg font-bold text-gray-800">{dateLabel}</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||
aria-label="閉じる"
|
||||
data-testid="calendar-detail-close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-[60vh] space-y-3 overflow-y-auto p-4">
|
||||
{events.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">
|
||||
この日のイベントはありません。
|
||||
</p>
|
||||
) : (
|
||||
events.map((e) => (
|
||||
<div
|
||||
key={e.key}
|
||||
className="rounded border border-gray-200 p-3"
|
||||
data-testid={`calendar-detail-${e.key}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="font-medium text-gray-800 break-words">
|
||||
{e.title}
|
||||
</p>
|
||||
<span
|
||||
className={`shrink-0 rounded px-2 py-0.5 text-xs ${
|
||||
SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{SOURCE_LABELS[e.source] ?? e.source}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
{formatTime(e.startAt)}
|
||||
{e.endAt ? ` 〜 ${formatTime(e.endAt)}` : ''}
|
||||
</p>
|
||||
{e.description && (
|
||||
<p className="mt-2 whitespace-pre-wrap text-sm text-gray-600">
|
||||
{e.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
components/calendar/MonthView.tsx
Normal file
105
components/calendar/MonthView.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
'use client';
|
||||
|
||||
import type { CalendarEventView } from '@/services/ScheduleService';
|
||||
import { eventsOnDay, toISODate } from '@/lib/calendar/grid';
|
||||
import {
|
||||
SOURCE_COLORS,
|
||||
SOURCE_CHIP_BORDER,
|
||||
WEEKDAY_LABELS,
|
||||
} from '@/components/calendar/sourceColors';
|
||||
|
||||
const MAX_VISIBLE_CHIPS = 3;
|
||||
|
||||
/**
|
||||
* 月表示グリッド。日曜始まりの7列グリッドで各日にイベントチップを表示する。
|
||||
* 長いタイトルは truncate し、3件を超える分は「+N件」でまとめる。
|
||||
*/
|
||||
export function MonthView({
|
||||
events,
|
||||
weeks,
|
||||
anchorMonth,
|
||||
todayKey,
|
||||
onSelectDate,
|
||||
}: {
|
||||
events: CalendarEventView[];
|
||||
weeks: Date[][];
|
||||
anchorMonth: number;
|
||||
todayKey: string;
|
||||
onSelectDate: (dateKey: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border bg-white">
|
||||
<div className="grid grid-cols-7 border-b bg-gray-50 text-center text-xs font-medium text-gray-500">
|
||||
{WEEKDAY_LABELS.map((w) => (
|
||||
<div key={w} className="py-2">
|
||||
{w}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
{weeks.map((week, wi) => (
|
||||
<div key={wi} className="grid grid-cols-7 border-b last:border-b-0">
|
||||
{week.map((day) => {
|
||||
const key = toISODate(day);
|
||||
const dayEvents = eventsOnDay(events, key);
|
||||
const inMonth = day.getMonth() === anchorMonth;
|
||||
const isToday = key === todayKey;
|
||||
const visible = dayEvents.slice(0, MAX_VISIBLE_CHIPS);
|
||||
const hidden = dayEvents.length - visible.length;
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`min-h-[110px] border-r border-t p-1 last:border-r-0 ${
|
||||
inMonth ? 'bg-white' : 'bg-gray-50'
|
||||
}`}
|
||||
data-testid={`calendar-day-${key}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
className={`flex h-6 w-6 items-center justify-center rounded-full text-xs ${
|
||||
isToday
|
||||
? 'bg-blue-600 font-bold text-white'
|
||||
: inMonth
|
||||
? 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-gray-300 hover:bg-gray-100'
|
||||
}`}
|
||||
aria-label={`${key} の詳細を開く`}
|
||||
>
|
||||
{day.getDate()}
|
||||
</button>
|
||||
<div className="mt-1 space-y-0.5">
|
||||
{visible.map((e) => (
|
||||
<button
|
||||
key={e.key}
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
title={e.title}
|
||||
className={`block w-full truncate rounded border px-1 text-left text-xs ${
|
||||
SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
|
||||
} ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
|
||||
data-testid={`calendar-event-${e.key}`}
|
||||
>
|
||||
{e.title}
|
||||
</button>
|
||||
))}
|
||||
{hidden > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
aria-label={`${key}の残り${hidden}件を開く`}
|
||||
className="block w-full truncate text-left text-xs text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
+{hidden}件
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
components/calendar/WeekView.tsx
Normal file
91
components/calendar/WeekView.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
|
||||
import type { CalendarEventView } from '@/services/ScheduleService';
|
||||
import { eventsOnDay, formatTime, toISODate } from '@/lib/calendar/grid';
|
||||
import {
|
||||
SOURCE_COLORS,
|
||||
SOURCE_CHIP_BORDER,
|
||||
WEEKDAY_LABELS,
|
||||
} from '@/components/calendar/sourceColors';
|
||||
|
||||
/**
|
||||
* 週表示。日〜土の7日を並べ、各日のイベントを開始時刻付きで表示する。
|
||||
*/
|
||||
export function WeekView({
|
||||
events,
|
||||
days,
|
||||
todayKey,
|
||||
onSelectDate,
|
||||
}: {
|
||||
events: CalendarEventView[];
|
||||
days: Date[];
|
||||
todayKey: string;
|
||||
onSelectDate: (dateKey: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border bg-white">
|
||||
<div className="grid grid-cols-7 border-b bg-gray-50 text-center text-xs font-medium text-gray-500">
|
||||
{days.map((d) => {
|
||||
const key = toISODate(d);
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
className="py-2 hover:bg-gray-100"
|
||||
data-testid={`calendar-weekday-${key}`}
|
||||
>
|
||||
<div className="text-gray-500">{WEEKDAY_LABELS[d.getDay()]}</div>
|
||||
<div
|
||||
className={`mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-sm ${
|
||||
key === todayKey
|
||||
? 'bg-blue-600 font-bold text-white'
|
||||
: 'text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{d.getDate()}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="grid grid-cols-7">
|
||||
{days.map((d) => {
|
||||
const key = toISODate(d);
|
||||
const dayEvents = eventsOnDay(events, key);
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="min-h-[400px] border-r p-1 last:border-r-0"
|
||||
data-testid={`calendar-week-cell-${key}`}
|
||||
>
|
||||
<div className="space-y-1">
|
||||
{dayEvents.length === 0 ? (
|
||||
<p className="px-1 py-1 text-xs text-gray-300">-</p>
|
||||
) : (
|
||||
dayEvents.map((e) => (
|
||||
<button
|
||||
key={e.key}
|
||||
type="button"
|
||||
onClick={() => onSelectDate(key)}
|
||||
title={e.title}
|
||||
className={`block w-full truncate rounded border px-1 py-0.5 text-left text-xs ${
|
||||
SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
|
||||
} ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
|
||||
data-testid={`calendar-event-${e.key}`}
|
||||
>
|
||||
<span className="font-mono text-[10px] opacity-70">
|
||||
{formatTime(e.startAt)}
|
||||
</span>{' '}
|
||||
{e.title}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
components/calendar/sourceColors.ts
Normal file
28
components/calendar/sourceColors.ts
Normal file
@ -0,0 +1,28 @@
|
||||
/** カレンダーイベントの来源ごとの色とラベル。 */
|
||||
export const SOURCE_COLORS: Record<string, string> = {
|
||||
event: 'bg-blue-100 text-blue-700',
|
||||
milestone: 'bg-purple-100 text-purple-700',
|
||||
todo: 'bg-yellow-100 text-yellow-700',
|
||||
};
|
||||
|
||||
export const SOURCE_CHIP_BORDER: Record<string, string> = {
|
||||
event: 'border-blue-200',
|
||||
milestone: 'border-purple-200',
|
||||
todo: 'border-yellow-200',
|
||||
};
|
||||
|
||||
export const SOURCE_LABELS: Record<string, string> = {
|
||||
event: 'イベント',
|
||||
milestone: 'マイルストーン',
|
||||
todo: 'ToDo',
|
||||
};
|
||||
|
||||
export const WEEKDAY_LABELS = [
|
||||
'日',
|
||||
'月',
|
||||
'火',
|
||||
'水',
|
||||
'木',
|
||||
'金',
|
||||
'土',
|
||||
] as const;
|
||||
@ -235,7 +235,7 @@ components/
|
||||
├── chat/ # ChatWindow, MessageInput, MessageList
|
||||
├── todo/ # KanbanBoard, KanbanColumn, TodoCard
|
||||
├── files/ # FileList, Uploader, Lightbox
|
||||
├── calendar/ # CalendarView, EventBadge
|
||||
├── calendar/ # CalendarView, MonthView, WeekView, DayView, EventDetailDialog, CalendarEventForm
|
||||
├── meetings/ # MeetingForm, ConflictWarning
|
||||
├── notes/ # NoteEditor, MarkdownPreview
|
||||
└── notifications/ # NotificationList, NotificationBadge
|
||||
|
||||
159
lib/calendar/grid.ts
Normal file
159
lib/calendar/grid.ts
Normal file
@ -0,0 +1,159 @@
|
||||
/**
|
||||
* カレンダー表示用の純粋な日付計算ヘルパー群。
|
||||
* React にも DB にも依存しないので Unit Test が容易。
|
||||
*
|
||||
* 週の開始は日曜日(Sunday=0)。`WEEK_START` を変更すれば月曜始めにも対応可能。
|
||||
* イベントは構造的部分型 `{ startAt: string }` を要求するだけなので
|
||||
* `CalendarEventView` に依存せず、レイヤ依存規則(lib → services 禁止)を守る。
|
||||
*/
|
||||
|
||||
/** 週の開始曜日 (0=日曜)。 */
|
||||
export const WEEK_START = 0;
|
||||
|
||||
export type CalendarViewMode = 'month' | 'week' | 'day';
|
||||
|
||||
/** Event 風オブジェクト。startAt だけ必須。 */
|
||||
export interface DateableEvent {
|
||||
startAt: string;
|
||||
}
|
||||
|
||||
/** Date を `YYYY-MM-DD` へ変換する(ローカルタイム)。 */
|
||||
export function toISODate(d: Date): string {
|
||||
const y = d.getFullYear();
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
}
|
||||
|
||||
/** `YYYY-MM-DD` をローカル Date(真夜中) へパースする。 */
|
||||
export function parseISODate(s: string): Date {
|
||||
const [y, m, d] = s.split('-').map(Number);
|
||||
return new Date(y, (m ?? 1) - 1, d ?? 1);
|
||||
}
|
||||
|
||||
/** n 日加算した新しい Date を返す。 */
|
||||
export function addDays(d: Date, n: number): Date {
|
||||
const r = new Date(d);
|
||||
r.setDate(r.getDate() + n);
|
||||
return r;
|
||||
}
|
||||
|
||||
/** n 週加算した新しい Date を返す。 */
|
||||
export function addWeeks(d: Date, n: number): Date {
|
||||
return addDays(d, n * 7);
|
||||
}
|
||||
|
||||
/** n 月加算した新しい Date を返す(日付は維持、月跨ぎ時は月末日に丸める)。 */
|
||||
export function addMonths(d: Date, n: number): Date {
|
||||
const r = new Date(d);
|
||||
r.setMonth(r.getMonth() + n);
|
||||
return r;
|
||||
}
|
||||
|
||||
/** 引数の日を含む週の開始日(WEEK_START 基準)を返す。 */
|
||||
export function startOfWeek(d: Date): Date {
|
||||
const r = new Date(d);
|
||||
r.setHours(0, 0, 0, 0);
|
||||
const delta = (r.getDay() - WEEK_START + 7) % 7;
|
||||
r.setDate(r.getDate() - delta);
|
||||
return r;
|
||||
}
|
||||
|
||||
/**
|
||||
* 月カレンダーのグリッド(週の配列)を返す。
|
||||
* 前月/翌月の日を含めて日曜始まり・土曜終わりで埋める。
|
||||
*/
|
||||
export function getMonthGrid(year: number, month: number): Date[][] {
|
||||
const first = new Date(year, month, 1);
|
||||
const gridStart = startOfWeek(first);
|
||||
const last = new Date(year, month + 1, 0);
|
||||
const weeks: Date[][] = [];
|
||||
let cursor = new Date(gridStart);
|
||||
while (cursor <= last) {
|
||||
const week: Date[] = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
week.push(new Date(cursor));
|
||||
cursor = addDays(cursor, 1);
|
||||
}
|
||||
weeks.push(week);
|
||||
}
|
||||
return weeks;
|
||||
}
|
||||
|
||||
/** 引数の日を含む週の 7 日分(日〜土)を返す。 */
|
||||
export function getWeekDays(anchor: Date): Date[] {
|
||||
const start = startOfWeek(anchor);
|
||||
return Array.from({ length: 7 }, (_, i) => addDays(start, i));
|
||||
}
|
||||
|
||||
/** 1日の時間グリッド 0..23 を返す。 */
|
||||
export function getDayHours(): number[] {
|
||||
return Array.from({ length: 24 }, (_, i) => i);
|
||||
}
|
||||
|
||||
/** イベントの開始日を `YYYY-MM-DD` で取り出す(startAt の先頭10文字)。 */
|
||||
export function eventDateKey(startAt: string): string {
|
||||
return startAt.slice(0, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* イベントの開始「時」を返す。時刻なし(日付のみ)なら null(終日扱い)。
|
||||
* `2026-06-15T10:00:00` → 10 / `2026-06-15` → null
|
||||
*/
|
||||
export function eventHour(startAt: string): number | null {
|
||||
if (startAt.length <= 10) return null;
|
||||
const h = parseInt(startAt.slice(11, 13), 10);
|
||||
return Number.isNaN(h) ? null : h;
|
||||
}
|
||||
|
||||
/** `YYYY-MM-DDTHH:mm:ss` または `YYYY-MM-DD` から `HH:mm` を取り出す。 */
|
||||
export function formatTime(startAt: string): string {
|
||||
if (startAt.length <= 10) return '終日';
|
||||
const hh = startAt.slice(11, 13);
|
||||
const mm = startAt.slice(14, 16);
|
||||
return mm ? `${hh}:${mm}` : `${hh}:00`;
|
||||
}
|
||||
|
||||
/** 指定日のイベントだけを抽出する。 */
|
||||
export function eventsOnDay<T extends DateableEvent>(
|
||||
events: T[],
|
||||
dateKey: string
|
||||
): T[] {
|
||||
return events.filter((e) => eventDateKey(e.startAt) === dateKey);
|
||||
}
|
||||
|
||||
/**
|
||||
* ビューと基準日から ScheduleService に渡す { from, to } を計算する。
|
||||
* `to` は `T23:59:59` 付きにし、サービスの文字列比較で当日深夜のイベントも取りこぼさない。
|
||||
* month はグリッド全体(前月/翌月の溢れ日を含む)をカバーする。
|
||||
*/
|
||||
export function rangeForView(
|
||||
view: CalendarViewMode,
|
||||
anchor: Date
|
||||
): { from: string; to: string } {
|
||||
if (view === 'day') {
|
||||
const d = toISODate(anchor);
|
||||
return { from: d, to: `${d}T23:59:59` };
|
||||
}
|
||||
if (view === 'week') {
|
||||
const days = getWeekDays(anchor);
|
||||
const from = toISODate(days[0]);
|
||||
const to = `${toISODate(days[6])}T23:59:59`;
|
||||
return { from, to };
|
||||
}
|
||||
const weeks = getMonthGrid(anchor.getFullYear(), anchor.getMonth());
|
||||
const from = toISODate(weeks[0][0]);
|
||||
const to = `${toISODate(weeks[weeks.length - 1][6])}T23:59:59`;
|
||||
return { from, to };
|
||||
}
|
||||
|
||||
/** ビューに応じて基準日を1単位進める/戻す。 */
|
||||
export function stepAnchor(
|
||||
view: CalendarViewMode,
|
||||
anchor: Date,
|
||||
direction: 1 | -1
|
||||
): Date {
|
||||
if (view === 'month') return addMonths(anchor, direction);
|
||||
if (view === 'week') return addWeeks(anchor, direction);
|
||||
return addDays(anchor, direction);
|
||||
}
|
||||
@ -19,6 +19,24 @@ async function setupOwner(page: import('@playwright/test').Page) {
|
||||
return Number(page.url().match(/\/projects\/(\d+)/)![1]);
|
||||
}
|
||||
|
||||
function isoDate(d: Date): string {
|
||||
const y = d.getFullYear();
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
}
|
||||
|
||||
function addDaysISO(iso: string, n: number): string {
|
||||
const [y, m, d] = iso.split('-').map(Number);
|
||||
const dt = new Date(y, m - 1, d);
|
||||
dt.setDate(dt.getDate() + n);
|
||||
return isoDate(dt);
|
||||
}
|
||||
|
||||
function urlDate(url: string): string | null {
|
||||
return new URL(url).searchParams.get('date');
|
||||
}
|
||||
|
||||
test.describe('calendar & milestones', () => {
|
||||
test('milestone progress reflects related todo completion; calendar aggregates', async ({
|
||||
page,
|
||||
@ -91,9 +109,104 @@ test.describe('calendar & milestones', () => {
|
||||
);
|
||||
expect(evRes.ok()).toBeTruthy();
|
||||
|
||||
// カレンダー画面にイベント+マイルストーン+ToDoが集約表示される
|
||||
// カレンダー画面(月表示)にイベント+マイルストーン+ToDoがグリッド表示される
|
||||
await page.goto(`/projects/${projectId}/calendar`);
|
||||
await expect(page.getByTestId('calendar-view-month')).toBeVisible();
|
||||
await expect(page.getByText(/マイルストーン:/)).toBeVisible();
|
||||
await expect(page.getByText(/ToDo:/)).toBeVisible();
|
||||
});
|
||||
|
||||
test('switches between month/week/day views and opens date detail', async ({
|
||||
page,
|
||||
}) => {
|
||||
const projectId = await setupOwner(page);
|
||||
const todayKey = isoDate(new Date());
|
||||
const eventTitle = unique('Evt');
|
||||
|
||||
// 今日のイベントを作成(デフォルトの月表示で今日のセルに表示される)
|
||||
const evRes = await page.request.post(
|
||||
`/api/projects/${projectId}/calendar/events`,
|
||||
{
|
||||
data: {
|
||||
title: eventTitle,
|
||||
type: 'custom',
|
||||
startAt: `${todayKey}T10:00:00`,
|
||||
},
|
||||
}
|
||||
);
|
||||
expect(evRes.ok()).toBeTruthy();
|
||||
|
||||
await page.goto(`/projects/${projectId}/calendar`);
|
||||
|
||||
// 月表示: 今日のセルにイベントチップ
|
||||
await expect(page.getByTestId('calendar-view-month')).toBeVisible();
|
||||
await expect(page.getByTestId(`calendar-day-${todayKey}`)).toBeVisible();
|
||||
await expect(page.getByText(eventTitle)).toBeVisible();
|
||||
|
||||
// 週表示へ切替
|
||||
await page.getByTestId('calendar-view-week').click();
|
||||
await expect(
|
||||
page.getByTestId(`calendar-week-cell-${todayKey}`)
|
||||
).toBeVisible();
|
||||
await expect(page.getByText(eventTitle)).toBeVisible();
|
||||
|
||||
// 日表示(時間グリッド)へ切替: 10時行にイベント
|
||||
await page.getByTestId('calendar-view-day').click();
|
||||
await expect(page.getByTestId('calendar-hour-10')).toBeVisible();
|
||||
await expect(page.getByText(eventTitle)).toBeVisible();
|
||||
|
||||
// 月表示へ戻す
|
||||
await page.getByTestId('calendar-view-month').click();
|
||||
await expect(page.getByTestId('calendar-view-month')).toBeVisible();
|
||||
|
||||
// 日付をクリックして詳細ダイアログを開く
|
||||
await page.getByLabel(`${todayKey} の詳細を開く`).click();
|
||||
const dialog = page.getByTestId('calendar-detail-dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
await expect(dialog.getByText(eventTitle)).toBeVisible();
|
||||
|
||||
// ダイアログを閉じる
|
||||
await page.getByTestId('calendar-detail-close').click();
|
||||
await expect(dialog).toBeHidden();
|
||||
});
|
||||
|
||||
test('prev/next/today navigation moves the anchor by the view unit', async ({
|
||||
page,
|
||||
}) => {
|
||||
const projectId = await setupOwner(page);
|
||||
await page.goto(`/projects/${projectId}/calendar`);
|
||||
|
||||
const title = page.getByTestId('calendar-title');
|
||||
await expect(title).toContainText('月');
|
||||
|
||||
// 月表示: next でタイトル変化、prev で元に戻る
|
||||
const before = (await title.textContent()) ?? '';
|
||||
await page.getByTestId('calendar-next').click();
|
||||
await expect(title).not.toHaveText(before);
|
||||
await page.getByTestId('calendar-prev').click();
|
||||
await expect(title).toHaveText(before);
|
||||
|
||||
// 今日ボタンで今日に戻る
|
||||
await page.getByTestId('calendar-next').click();
|
||||
await page.getByTestId('calendar-today').click();
|
||||
await expect(title).toHaveText(before);
|
||||
|
||||
// 週表示: next で7日進む
|
||||
await page.getByTestId('calendar-view-week').click();
|
||||
const weekStart = urlDate(page.url());
|
||||
expect(weekStart).not.toBeNull();
|
||||
await page.getByTestId('calendar-next').click();
|
||||
expect(urlDate(page.url())).toBe(addDaysISO(weekStart!, 7));
|
||||
await page.getByTestId('calendar-prev').click();
|
||||
expect(urlDate(page.url())).toBe(weekStart);
|
||||
|
||||
// 日表示: next で1日進む
|
||||
await page.getByTestId('calendar-view-day').click();
|
||||
const dayStart = urlDate(page.url());
|
||||
expect(dayStart).not.toBeNull();
|
||||
await page.getByTestId('calendar-next').click();
|
||||
expect(urlDate(page.url())).toBe(addDaysISO(dayStart!, 1));
|
||||
await page.getByTestId('calendar-prev').click();
|
||||
expect(urlDate(page.url())).toBe(dayStart);
|
||||
});
|
||||
});
|
||||
|
||||
175
tests/unit/lib/calendar/grid.test.ts
Normal file
175
tests/unit/lib/calendar/grid.test.ts
Normal file
@ -0,0 +1,175 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
toISODate,
|
||||
parseISODate,
|
||||
addDays,
|
||||
addMonths,
|
||||
startOfWeek,
|
||||
getMonthGrid,
|
||||
getWeekDays,
|
||||
getDayHours,
|
||||
eventDateKey,
|
||||
eventHour,
|
||||
formatTime,
|
||||
eventsOnDay,
|
||||
rangeForView,
|
||||
stepAnchor,
|
||||
} from '@/lib/calendar/grid';
|
||||
|
||||
describe('calendar/grid', () => {
|
||||
describe('toISODate / parseISODate', () => {
|
||||
it('toISODate formats a local date as YYYY-MM-DD', () => {
|
||||
expect(toISODate(new Date(2026, 5, 15))).toBe('2026-06-15');
|
||||
expect(toISODate(new Date(2026, 0, 9))).toBe('2026-01-09');
|
||||
});
|
||||
|
||||
it('parseISODate round-trips through toISODate', () => {
|
||||
const d = parseISODate('2026-06-15');
|
||||
expect(toISODate(d)).toBe('2026-06-15');
|
||||
});
|
||||
});
|
||||
|
||||
describe('startOfWeek', () => {
|
||||
it('returns the Sunday of the given date week', () => {
|
||||
// 2026-06-17 is a Wednesday
|
||||
expect(toISODate(startOfWeek(new Date(2026, 5, 17)))).toBe('2026-06-14');
|
||||
});
|
||||
|
||||
it('returns the same date when already on Sunday', () => {
|
||||
expect(toISODate(startOfWeek(new Date(2026, 5, 14)))).toBe('2026-06-14');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getMonthGrid', () => {
|
||||
it('produces full Sun-Sat weeks covering the month', () => {
|
||||
// June 2026: 1st is Monday, 30th is Tuesday
|
||||
const weeks = getMonthGrid(2026, 5);
|
||||
for (const week of weeks) {
|
||||
expect(week).toHaveLength(7);
|
||||
expect(week[0].getDay()).toBe(0); // Sunday
|
||||
expect(week[6].getDay()).toBe(6); // Saturday
|
||||
}
|
||||
// First cell is the Sunday on/before June 1 (May 31)
|
||||
expect(toISODate(weeks[0][0])).toBe('2026-05-31');
|
||||
// Last cell is the Saturday on/after June 30 (July 4)
|
||||
expect(toISODate(weeks[weeks.length - 1][6])).toBe('2026-07-04');
|
||||
});
|
||||
|
||||
it('starts on the 1st when the month begins on Sunday', () => {
|
||||
// February 2026: 1st is a Sunday
|
||||
const weeks = getMonthGrid(2026, 1);
|
||||
expect(toISODate(weeks[0][0])).toBe('2026-02-01');
|
||||
});
|
||||
|
||||
it('produces 4 to 6 weeks', () => {
|
||||
const weeks = getMonthGrid(2026, 5);
|
||||
expect(weeks.length).toBeGreaterThanOrEqual(4);
|
||||
expect(weeks.length).toBeLessThanOrEqual(6);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getWeekDays / getDayHours', () => {
|
||||
it('returns 7 consecutive days Sunday-Saturday', () => {
|
||||
const days = getWeekDays(new Date(2026, 5, 17));
|
||||
expect(days).toHaveLength(7);
|
||||
expect(toISODate(days[0])).toBe('2026-06-14');
|
||||
expect(toISODate(days[6])).toBe('2026-06-20');
|
||||
});
|
||||
|
||||
it('returns hours 0..23', () => {
|
||||
expect(getDayHours()).toEqual(Array.from({ length: 24 }, (_, i) => i));
|
||||
});
|
||||
});
|
||||
|
||||
describe('addDays / addMonths', () => {
|
||||
it('addDays moves the date', () => {
|
||||
expect(toISODate(addDays(new Date(2026, 5, 15), 10))).toBe('2026-06-25');
|
||||
expect(toISODate(addDays(new Date(2026, 5, 15), -15))).toBe('2026-05-31');
|
||||
});
|
||||
|
||||
it('addMonths rolls over the year', () => {
|
||||
expect(toISODate(addMonths(new Date(2026, 11, 15), 1))).toBe(
|
||||
'2027-01-15'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('eventDateKey / eventHour / formatTime', () => {
|
||||
it('eventDateKey takes the first 10 chars', () => {
|
||||
expect(eventDateKey('2026-06-15T10:30:00')).toBe('2026-06-15');
|
||||
expect(eventDateKey('2026-06-15')).toBe('2026-06-15');
|
||||
});
|
||||
|
||||
it('eventHour returns the hour for timed events and null otherwise', () => {
|
||||
expect(eventHour('2026-06-15T10:30:00')).toBe(10);
|
||||
expect(eventHour('2026-06-15')).toBeNull();
|
||||
expect(eventHour('2026-06-15T09:00:00')).toBe(9);
|
||||
});
|
||||
|
||||
it('formatTime renders HH:mm or 終日', () => {
|
||||
expect(formatTime('2026-06-15T10:30:00')).toBe('10:30');
|
||||
expect(formatTime('2026-06-15')).toBe('終日');
|
||||
});
|
||||
});
|
||||
|
||||
describe('eventsOnDay', () => {
|
||||
const events = [
|
||||
{ startAt: '2026-06-15T10:00:00', title: 'A' },
|
||||
{ startAt: '2026-06-15', title: 'B' },
|
||||
{ startAt: '2026-06-16T09:00:00', title: 'C' },
|
||||
];
|
||||
|
||||
it('filters events whose start date matches the day key', () => {
|
||||
const result = eventsOnDay(events, '2026-06-15');
|
||||
expect(result.map((e) => e.title)).toEqual(['A', 'B']);
|
||||
});
|
||||
|
||||
it('returns empty when nothing matches', () => {
|
||||
expect(eventsOnDay(events, '2026-07-01')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('rangeForView', () => {
|
||||
it('day range covers a single day ending at T23:59:59', () => {
|
||||
const r = rangeForView('day', new Date(2026, 5, 15));
|
||||
expect(r).toEqual({ from: '2026-06-15', to: '2026-06-15T23:59:59' });
|
||||
});
|
||||
|
||||
it('week range covers Sun-Sat ending at T23:59:59', () => {
|
||||
const r = rangeForView('week', new Date(2026, 5, 17));
|
||||
expect(r).toEqual({ from: '2026-06-14', to: '2026-06-20T23:59:59' });
|
||||
});
|
||||
|
||||
it('month range covers the whole grid including overflow days', () => {
|
||||
const r = rangeForView('month', new Date(2026, 5, 15));
|
||||
expect(r.from).toBe('2026-05-31');
|
||||
expect(r.to).toBe('2026-07-04T23:59:59');
|
||||
});
|
||||
});
|
||||
|
||||
describe('stepAnchor', () => {
|
||||
it('steps months for month view', () => {
|
||||
expect(toISODate(stepAnchor('month', new Date(2026, 5, 15), 1))).toBe(
|
||||
'2026-07-15'
|
||||
);
|
||||
expect(toISODate(stepAnchor('month', new Date(2026, 5, 15), -1))).toBe(
|
||||
'2026-05-15'
|
||||
);
|
||||
});
|
||||
|
||||
it('steps weeks for week view', () => {
|
||||
expect(toISODate(stepAnchor('week', new Date(2026, 5, 17), 1))).toBe(
|
||||
'2026-06-24'
|
||||
);
|
||||
});
|
||||
|
||||
it('steps days for day view', () => {
|
||||
expect(toISODate(stepAnchor('day', new Date(2026, 5, 15), 1))).toBe(
|
||||
'2026-06-16'
|
||||
);
|
||||
expect(toISODate(stepAnchor('day', new Date(2026, 5, 15), -1))).toBe(
|
||||
'2026-06-14'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user