React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド

タイプデータ型 = {
  startTime: DOMTimeStamp; // 開始タイムスタンプ endTime: DOMTimeStamp; // 終了タイムスタンプ [propsName: string]: any; // ビジネス データ };

タイプ ContainerType = {
  data: dataType[]; // ビジネスデータ initDay?: DOMTimeStamp; // 初期化タイムスタンプ onChange?: (params: DOMTimeStamp) => void; // 日付変更時のonChangeメソッド height?: number; // ScheduleCantainerコンテナの高さ scheduleRender?: ({
    データ: データ型、
    タイムスタンプ範囲: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; // 渡されたコールバックは、現在のデータのビジネス データと現在のビジネス データのタイムスタンプ範囲を受け取ります。
  businessRender?: ({ timestamp: DOMTimeStamp }) => React.ReactNode; // ビジネスコンポーネントが渡され、フロントエンドの Cai Xukun にクエリが送信されます。画像を見て、覚えていますか?
  mode?: 'day' | 'week'; // 日と週の表示モードを初期化します};

constコンテナ: React.FC<ContainerType> = ({
  初期化日、
  変更時、
  スケジュールレンダリング、
  ビジネスレンダリング、
  データ、
  高さ = 560、
  モード = '日'、
}) => {
  //現在選択されている日付タイムスタンプ const [targetDay, setTargetDay] = useState<DOMTimeStamp>(initDay);
  // 曜日と週を切り替える const [switchWeekandDay, setSwitchWeekandDay] = useState<'day' | 'week'>(mode);

  戻る （
    <div className={style.Calendar_Container}>
      <カレンダーヘッダー
        対象日={対象日}
        setTargetDay={(タイムスタンプ) => {
          onChange(タイムスタンプ);
          ターゲット日を設定します(タイムスタンプ)。
        }}
        ビジネスレンダー = {ビジネスレンダー}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={setSwitchWeekandDay}
      />
      <スケジュールコンテナ
        高さ={高さ}
        データ={データ}
        対象日={対象日}
        スケジュールレンダリング={スケジュールレンダリング}
      />
    </div>
  );
};

const calcWeekDayList: (params: number) => WeekType = (params) => {
    定数結果 = [];
    (i = 1 とします; i < weekDay(params); i++) {
      結果.unshift(パラメータ - 3600 * 1000 * 24 * i);
    }
    (i = 0; i < 7 - weekDay(params) + 1; i++ とします) {
      結果.push(パラメータ + 3600 * 1000 * 24 * i);
    }
    WeekType として [...result] を返します。
  };

定数CalendatrHeader: React.FC<CalendatrHeaderType> = ({
  対象日、
  ターゲット日の設定、
  週と曜日を切り替える、
  ビジネスレンダリング、
  曜日と曜日を切り替える、
}) => {
  // 現在の週の日付 const [dateTextList, setDateTextList] = useState<WeekType | []>([]);
  // この状態は、週を切り替えるときに、1 週間のタイムスタンプを直接増減し、次の週または前の週の日付が自動的に計算されるときです。
  const [currTime, setCurrTime] = useState<number>(targetDay); 

  使用効果(() => {
    日付テキストリストを設定します(計算週日リスト(対象日))。
  }, [対象日]);

  // 現在のタイムスタンプの前後の日付を計算します。週は固定されているので、現在の週の日付を計算するだけです。const calcWeekDayList: (params: number) => WeekType = (params) => {
    定数結果 = [];
    (i = 1 とします; i < weekDay(params); i++) {
      結果.unshift(パラメータ - 3600 * 1000 * 24 * i);
    }
    (i = 0; i < 7 - weekDay(params) + 1; i++ とします) {
      結果.push(パラメータ + 3600 * 1000 * 24 * i);
    }
    WeekType として [...result] を返します。
  };

  const onChangeWeek: (type: 'prevWeek' | 'nextWeek', switchWay: 'week' | 'day') => void = (
    タイプ、
    スイッチウェイ、
  ) => {
    スイッチウェイ === 'week' の場合 {
      定数calcWeekTime =
        type === 'prevWeek' ? currTime - 3600 * 1000 * 24 * 7 : currTime + 3600 * 1000 * 24 * 7;
      現在の時刻を設定します(週の時刻を計算します);
      日付テキストリストを設定します([...calcWeekDayList(calcWeekTime)]);
    }

    （スイッチウェイ === '日'）の場合{
      定数calcWeekTime =
        type === 'prevWeek' ? targetDay - 3600 * 1000 * 24 : targetDay + 3600 * 1000 * 24;
      現在の時刻を設定します(週の時刻を計算します);
      ターゲット日を設定します(計算週時間)。
    }
  };

  戻る （
    <div className={style.Calendar_Header}>
      <デイリーオプション
        対象日={対象日}
        setCurrTime={setCurrTime}
        setTargetDay={setTargetDay}
        dateTextList={dateTextList}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={(値) => {
          曜日と曜日を設定します。
          if (値 === '週') {
            日付テキストリストを設定します(計算週日リスト(対象日))。
          }
        }}
        onChangeWeek={(type) => onChangeWeek(type, switchWeekandDay)}
      />
      {switchWeekandDay === 'week' && (
        <ウィークリーオプション
          対象日={対象日}
          setTargetDay={setTargetDay}
          dateTextList={dateTextList}
        />
      )}
      <div className={style.Calendar_Header_businessRender}>
        <div className={style.Calendar_Header_Zone}>GMT+8</div>
        {businessRender({ タイムスタンプ: ターゲット日 })}
      </div>
    </div>
  );
};

const ScheduleItem: React.FC<ScheduleItemType> = ({
  タイムスタンプ範囲、
  データ項目、
  スケジュールレンダリング、
  幅、
  データ項目の長さ、
}) => {
  // コンテナの高さを計算する const calcHeight: (timestampList: [number, number]) => number = (timestampList) =>
    timestampList.length > 1 ? (timestampList[1] - timestampList[0]) / 1000 / 60 / 2 : 30;
  const calcTop: (startTime: number) => number = (startTime) => moment(startTime).minute() / 2;
  // ScheduleItemの幅を計算する const calcWidth: (w: number, d: number) => string = (w, d) =>
    幅 === 0 || dataItemLength * 幅 < 347 ? '100%' : `${d * w}px`;

  戻る （
    <div style={{ position: 'relative' }} className={style.Calendar_ScheduleItem_Fath}>
      <div
        クラス名={style.Calendar_ScheduleItem}
        スタイル={{ 幅: calcWidth(幅, データ項目の長さ) }}
      >
        {dataItem.map((データ, インデックス) => {
          戻る （
            <フラグメントキー={インデックス}>
              {data.startTime >= タイムスタンプ範囲[0] && data.startTime < タイムスタンプ範囲[1] && (
                <div
                  クラス名={`${style.Calendar_ScheduleItem_container} Calendar_ScheduleItem_container`}
                  スタイル={{
                    高さ: `${calcHeight([data.startTime, data.endTime]) || 30}px`,
                    上: calcTop(data.startTime),
                  }}
                >
                  {scheduleRender({ データ、タイムスタンプ範囲 })}
                </div>
              )}
            </フラグメント>
          );
        })}
      </div>
    </div>
  );
};

レンダリングをスケジュールしますか?: ({
    データ: データ型、
    タイムスタンプ範囲: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; 

const calcHeight: (timestampList: [number, number]) => number = (timestampList) =>
    timestampList.length > 1 ? (timestampList[1] - timestampList[0]) / 1000 / 60 / 2 : 30;

[
  {
    startTime: 1626057075000, // 開始時刻 endTime: 1626070875000, // 終了時刻 value: 'any', // ビジネス データ},
  {
    開始時間: 1626057075000、
    終了時間: 1626070875000、
    値: '任意'、
  },
  {
    開始時間: 1626057075000、
    終了時間: 1626070875000、
    値: '任意'、
  },
  {
    開始時間: 1626057075000、
    終了時間: 1626070875000、
    値: '任意'、
  },
];

(i = 0 とします; i < HoursList.length; i++) {
      結果.push({
        タイムスタンプ範囲: [今日の時刻 + i * 3600 * 1000、今日の時刻 + (i + 1) * 3600 * 1000]、
        dataItem: [ // 現在の時間帯によりスケジュールが競合する可能性があるため、リストをコンポーネントに渡す必要があります...data.filter((item) => {
            戻る （
              アイテム開始時刻 >= 今日時刻 + i * 3600 * 1000 &&
              アイテムの開始時刻 < 今日時刻 + (i + 1) * 3600 * 1000
            );
          }）、
        ]、
      });
    }