# XCalendar

基于 Ant Design Vue Calendar 的可配置日历组件，支持自定义标题、导航、样式等功能。

## 何时使用

当需要在界面中展示一个功能丰富的日历，并且需要：
- 自定义日历的标题和导航
- 添加自定义操作按钮
- 自定义样式和布局
- 响应日期选择和月份切换事件

## 引用方式

```javascript
import XCalendar from '@vue2-client/base-client/components/common/XCalendar/XCalendar'

export default {
  components: {
    XCalendar
  }
}
```

## 代码演示

```html
<x-calendar
  :configName="calendarConfigName"
  @select="handleSelect"
  @monthChange="handleMonthChange"
  @action="handleAction">
</x-calendar>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| configName | 配置名称，用于从后端获取配置 | String | '' |

### 事件

| 事件名 | 说明 | 回调参数 |
|------|------|------|
| select | 选择日期时触发 | function(date: Moment) |
| back-to-today | 点击"返回当天"按钮时触发 | function(date: Moment) |
| action | 点击操作按钮时触发 | function(date: Moment) |
| add | 点击新增按钮时触发 | function(date: Moment) |
| month-change | 切换月份时触发 | function(date: Moment) |

## 配置说明

组件通过 `configName` 从后端获取配置，配置格式如下：

### 完整配置结构

```json
{
  "header": {
    "show": true,
    "title": "我的日程",
    "showIcon": true,
    "showBackToToday": true,
    "backToTodayText": "返回当天",
    "showMonth": true,
    "showDay": true,
    "monthClickable": false,
    "dayClickable": false
  },
  "subHeader": {
    "show": true,
    "showNavigation": true,
    "prevMonthText": "←",
    "nextMonthText": "→"
  },
  "calendar": {
    "fullscreen": false,
    "locale": "zh-cn"
  },
  "actions": [
    {
      "text": "+ 新增日程",
      "type": "add",
      "handler": "handleAdd"
    }
  ],
  "styles": {
    "wrapper": {},
    "header": {},
    "titleInput": {},
    "subHeader": {},
    "currentDate": {},
    "year": {},
    "actionItem": {},
    "calendarContent": {}
  },
  "events": {
    "select": "select",
    "backToToday": "back-to-today",
    "action": "action",
    "add": "add",
    "monthChange": "month-change"
  }
}
```

### 配置项详细说明

#### 1. header 配置

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| show | 是否显示头部 | boolean | true |
| title | 标题文本 | string | '我的日程' |
| showIcon | 是否显示图标 | boolean | true |
| showBackToToday | 是否显示返回今天按钮 | boolean | true |
| backToTodayText | 返回今天按钮文本 | string | '返回当天' |
| showMonth | 是否显示月份 | boolean | true |
| showDay | 是否显示日期 | boolean | true |
| monthClickable | 月份是否可点击 | boolean | false |
| dayClickable | 日期是否可点击 | boolean | false |

#### 2. subHeader 配置

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| show | 是否显示子标题栏 | boolean | true |
| showNavigation | 是否显示导航按钮 | boolean | true |
| prevMonthText | 上个月按钮文本 | string | '←' |
| nextMonthText | 下个月按钮文本 | string | '→' |

#### 3. calendar 配置

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| fullscreen | 是否全屏显示 | boolean | false |
| locale | 语言设置 | string | 'zh-cn' |

#### 4. actions 配置

每个操作按钮的配置项：

| 参数 | 说明 | 类型 | 示例 |
|------|------|------|------|
| text | 按钮显示文本 | string | '+ 新增日程' |
| type | 按钮类型标识 | string | 'add' |
| handler | 处理函数名称 | string | 'handleAdd' |

#### 5. styles 配置

所有样式配置都接受标准的 CSS 属性对象：

| 参数 | 说明 | 类型 | 示例 |
|------|------|------|------|
| wrapper | 整体容器样式 | object | { background: '#fff' } |
| header | 头部样式 | object | { padding: '16px' } |
| titleInput | 标题输入框样式 | object | { fontSize: '16px' } |
| subHeader | 子标题栏样式 | object | { marginBottom: '20px' } |
| currentDate | 当前日期样式 | object | { color: '#1890ff' } |
| year | 年份样式 | object | { fontSize: '14px' } |
| actionItem | 操作按钮样式 | object | { cursor: 'pointer' } |
| calendarContent | 日历内容区域样式 | object | { padding: '24px' } |

## 使用示例

### 1. 基础使用

```html
<template>
  <x-calendar :configName="'MyCalendarConfig'" @select="onSelect" />
</template>

<script>
export default {
  methods: {
    onSelect(date) {
      console.log('选择的日期：', date.format('YYYY-MM-DD'))
    }
  }
}
</script>
```

### 2. 自定义样式配置

```json
{
  "styles": {
    "wrapper": {
      "backgroundColor": "#f5f5f5",
      "padding": "24px",
      "borderRadius": "8px"
    },
    "header": {
      "borderBottom": "1px solid #e8e8e8",
      "marginBottom": "16px"
    },
    "currentDate": {
      "fontSize": "24px",
      "fontWeight": "bold",
      "color": "#1890ff"
    }
  }
}
```

### 3. 自定义操作按钮

```json
{
  "actions": [
    {
      "text": "+ 新增日程",
      "type": "add",
      "handler": "handleAdd"
    },
    {
      "text": "查看详情",
      "type": "view",
      "handler": "handleView"
    }
  ]
}
```

## 注意事项

1. 组件使用 moment.js 处理日期，确保项目中已正确配置
2. 样式配置支持所有合法的 CSS 属性，使用驼峰命名
3. 自定义事件处理函数需要在父组件中实现
4. 所有配置项都是可选的，未配置时使用默认值
5. 语言设置默认为中文，可通过 calendar.locale 配置修改
6. 样式配置支持响应式设计，可根据需要调整

## 常见问题

### 1. 如何修改日历的默认语言？

通过 calendar 配置项设置：
```json
{
  "calendar": {
    "locale": "en-us"
  }
}
```

### 2. 如何自定义日期显示格式？

可以通过监听 select 事件，在回调函数中自定义格式化：
```javascript
onSelect(date) {
  const formattedDate = date.format('YYYY年MM月DD日')
}
```

### 3. 如何添加自定义操作按钮？

在配置中的 actions 数组中添加按钮配置：
```json
{
  "actions": [
    {
      "text": "自定义按钮",
      "type": "custom",
      "handler": "handleCustom"
    }
  ]
}
```

### 4. 如何处理按钮点击事件？

在父组件中实现对应的处理函数：
```javascript
methods: {
  handleCustom(date) {
    console.log('自定义按钮点击，当前日期：', date.format('YYYY-MM-DD'))
  }
}
```
