在构建日期选择器时，有时需要处理异步数据加载或动态日历内容，例如从服务器获取禁用日期或高亮日期。这种情况下，DayCalendarSkeleton 是一个非常有用的组件。它为 DateCalendar 提供了一个骨架屏幕（Skeleton），显示在日期加载之前，用于优化用户体验。

本篇博客将详细介绍 DayCalendarSkeleton API 的使用，包括属性说明、示例代码以及与其他 Material UI 组件的结合使用。

1. 什么是 DayCalendarSkeleton API？

DayCalendarSkeleton 是 Material UI 的一个骨架组件，用于在日历加载内容之前显示一个占位符效果。它常用于需要异步加载数据的日历组件，如动态禁用特定日期或高亮特定日期的场景。

主要特点

• 提供骨架加载动画，改善用户体验。
• 与 DateCalendar 组件结合使用，适配动态加载内容。
• 支持所有标准的 Material UI 样式定制。

2. 安装依赖

在使用之前，请确保安装了 Material UI 和相关的日期选择器包：

npm install @mui/material @mui/x-date-pickers @emotion/react @emotion/styled

3. 快速上手

示例：基本的 DayCalendarSkeleton

以下代码展示了如何在日期加载之前显示 DayCalendarSkeleton：

import React from 'react';
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

const BasicDayCalendarSkeleton = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DayCalendarSkeleton />
    </LocalizationProvider>
  );
};

export default BasicDayCalendarSkeleton;

此示例会在页面上渲染一个简单的日历骨架。

4. DayCalendarSkeleton API 的属性说明

DayCalendarSkeleton 提供了一些关键属性，用于自定义其行为和样式。

5. 高级示例

示例 1：与 DateCalendar 结合使用

以下示例展示了如何在加载异步数据时使用 DayCalendarSkeleton 提供占位符效果：

import React, { useState, useEffect } from 'react';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

const AsyncDateCalendar = () => {
  const [loading, setLoading] = useState(true);
  const [highlightedDates, setHighlightedDates] = useState([]);

  useEffect(() => {
    // 模拟异步数据加载
    setTimeout(() => {
      setHighlightedDates([new Date(2023, 11, 25), new Date(2023, 11, 31)]);
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      {loading ? (
        <DayCalendarSkeleton />
      ) : (
        <DateCalendar
          renderDay={(day, selectedDates, pickersDayProps) => {
            const isHighlighted = highlightedDates.some(
              (date) => date.toDateString() === day.toDateString()
            );
            return (
              <div
                {...pickersDayProps}
                style={{
                  backgroundColor: isHighlighted ? '#ffeb3b' : undefined,
                  borderRadius: '50%',
                }}
              >
                {day.getDate()}
              </div>
            );
          }}
        />
      )}
    </LocalizationProvider>
  );
};

export default AsyncDateCalendar;

示例解析

1. DayCalendarSkeleton 显示在加载数据时。
2. 加载完成后，动态设置高亮日期（例如节假日）。

示例 2：自定义骨架样式

通过 sx 属性，可以自定义骨架的外观。

import React from 'react';
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

const StyledDayCalendarSkeleton = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DayCalendarSkeleton
        sx={{
          backgroundColor: '#f0f0f0',
          borderRadius: '8px',
          padding: '16px',
        }}
      />
    </LocalizationProvider>
  );
};

export default StyledDayCalendarSkeleton;

此代码会修改骨架组件的背景颜色和边框样式。

6. 与其他 Material UI 组件结合使用

DayCalendarSkeleton 可以与其他 Material UI 组件（如进度条、弹窗等）结合，增强用户体验。

示例：结合进度条显示加载状态

import React, { useState, useEffect } from 'react';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import LinearProgress from '@mui/material/LinearProgress';

const CalendarWithLoadingBar = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      {loading ? (
        <>
          <LinearProgress />
          <DayCalendarSkeleton />
        </>
      ) : (
        <DateCalendar />
      )}
    </LocalizationProvider>
  );
};

export default CalendarWithLoadingBar;

7. 使用注意事项

1. 加载时长：确保骨架显示时间足够短，以免影响用户体验。
2. 样式一致性：骨架的样式应与实际内容的样式保持一致，避免视觉突兀。
3. 兼容性：在与其他组件结合时，测试不同的屏幕尺寸和分辨率。

8. 总结

DayCalendarSkeleton API 是一个简单却强大的工具，可以显著提升动态日历加载的用户体验。通过灵活的属性配置和样式自定义，开发者可以轻松地将其集成到各种应用场景中。

希望本文的详细说明和丰富的示例代码能帮助你更好地掌握 DayCalendarSkeleton API 的使用技巧！如果你在开发中有任何疑问，请随时留言讨论！