Calendar

プレビュー

単一日選択モード。ヘッダの「月 / 年」をクリックで月・年ビューに切り替わる。

Time 付き

日付グリッドの下に TimePicker をアタッチしたバリアント。1 枚のカード内に「日付 + 時刻」を組み合わせる。 Figma の Time=true に相当する。

3 つのビュー

• Day view(デフォルト): 月の日付グリッドを表示。日曜は赤(--main-thinca-red)、土曜は青(--secondary-blue)、今日は円枠、選択中は青塗り
• Month view: ヘッダの「n 月」をクリックで切替。2 列 × 6 行で 12 ヶ月を表示。月を選ぶと day view に戻る
• Year view: ヘッダの「n 年」をクリックで切替。3 列 × 7 行で 21 年を表示。前 / 次の矢印で 21 年ずつページング

実装例

"use client";
import { useState } from "react";
import { CalendarWithViews } from "@/components/ui/calendar-with-views";

export function Example() {
  const [selected, setSelected] = useState<Date | null>(null);
  return (
    <CalendarWithViews
      selected={selected}
      onSelect={setSelected}
    />
  );
}

仕様

カード

• 幅 320px / radius 8px / shadow 0 4px 8px 2px rgba(31,41,55,0.30) (LAYER3)
• 背景 白 / border 1px #D1D5DB

日付セル

• 32 × 32px / radius full(円)
• 日曜: --main-thinca-red / 土曜: --secondary-blue
• 当月外の日: --neutral-grey-20(`.is-outside`)
• 今日: 1px 円枠(--text-primary)
• 選択中: 背景 --secondary-blue / 文字 白
• hover: 背景 rgba(0, 102, 204, 0.08)

ヘッダ

• 「月」「年」をそれぞれ独立した pill ボタンとして配置
• 前/次の矢印は 32 × 32px 円形のゴーストボタン

Time footer(Time=true のみ)

• カレンダー下端に border-top(--border-default)で区切ったフッターを追加
• padding 16px / 内側に幅 160px の TimePicker を左寄せで配置
• フッターと日付グリッドは同じカード内に収め、外側で shadow + radius を持つ

利用基準

Figma

Figma で Calendar(day / month / year + Time)を開く ↗