カレンダー

Calendarコンポーネントは、学習データを月次カレンダービューで表示するインタラクティブなコンポーネントです。各日に学習時間、記録数、詳細な学習項目を表示でき、統計情報と連続学習日数も追跡します。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

月次ビュー: 月ごとのカレンダー表示とナビゲーション
学習データ: 各日の学習時間、記録数、アイテムを表示
統計情報: 月間統計、平均学習時間、連続学習日数
インタラクティブ: クリック可能な日付、ホバーツールチップ
テーマ対応: ライトテーマとダークテーマの自動切り替え
レスポンシブ: モバイルファーストのレスポンシブデザイン
アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応

使用方法

---
import { Calendar } from '@karan-monorepo/ui-core';
---

<kds-calendar
  theme="light"
  year={2024}
  month={0}
  data={{
    '2024-01-15': {
      date: new Date('2024-01-15'),
      learningMinutes: 120,
      itemCount: 3,
      items: [
        { id: '1', title: 'React Tutorial', duration: 60, category: 'Frontend' },
        { id: '2', title: 'TypeScript Basics', duration: 45, category: 'Language' }
      ]
    }
  }}
/>

プロパティ

プロパティ	型	デフォルト	説明
`theme`	`'light' \| 'dark'`	`'light'`	コンポーネントのカラーテーマ
`year`	`number`	現在の年	表示する年
`month`	`number`	現在の月	表示する月（0-11）
`data`	`CalendarData`	`{}`	日付キーによる学習データ
`selectedDate`	`string`	`''`	選択された日付（YYYY-MM-DD形式）

データ構造

CalendarDay

interface CalendarDay {
  date: Date;
  learningMinutes: number;
  itemCount: number;
  items?: Array<{
    id: string;
    title: string;
    duration: number;
    category: string;
  }>;
}

CalendarData

interface CalendarData {
  [dateKey: string]: CalendarDay;
}

使用例

Calendar Component

Interactive calendar component for displaying and tracking learning activities with visual indicators.

Themes

Light Theme

Dark Theme

Usage Examples

Empty Calendar

Calendar with Activity

イベント

month-change

月が変更されたときに発火します。

calendar.addEventListener('month-change', (event) => {
  console.log('New month:', event.detail.year, event.detail.month);
});

day-select

日付が選択されたときに発火します。

calendar.addEventListener('day-select', (event) => {
  console.log('Selected date:', event.detail.date);
  console.log('Day data:', event.detail.data);
});

基本的な使用例

空のカレンダー

<kds-calendar
  theme="light"
  data={{}}
/>

学習データ付きカレンダー

<kds-calendar
  theme="light"
  data={{
    '2024-01-15': {
      date: new Date('2024-01-15'),
      learningMinutes: 120,
      itemCount: 3,
      items: [
        { id: '1', title: 'React Tutorial', duration: 60, category: 'Frontend' },
        { id: '2', title: 'TypeScript Basics', duration: 45, category: 'Language' },
        { id: '3', title: 'CSS Grid', duration: 15, category: 'Styling' }
      ]
    },
    '2024-01-16': {
      date: new Date('2024-01-16'),
      learningMinutes: 90,
      itemCount: 2
    }
  }}
  year={2024}
  month={0}
/>

機能

月間統計

カレンダーは以下の統計を自動計算します：

学習日数: データがある日数
総学習時間: 月間の合計学習時間
総記録数: 月間の合計記録数
平均学習時間: 1日あたりの平均学習時間
連続学習日数: 現在の連続学習ストリーク

ビジュアルインジケーター

ドット: 各日の学習項目数（最大5個）
学習時間: 各日の総学習時間
カラーコーディング: データがある日は強調表示
今日のハイライト: 今日の日付は特別な境界線で強調

インタラクション

月ナビゲーション: 前月/次月/今日ボタン
日付選択: 日付をクリックして詳細を表示
ホバーツールチップ: 日付にホバーして詳細な学習項目を表示

スタイリング

Calendarコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン
アニメーション: スムーズなホバーとトランジション効果

アクセシビリティ

Calendarコンポーネントには適切なアクセシビリティ機能が含まれています：

キーボードナビゲーションサポート
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
フォーカス管理とボタンのアクセシビリティ

ベストプラクティス

データの提供は適切なフォーマットで行い、日付キーはYYYY-MM-DD形式を使用する
学習アイテムには意味のあるタイトルとカテゴリを提供する
イベントリスナーを追加してユーザーインタラクションに対応する
両方のテーマでテストして良好なコントラストと可読性を確保する
月間データを事前に取得してスムーズなナビゲーションを実現する

ブラウザサポート

Calendarコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Flexbox
CSS Grid
JavaScript Date API