コンポーネント一覧へ戻る
1日のアジェンダタイムライン React コンポーネント

これは何か

1日の予定を縦の時間軸で見せる白いパネルです。9:00 から 18:00 の軸に、予定が開始と終了の時刻どおりの位置と高さで並びます。予定はグレーのブロックで、タイトルの前の色の点で種類を見分けます。赤い線と「11:25」の時刻の札は、1分ごとに現在時刻へ進みます。予定を押すと、すぐ下に小さなポップオーバーがばねの動きで開きます。中には日時・場所・参加者のアイコン、Copy link と Join のボタンが並びます。別の予定を押すとポップオーバーが滑って中身が切り替わり、外側のクリックや Esc で閉じます。Today と前後の矢印で日を移れます。予定と日付を差し替えて、カレンダーや予約管理、ダッシュボードの一角にそのまま置けます。

コンポーネント

1日のアジェンダタイムライン

1日の予定を縦の時間軸で見せる白いパネルです。9:00 から 18:00 の軸に、予定が開始と終了の時刻どおりの位置と高さで並びます。予定はグレーのブロックで、タイトルの前の色の点で種類を見分けます。赤い線と「11:25」の時刻の札は、1分ごとに現在時刻へ進みます。予定を押すと、すぐ下に小さなポップオーバーがばねの動きで開きます。中には日時・場所・参加者のアイコン、Copy link と Join のボタンが並びます。別の予定を押すとポップオーバーが滑って中身が切り替わり、外側のクリックや Esc で閉じます。Today と前後の矢印で日を移れます。予定と日付を差し替えて、カレンダーや予約管理、ダッシュボードの一角にそのまま置けます。

確認しています…
ライブプレビュー

Verified Technical Spec

アニメーション
Framer Motion
Reduced motion
確認済み
キーボードフォーカス
確認済み
対応環境
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix 対応

含まれるもの

  • ソースを Cursor / Claude に渡してエージェントに組み込める
  • スマートフォン・タブレット・パソコン対応
  • React · TypeScript · Tailwind CSS · Motion · Lucide の完成 UI

依存パッケージ

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0
  • Motion 12.42.2

技術スタック

  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lucide

バージョン 1.0.0