Calendar

weeks に一行一週の日付（CalendarDay）を渡します。月の計算・予定の取得・休日の判断は利用側で行い、Calendarは渡された日付と予定を描きます。weekStart で月曜・日曜始まりを選び、weeks の各行も同じ曜日から並べます。weekNumbers を渡すと、月の各行と週の見出しにISO週番号を出します。

previous・today・next は見出しの隣にリンクで、views は表示形式を切り替える FilterBar のセグメントで置きます。どれもリンクなので、期間や形式を変えた表示は利用側がリンク先で描き直します。actions は見出しの行の終わりに置く操作です。期間の見出しは Section の見出しと同じ15pxの赤の通常の太さの文字です。

月（view="month"）は表の各日に予定を一行ずつ並べます。外枠を持たずに日の間の暖かい灰色の細い線で区切り、日付は各日の末尾側の上に灰色の数字で書きます。今日はセル全体を黄色で塗り、日付を「今日 21」と濃い灰色の太字で書きます。月の初日には、Basecamp 2の「November 1」と同じく、日付の数字の前に同じ灰色の通常の太さで月の名前を続けます（「10月 1」）。outside の日は面を塗らず、日付の数字を淡い灰色にします。画面の幅が40rem以下では、日付の下に予定の有無を示す青い点だけを置き、表の下に「この月の予定」の一覧を出します。

週（view="week"）は weeks の先頭の一行を、0〜24時の時間割で描きます。行の日数で列数が決まり、1日なら日、5日なら稼働日の表示です。時間割は --rx-calendar-scroll-size（既定は min(40rem, 75dvh)）の高さでスクロールし、見出しと終日の行を上に固定します。hours の外側はわずかに塗ります。今日の列は見出しを黄色で塗り、時間割にごく淡い黄色を敷きます。

now を渡すと、今日（current の日）の列に現在時刻を赤茶の破線で引いて時刻を同じ色の太字で書き、開いた時にその1時間前から表示します。今日を含まない週は、稼働時間の始まりの1時間前から表示します。開いた位置はCSSの scroll-initial-target で決まり、対応しないブラウザでは CalendarScrollController を calendar-scroll として登録すると同じ位置へスクロールします。

予定（CalendarEvent）は、start が無ければ終日、end が無いか開始以前なら開始から1時間です。Calendarが終日を先に、時刻のある予定を開始の早い順に並べ替え、時間の重なる予定は横に並べます。月の日と一覧の予定は、日付の数字より一段大きい12pxの文字で、面を塗らずに accent の色（既定は青）の小さな点と題名を、淡い灰色の時刻と一緒に一行で書きます。ホバーすると題名に下線を引きます。終日の予定は accent の色で塗った高さ16pxのピルの形の帯に、白い太字で書きます。週の時間割の予定は、accent の淡い色の面に先頭側の縁を accent の色の線にし、題名を太字で先に、時刻を後に書きます。tentative の予定は塗らずに破線で囲みます。今日より前の日の予定と、今日のうち now までに終わった予定は文字と面を淡くします。

年（view="year"）は months の日付を月をまたいで一続きに並べ、月の始まりの日は先頭側の縁の線を濃くし、月の名前を赤の小さな太字で置きます。週末は淡い灰色、予定のある日は淡い青の面にして末尾側の下に青緑の点を付け、今日は黄色で塗ります。CalendarMonth の href を渡すと、月の名前が月表示へのリンクになります。

一覧（view="agenda"）は weeks のうち予定のある日だけを、日付ごとに月・週と同じ予定の行で並べ、日付を先頭側の列に置き、今日の日付は黄色のハイライトで塗ります。月が変わる所には赤の月の名前と罫線を置きます。表示する日付や予定が無い時は、どの形式でも emptyLabel を表示します。

予定に details（id と内容）を渡すと、予定は押すと詳細のパネルを開くボタンになります。パネルは Popover と同じで、題名・時刻・内容と、href があれば「詳しく見る」のリンクを置きます。PopoverController を popover として登録します。

selection を渡すと（月と週だけ）、日付がボタンになり、CalendarController を calendar として登録すると一日（single）か期間（range）を選べます。選んだ日（期間の両端）はチェックボックスの選んだ状態と同じ淡い青の縦の塗りに紺の縁と紺の数字、期間の間の日は淡い青（#ddeefe）の面にします。選んだ値は calendar:change で受け取り、送信や保存は利用側で行います。Calendarはフォームの入力欄を持たず、選択中は日の href を使いません。日付は重複させず、日付の順に並べます（そうでない時、controllerは動作しません）。

JavaScriptが無い時も、期間の移動と表示形式の切り替えはリンクとして動作し、時間割の初期表示位置はCSSで決めます。日付の選択には CalendarController が必要です。