# ResourcePanel 资源面板

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/resource-panel/freepass)
- 平台：PC
- 维护者：蒋贝贝
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/ch/huiyi2/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[ResourcePanel]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from 'react';
import { ResourcePanel } from '@weapp/ui'

interface State {
    daycolumns: any[];
    data: any[];
}

export default class ResourcePanelDemo extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            daycolumns: [
                // {
                //   title: '01:00',
                //   dataIndex: '1',
                // },
                // {
                //   title: '02:00',
                //   dataIndex: '2',
                // },
                // {
                //   title: '03:00',
                //   dataIndex: '3',
                // },
                // {
                //   title: '04:00',
                //   dataIndex: '4',
                // },
                // {
                //   title: '05:00',
                //   dataIndex: '5',
                // },
            
                {
                  title: `06:00`,
                  dataIndex: '6',
                },
                {
                  title: '07:00',
                  dataIndex: '7',
                },
                {
                  title: '08:00',
                  dataIndex: '8',
                },
                {
                  title: '09:00',
                  dataIndex: '9',
                },
                {
                  title: '10:00',
                  dataIndex: '10',
                },
                {
                  title: '11:00',
                  dataIndex: '11',
                },
                {
                  title: '12:00',
                  dataIndex: '12',
                },
            
                {
                  title: '13:00',
                  dataIndex: '13',
                },
                {
                  title: '14:00',
                  dataIndex: '14',
                },
                {
                  title: '15:00',
                  dataIndex: '15',
                },
                {
                  title: '16:00',
                  dataIndex: '16',
                },
                {
                  title: '17:00',
                  dataIndex: '17',
                },
                {
                  title: '18:00',
                  dataIndex: '18',
                },
                {
                  title: '19:00',
                  dataIndex: '19',
                },
                // {
                //   title: '20:00',
                //   dataIndex: '20',
                // },
                // {
                //   title: '21:00',
                //   dataIndex: '21',
                // },
                // {
                //   title: '22:00',
                //   dataIndex: '22',
                // },
                // {
                //   title: '23:00',
                //   dataIndex: '20',
                // },
                // {
                //   title: '24:00',
                //   dataIndex: '24',
                // },
            ],
            data: [
                {
                  id: "148",
                  img: [],
                  name: `401茶室`,
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
                    {
                      "bgcolor": "#EBBF88",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:30",
                      dataIndex: '9_1',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "149",
                  img: [],
                  name: "401茶室",
                  screenShowType: false,
                  selectable: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "150",
                  img: [],
                  name: "401茶室",
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                }
              ]
        }
    }
    renderContentItem = (data?: any) => {
      // console.log('renderContentItem ', data);
      return <div></div>
    }
    render() {
        const { daycolumns, data } = this.state;
        return(<div style={{ height: '100%'}}>
            <ResourcePanel 
                columns={daycolumns}
                data={data}
                sectionCounts={1}
                timeline={true}
                renderContentItem={this.renderContentItem}
            />
        </div>);
    }
}
```

### 自定义列宽及显示

直接引入组件进行使用

```jsx
import React, { Component } from 'react';
import { ResourcePanel,  } from '@weapp/ui'

interface State {
    daycolumns: any[];
    data: any[];
}

export default class ResourcePanelDemo extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            daycolumns: [
                       
                {
                  title: `06:00`,
                  dataIndex: '6',
                },
                {
                  title: '07:00',
                  dataIndex: '7',
                },
                {
                  title: '08:00',
                  dataIndex: '8',
                },
                {
                  title: '09:00',
                  dataIndex: '9',
                },
                {
                  title: '10:00',
                  dataIndex: '10',
                },
                {
                  title: '11:00',
                  dataIndex: '11',
                },
                {
                  title: '12:00',
                  dataIndex: '12',
                },
            
                {
                  title: '13:00',
                  dataIndex: '13',
                },
                {
                  title: '14:00',
                  dataIndex: '14',
                },
                {
                  title: '15:00',
                  dataIndex: '15',
                },
                {
                  title: '16:00',
                  dataIndex: '16',
                },
                {
                  title: '17:00',
                  dataIndex: '17',
                },
                {
                  title: '18:00',
                  dataIndex: '18',
                },
                {
                  title: '19:00',
                  dataIndex: '19',
                },
         
            ],
            data: [
                {
                  id: "148",
                  img: [],
                  name: `401-茶话室`,
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9_1',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
                    {
                      "bgcolor": "#EBBF88",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:30",
                      dataIndex: '9_2',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17_1',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "149",
                  img: [],
                  name: "402-会客厅",
                  screenShowType: false,
                  selectable: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9_1',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17_2',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "150",
                  img: [],
                  name: "403-党委办公室",
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9_2',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17_2',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "158",
                  img: [],
                  name: `401茶室`,
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9_1',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
                    {
                      "bgcolor": "#EBBF88",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:30",
                      dataIndex: '9_2',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
              ]
        }
    }

    renderContentItem = (data?: any) => {
      // console.log('renderContentItem ', data);
      return <div></div>
    }

    renderHeader = (data?: any) => {
      return <div>
        自定义组件
      </div>
    }

    render() {
        const { daycolumns, data } = this.state;
        return(<div style={{ height: '100%'}}>
            <ResourcePanel 
                columns={daycolumns}
                data={data}
                sectionCounts={2}
                cellWidth={145}
                renderContentItem={this.renderContentItem}
                renderHeader={this.renderHeader}
                scroll={{
                  y: 100,
                }}
            />
        </div>);
    }
}
```

### 自定义渲染表单单元格

直接引入组件进行使用

```jsx
import React, { Component } from 'react';
import { Popover, ResourcePanel } from '@weapp/ui'
import { isEmpty } from '../../../../utils';

interface State {
    daycolumns: any[];
    data: any[];
}

export default class ResourcePanelDemo extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            daycolumns: [
                // {
                //   title: '01:00',
                //   dataIndex: '1',
                // },
                // {
                //   title: '02:00',
                //   dataIndex: '2',
                // },
                // {
                //   title: '03:00',
                //   dataIndex: '3',
                // },
                // {
                //   title: '04:00',
                //   dataIndex: '4',
                // },
                // {
                //   title: '05:00',
                //   dataIndex: '5',
                // },
            
                {
                  title: `06:00`,
                  dataIndex: '6',
                },
                {
                  title: '07:00',
                  dataIndex: '7',
                },
                {
                  title: '08:00',
                  dataIndex: '8',
                },
                {
                  title: '09:00',
                  dataIndex: '9',
                },
                {
                  title: '10:00',
                  dataIndex: '10',
                },
                {
                  title: '11:00',
                  dataIndex: '11',
                },
                {
                  title: '12:00',
                  dataIndex: '12',
                },
            
                {
                  title: '13:00',
                  dataIndex: '13',
                },
                {
                  title: '14:00',
                  dataIndex: '14',
                },
                {
                  title: '15:00',
                  dataIndex: '15',
                },
                {
                  title: '16:00',
                  dataIndex: '16',
                },
                {
                  title: '17:00',
                  dataIndex: '17',
                },
                {
                  title: '18:00',
                  dataIndex: '18',
                },
                {
                  title: '19:00',
                  dataIndex: '19',
                },
                // {
                //   title: '20:00',
                //   dataIndex: '20',
                // },
                // {
                //   title: '21:00',
                //   dataIndex: '21',
                // },
                // {
                //   title: '22:00',
                //   dataIndex: '22',
                // },
                // {
                //   title: '23:00',
                //   dataIndex: '20',
                // },
                // {
                //   title: '24:00',
                //   dataIndex: '24',
                // },
            ],
            data: [
                {
                  id: "148",
                  img: [],
                  name: `401茶室`,
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
                    {
                      "bgcolor": "#EBBF88",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:30",
                      dataIndex: '9_1',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "149",
                  img: [],
                  name: "401茶室",
                  screenShowType: false,
                  selectable: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "150",
                  img: [],
                  name: "401茶室",
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                }
              ]
        }
    }
    renderContentItem = (datas?: any) => {
      const { col,data,section } = datas
      const meetingData = section?.title?.[0]
      const popup = <div style={{padding:"0 6px" }}>
                <div>
                {
                meetingData?.map( (i: any, index:any) => {
                return <div key={index}>{i}</div>
                })
                }
              </div>
      </div>;
      const content =  isEmpty(meetingData) ?  <div style={{ height:30}}></div> : <Popover    
      popup={popup}
      placement={'top'}
      popoverType="tooltip"
      className="testPopover"
    >
      <div style={{ height:30}}></div>
    </Popover>
      return content
    }
    render() {
        const { daycolumns, data } = this.state;
        return(<div style={{ height: '100%'}}>
            <ResourcePanel 
                columns={daycolumns}
                data={data}
                sectionCounts={1}
                timeline={true}
                renderContentItem={this.renderContentItem}
            />
        </div>);
    }
}
```

### 按住ctrl单元格多选

参数见API

```jsx
import React, { Component } from 'react';
import { Button, Popover, ResourcePanel } from '@weapp/ui'
import { isEmpty } from '../../../../utils';

interface State {
  daycolumns: any[];
  data: any[];
}

export default class ResourcePanelDemo extends Component<any, State> {
  ref: React.RefObject<any> = React.createRef();
  constructor(props: any) {
    super(props);
    this.state = {
      daycolumns: [
        // {
        //   title: '01:00',
        //   dataIndex: '1',
        // },
        // {
        //   title: '02:00',
        //   dataIndex: '2',
        // },
        // {
        //   title: '03:00',
        //   dataIndex: '3',
        // },
        // {
        //   title: '04:00',
        //   dataIndex: '4',
        // },
        // {
        //   title: '05:00',
        //   dataIndex: '5',
        // },

        {
          title: `06:00`,
          dataIndex: '6',
        },
        {
          title: '07:00',
          dataIndex: '7',
        },
        {
          title: '08:00',
          dataIndex: '8',
        },
        {
          title: '09:00',
          dataIndex: '9',
        },
        {
          title: '10:00',
          dataIndex: '10',
        },
        {
          title: '11:00',
          dataIndex: '11',
        },
        {
          title: '12:00',
          dataIndex: '12',
        },

        {
          title: '13:00',
          dataIndex: '13',
        },
        {
          title: '14:00',
          dataIndex: '14',
        },
        {
          title: '15:00',
          dataIndex: '15',
        },
        {
          title: '16:00',
          dataIndex: '16',
        },
        {
          title: '17:00',
          dataIndex: '17',
        },
        {
          title: '18:00',
          dataIndex: '18',
        },
        {
          title: '19:00',
          dataIndex: '19',
        },
        // {
        //   title: '20:00',
        //   dataIndex: '20',
        // },
        // {
        //   title: '21:00',
        //   dataIndex: '21',
        // },
        // {
        //   title: '22:00',
        //   dataIndex: '22',
        // },
        // {
        //   title: '23:00',
        //   dataIndex: '20',
        // },
        // {
        //   title: '24:00',
        //   dataIndex: '24',
        // },
      ],
      data: [
        {
          id: "148",
          img: [],
          name: `401茶室`,
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              dataIndex: '9',
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#EBBF88",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:30",
              dataIndex: '9_1',
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              dataIndex: '17',
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "149",
          img: [],
          name: "401茶室",
          screenShowType: false,
          selectable: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              dataIndex: '9',
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              dataIndex: '17',
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "150",
          img: [],
          name: "401茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        }
      ]
    }
  }

  setRef = (el: any) => {
    this.ref = { current: el };
  };
  renderContentItem = (datas?: any) => {
    const { col, data, section } = datas
    const meetingData = section?.title?.[0]
    const popup = <div style={{ padding: "0 6px" }}>
      <div>
        {
          meetingData?.map((i: any, index: any) => {
            return <div key={index}>{i}</div>
          })
        }
      </div>
    </div>;
    const content = isEmpty(meetingData) ? <div style={{ height: 30 }}></div> : <Popover
      popup={popup}
      placement={'top'}
      popoverType="tooltip"
      className="testPopover"
    >
      <div style={{ height: 30 }}></div>
    </Popover>
    return content
  }

  showSelect = () => {
    const { ref } = this;
    const selectData = ref?.current?.getCtrlEvent()
    console.log(selectData)
    alert(`选中了${selectData?.length}项`)
  }
  dargEnd = (data:any)=>{
    console.log('dargEnd',data)
  }
  clearSelect = () => {
    const { ref } = this;
    ref?.current?.clearCtrlEvent()
    alert(`清空了选中项`)
  }
  render() {
    const { daycolumns, data } = this.state;
    return (<div style={{ height: '100%' }}>
      <Button onClick={this.showSelect}>点击展示选中</Button>
      <Button onClick={this.clearSelect}>点击清空选中</Button>
      <ResourcePanel
        columns={daycolumns}
        data={data}
        sectionCounts={1}
        timeline={true}
        renderContentItem={this.renderContentItem}
        enableCtrlEvent
        dragEnd={this.dargEnd}
        ref={this.setRef}
      />
    </div>);
  }
}
```

### 支持移入十字高亮

参数见API

```jsx
import React, { Component } from 'react';
import { Button, Popover, ResourcePanel } from '@weapp/ui'
import { isEmpty } from '../../../../utils';

interface State {
  daycolumns: any[];
  data: any[];
}

export default class ResourcePanelDemo extends Component<any, State> {
  ref: React.RefObject<any> = React.createRef();
  constructor(props: any) {
    super(props);
    this.state = {
      daycolumns: [
        // {
        //   title: '01:00',
        //   dataIndex: '1',
        // },
        // {
        //   title: '02:00',
        //   dataIndex: '2',
        // },
        // {
        //   title: '03:00',
        //   dataIndex: '3',
        // },
        // {
        //   title: '04:00',
        //   dataIndex: '4',
        // },
        // {
        //   title: '05:00',
        //   dataIndex: '5',
        // },

        {
          title: `06:00`,
          dataIndex: '6',
        },
        {
          title: '07:00',
          dataIndex: '7',
        },
        {
          title: '08:00',
          dataIndex: '8',
        },
        {
          title: '09:00',
          dataIndex: '9',
        },
        {
          title: '10:00',
          dataIndex: '10',
        },
        {
          title: '11:00',
          dataIndex: '11',
        },
        {
          title: '12:00',
          dataIndex: '12',
        },

        {
          title: '13:00',
          dataIndex: '13',
        },
        {
          title: '14:00',
          dataIndex: '14',
        },
        {
          title: '15:00',
          dataIndex: '15',
        },
        {
          title: '16:00',
          dataIndex: '16',
        },
        {
          title: '17:00',
          dataIndex: '17',
        },
        {
          title: '18:00',
          dataIndex: '18',
        },
        {
          title: '19:00',
          dataIndex: '19',
        },
        // {
        //   title: '20:00',
        //   dataIndex: '20',
        // },
        // {
        //   title: '21:00',
        //   dataIndex: '21',
        // },
        // {
        //   title: '22:00',
        //   dataIndex: '22',
        // },
        // {
        //   title: '23:00',
        //   dataIndex: '20',
        // },
        // {
        //   title: '24:00',
        //   dataIndex: '24',
        // },
      ],
      data: [
        {
          id: "148",
          img: [],
          name: `401茶室`,
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              dataIndex: '9',
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#EBBF88",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:30",
              dataIndex: '9_1',
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              dataIndex: '17',
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "149",
          img: [],
          name: "401茶室",
          screenShowType: false,
          selectable: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              dataIndex: '9',
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              dataIndex: '17',
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "150",
          img: [],
          name: "401茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "151",
          img: [],
          name: "402茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "152",
          img: [],
          name: "403茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "153",
          img: [],
          name: "404茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "153",
          img: [],
          name: "404茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "153",
          img: [],
          name: "404茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "153",
          img: [],
          name: "404茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        },
        {
          id: "153",
          img: [],
          name: "404茶室",
          screenShowType: false,
          info: [
            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [],
              "time": "09:00",
              "title": [
                [
                  "会议名称:远程会议",
                  "应到人数:1",
                  "召集人:诸嘉诚",
                  "联系人:诸嘉诚",
                  "开始时间:2021-04-25 09:00",
                  "结束时间:2021-04-25 12:00"
                ]
              ],
              "content": 1
            },

            {
              "bgcolor": "#AFDC9E",
              "fontcolor": "#000000",
              "meetings": [
                {
                  "name": "新销售培训",
                  "id": "46584"
                }
              ],
              "time": "17:00",
              "title": [
                [
                  "会议名称:新销售培训",
                  "应到人数:2",
                  "召集人:刘建辉",
                  "联系人:刘建辉",
                  "开始时间:2021-04-25 17:00",
                  "结束时间:2021-04-25 18:59"
                ]
              ],
              "content": 1
            },

          ],
        }
      ]
    }
  }

  setRef = (el: any) => {
    this.ref = { current: el };
  };
  renderContentItem = (datas?: any) => {
    const { col, data, section } = datas
    const meetingData = section?.title?.[0]
    const popup = <div style={{ padding: "0 6px" }}>
      <div>
        {
          meetingData?.map((i: any, index: any) => {
            return <div key={index}>{i}</div>
          })
        }
      </div>
    </div>;
    const content = isEmpty(meetingData) ? <div style={{ height: 30 }}></div> : <Popover
      popup={popup}
      placement={'top'}
      popoverType="tooltip"
      className="testPopover"
    >
      <div style={{ height: 30 }}></div>
    </Popover>
    return content
  }

  showSelect = () => {
    const { ref } = this;
    const selectData = ref?.current?.getCtrlEvent()
    console.log(selectData)
    alert(`选中了${selectData?.length}项`)
  }
  dargEnd = (data:any)=>{
    console.log('dargEnd',data)
  }
  clearSelect = () => {
    const { ref } = this;
    ref?.current?.clearCtrlEvent()
    alert(`清空了选中项`)
  }
  render() {
    const { daycolumns, data } = this.state;
    return (<div style={{ height: '100%' }}>
      <ResourcePanel
        columns={daycolumns}
        data={data}
        sectionCounts={1}
        timeline={true}
        renderContentItem={this.renderContentItem}
        ref={this.setRef}
        hoverCrossHighlight
        crossHighlightColor="rgb(235, 191, 136)"
      />
    </div>);
  }
}
```

### 支持点击分页

参数见API

```jsx
import React, { Component } from 'react';
import { ResourcePanel } from '@weapp/ui'

interface State {
    daycolumns: any[];
    data: any[];
    loading: boolean
}

export default class ResourcePanelDemo extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading:false,
            daycolumns: [
                // {
                //   title: '01:00',
                //   dataIndex: '1',
                // },
                // {
                //   title: '02:00',
                //   dataIndex: '2',
                // },
                // {
                //   title: '03:00',
                //   dataIndex: '3',
                // },
                // {
                //   title: '04:00',
                //   dataIndex: '4',
                // },
                // {
                //   title: '05:00',
                //   dataIndex: '5',
                // },
            
                {
                  title: `06:00`,
                  dataIndex: '6',
                },
                {
                  title: '07:00',
                  dataIndex: '7',
                },
                {
                  title: '08:00',
                  dataIndex: '8',
                },
                {
                  title: '09:00',
                  dataIndex: '9',
                },
                {
                  title: '10:00',
                  dataIndex: '10',
                },
                {
                  title: '11:00',
                  dataIndex: '11',
                },
                {
                  title: '12:00',
                  dataIndex: '12',
                },
            
                {
                  title: '13:00',
                  dataIndex: '13',
                },
                {
                  title: '14:00',
                  dataIndex: '14',
                },
                {
                  title: '15:00',
                  dataIndex: '15',
                },
                {
                  title: '16:00',
                  dataIndex: '16',
                },
                {
                  title: '17:00',
                  dataIndex: '17',
                },
                {
                  title: '18:00',
                  dataIndex: '18',
                },
                {
                  title: '19:00',
                  dataIndex: '19',
                },
                // {
                //   title: '20:00',
                //   dataIndex: '20',
                // },
                // {
                //   title: '21:00',
                //   dataIndex: '21',
                // },
                // {
                //   title: '22:00',
                //   dataIndex: '22',
                // },
                // {
                //   title: '23:00',
                //   dataIndex: '20',
                // },
                // {
                //   title: '24:00',
                //   dataIndex: '24',
                // },
            ],
            data: [
                {
                  id: "148",
                  img: [],
                  name: `401茶室`,
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
                    {
                      "bgcolor": "#EBBF88",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:30",
                      dataIndex: '9_1',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "149",
                  img: [],
                  name: "401茶室",
                  screenShowType: false,
                  selectable: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      dataIndex: '9',
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      dataIndex: '17',
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                },
                {
                  id: "150",
                  img: [],
                  name: "401茶室",
                  screenShowType: false,
                  info: [
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [],
                      "time": "09:00",
                      "title": [
                        [
                          "会议名称:远程会议",
                          "应到人数:1",
                          "召集人:诸嘉诚",
                          "联系人:诸嘉诚",
                          "开始时间:2021-04-25 09:00",
                          "结束时间:2021-04-25 12:00"
                        ]
                      ],
                      "content": 1
                    },
            
            
                    {
                      "bgcolor": "#AFDC9E",
                      "fontcolor": "#000000",
                      "meetings": [
                        {
                          "name": "新销售培训",
                          "id": "46584"
                        }
                      ],
                      "time": "17:00",
                      "title": [
                        [
                          "会议名称:新销售培训",
                          "应到人数:2",
                          "召集人:刘建辉",
                          "联系人:刘建辉",
                          "开始时间:2021-04-25 17:00",
                          "结束时间:2021-04-25 18:59"
                        ]
                      ],
                      "content": 1
                    },
            
                  ],
                }
              ],
            
        }
    }
    renderContentItem = (data?: any) => {
      // console.log('renderContentItem ', data);
      return <div></div>
    }
    onLoadMore = () => {
    }
    render() {
        const { daycolumns, data } = this.state;
        return(<div style={{ height: '100%'}}>
            <ResourcePanel 
                columns={daycolumns}
                data={data}
                sectionCounts={1}
                timeline={true}
                renderContentItem={this.renderContentItem}
                showMore
                hasMore
                onLoadMore={this.onLoadMore}
                loading={this.state.loading}
            />
        </div>);
    }
}
```

### 跨行选中

支持矩形选区，可配置横向/竖向选中，支持无需Ctrl键多选

```jsx
import React, { Component } from 'react';
import { ResourcePanel } from '@weapp/ui'

interface State {
    columns: any[];
    data: any[];
    enableHorizontalSelect: boolean;
    enableVerticalSelect: boolean;
    enableCtrlEvent: boolean;
    enableMultiSelectWithoutCtrl: boolean;
    ctrlSelectResult: any[];
    getCtrlEventResult: any[];
    resourcePanelInstance: any;
}

export default class ResourcePanelCrossSelectDemo extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            columns: [
                { title: '08:00', dataIndex: '8' },
                { title: '09:00', dataIndex: '9' },
                { title: '10:00', dataIndex: '10' },
                { title: '11:00', dataIndex: '11' },
                { title: '12:00', dataIndex: '12' },
                { title: '13:00', dataIndex: '13' },
                { title: '14:00', dataIndex: '14' },
                { title: '15:00', dataIndex: '15' },
                { title: '16:00', dataIndex: '16' },
                { title: '17:00', dataIndex: '17' },
            ],
            data: [
                { id: '1', name: '会议室 A', info: [] },
                { id: '2', name: '会议室 B', info: [] },
                { id: '3', name: '会议室 C', info: [] },
                { id: '4', name: '会议室 D', info: [] },
                { id: '5', name: '会议室 E', info: [] },
                { id: '6', name: '会议室 F', info: [] },
                { id: '7', name: '会议室 G', info: [] },
                { id: '8', name: '会议室 H', info: [] },
            ],
            enableHorizontalSelect: true,
            enableVerticalSelect: true,
            enableCtrlEvent: false,
            enableMultiSelectWithoutCtrl: false,
            ctrlSelectResult: [],
            getCtrlEventResult: [],
            resourcePanelInstance: null,
        }
    }

    toggleHorizontalSelect = () => {
        this.setState(prevState => ({
            enableHorizontalSelect: !prevState.enableHorizontalSelect
        }));
    }

    toggleVerticalSelect = () => {
        this.setState(prevState => ({
            enableVerticalSelect: !prevState.enableVerticalSelect
        }));
    }

    toggleCtrlEvent = () => {
        this.setState(prevState => ({
            enableCtrlEvent: !prevState.enableCtrlEvent,
            ctrlSelectResult: [] // 切换时清空结果
        }));
    }

    toggleMultiSelectWithoutCtrl = () => {
        this.setState(prevState => ({
            enableMultiSelectWithoutCtrl: !prevState.enableMultiSelectWithoutCtrl,
            ctrlSelectResult: [] // 切换时清空结果
        }));
    }

    handleCtrlSelect = (ctrlEvent: any) => {
        console.log('Ctrl 多选结果:', ctrlEvent);
        this.setState({ ctrlSelectResult: ctrlEvent });
    }

    handleGetInstance = (instance: any) => {
        console.log('ResourcePanel 实例已获取:', instance);
        this.setState({ resourcePanelInstance: instance });
    }

    handleGetCtrlEvent = () => {
        const { resourcePanelInstance } = this.state;
        if (resourcePanelInstance?.getCtrlEvent) {
            const result = resourcePanelInstance.getCtrlEvent();
            console.log('getCtrlEvent() 返回结果:', result);
            this.setState({ getCtrlEventResult: result });
        } else {
            console.log('getCtrlEvent 方法不可用，请先开启 Ctrl 多选');
        }
    }

    handleClearCtrlEvent = () => {
        const { resourcePanelInstance } = this.state;
        if (resourcePanelInstance?.clear) {
            resourcePanelInstance.clear();
            resourcePanelInstance.clearCtrlEvent();
            this.setState({ ctrlSelectResult: [], getCtrlEventResult: [] });
        }
    }

    handleDragEnd = (args: any) => {
        console.log('拖拽结束:', args);
    }

    renderContentItem = (data?: any) => {
        return <div></div>
    }

    getModeDescription = () => {
        const { enableHorizontalSelect, enableVerticalSelect, enableCtrlEvent, enableMultiSelectWithoutCtrl } = this.state;
        const modes = [];
        
        if (enableHorizontalSelect && enableVerticalSelect) {
            modes.push('矩形选区（跨行跨列）');
        } else if (enableHorizontalSelect && !enableVerticalSelect) {
            modes.push('仅行内横向连续选中');
        } else if (!enableHorizontalSelect && enableVerticalSelect) {
            modes.push('仅列内竖向连续选中');
        } else {
            modes.push('无法选中范围（仅单选）');
        }
        
        if (enableCtrlEvent) {
            modes.push('Ctrl 多选已开启');
            if (enableMultiSelectWithoutCtrl) {
                modes.push('无需Ctrl键');
            }
        }
        
        return modes.join(' + ');
    }

    renderCtrlResult = () => {
        const { ctrlSelectResult, enableCtrlEvent } = this.state;
        
        if (!enableCtrlEvent) {
            return null;
        }
        
        return (
            <div style={{ 
                marginTop: 16, 
                padding: 12, 
                background: '#f0f5ff', 
                borderRadius: 4,
                border: '1px solid #adc6ff'
            }}>
                <div style={{ fontWeight: 600, marginBottom: 8 }}>
                    Ctrl 多选结果（{ctrlSelectResult.length} 个选区）:
                </div>
                {ctrlSelectResult.length === 0 ? (
                    <div style={{ color: '#666', fontSize: 13 }}>
                        按住 Ctrl/Cmd 键，然后拖拽选择区域，选择完成后抬起 Ctrl/Cmd 键查看结果
                    </div>
                ) : (
                    <div style={{ maxHeight: 150, overflow: 'auto' }}>
                        {ctrlSelectResult.map((item: any, index: number) => (
                            <div key={index} style={{ 
                                padding: '8px 12px', 
                                marginBottom: 8, 
                                background: '#fff',
                                borderRadius: 4,
                                fontSize: 13
                            }}>
                                <div><strong>选区 {index + 1}:</strong></div>
                                <div>范围: {item.start?.join(',')} → {item.end?.join(',')}</div>
                                <div>单元格: [{item.scope?.slice(0, 5).join(', ')}{item.scope?.length > 5 ? '...' : ''}]</div>
                                <div>总计: {item.scope?.length} 个单元格</div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        );
    }

    renderGetCtrlEventResult = () => {
        const { getCtrlEventResult, enableCtrlEvent } = this.state;
        
        if (!enableCtrlEvent) {
            return null;
        }
        
        return (
            <div style={{ 
                marginTop: 16, 
                padding: 12, 
                background: '#fff7e6', 
                borderRadius: 4,
                border: '1px solid #ffd591'
            }}>
                <div style={{ fontWeight: 600, marginBottom: 8 }}>
                    getCtrlEvent() 结果（{getCtrlEventResult.length} 个选区）:
                </div>
                {getCtrlEventResult.length === 0 ? (
                    <div style={{ color: '#666', fontSize: 13 }}>
                        点击上方「获取选中」按钮查看当前选中的数据
                    </div>
                ) : (
                    <div style={{ maxHeight: 150, overflow: 'auto' }}>
                        {getCtrlEventResult.map((item: any, index: number) => (
                            <div key={index} style={{ 
                                padding: '8px 12px', 
                                marginBottom: 8, 
                                background: '#fff',
                                borderRadius: 4,
                                fontSize: 13
                            }}>
                                <div><strong>选区 {index + 1}:</strong></div>
                                <div>范围: {item.start?.join(',')} → {item.end?.join(',')}</div>
                                <div>单元格: [{item.scope?.slice(0, 5).join(', ')}{item.scope?.length > 5 ? '...' : ''}]</div>
                                <div>总计: {item.scope?.length} 个单元格</div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        );
    }

    render() {
        const { columns, data, enableHorizontalSelect, enableVerticalSelect, enableCtrlEvent, enableMultiSelectWithoutCtrl, getCtrlEventResult } = this.state;
        const isMac = typeof navigator !== 'undefined' && navigator.platform?.toUpperCase().includes('MAC');
        const { resourcePanelInstance } = this.state;
        const hasInstance = !!resourcePanelInstance;
        
        return (
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ marginBottom: 16, padding: '16px', background: '#f5f5f5', borderRadius: 4 }}>
                    <h4 style={{ marginBottom: 12 }}>跨行选中 Demo</h4>
                    
                    <div style={{ marginBottom: 12 }}>
                        <strong>当前模式：</strong>
                        <span style={{ color: '#1890ff', marginLeft: 8 }}>{this.getModeDescription()}</span>
                    </div>
                    
                    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
                        <button 
                            onClick={this.toggleHorizontalSelect}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: enableHorizontalSelect ? '#1890ff' : '#ccc',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            横向选中: {enableHorizontalSelect ? '开' : '关'}
                        </button>
                        
                        <button 
                            onClick={this.toggleVerticalSelect}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: enableVerticalSelect ? '#1890ff' : '#ccc',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            竖向选中: {enableVerticalSelect ? '开' : '关'}
                        </button>
                        
                        <button 
                            onClick={this.toggleCtrlEvent}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: enableCtrlEvent ? '#52c41a' : '#ccc',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            Ctrl多选: {enableCtrlEvent ? '开' : '关'}
                        </button>
                        
                        {enableCtrlEvent && (
                            <>
                                <button 
                                    onClick={this.toggleMultiSelectWithoutCtrl}
                                    style={{ 
                                        padding: '8px 16px', 
                                        cursor: 'pointer',
                                        background: enableMultiSelectWithoutCtrl ? '#13c2c2' : '#ccc',
                                        color: '#fff',
                                        border: 'none',
                                        borderRadius: 4
                                    }}
                                >
                                    无需Ctrl键: {enableMultiSelectWithoutCtrl ? '开' : '关'}
                                </button>
                                
                                <button 
                                    onClick={this.handleGetCtrlEvent}
                                    disabled={!hasInstance}
                                    style={{ 
                                        padding: '8px 16px', 
                                        cursor: hasInstance ? 'pointer' : 'not-allowed',
                                        background: hasInstance ? '#722ed1' : '#ccc',
                                        color: '#fff',
                                        border: 'none',
                                        borderRadius: 4,
                                        opacity: hasInstance ? 1 : 0.6
                                    }}
                                >
                                    获取选中
                                </button>
                                
                                <button 
                                    onClick={this.handleClearCtrlEvent}
                                    disabled={!hasInstance}
                                    style={{ 
                                        padding: '8px 16px', 
                                        cursor: hasInstance ? 'pointer' : 'not-allowed',
                                        background: hasInstance ? '#eb2f96' : '#ccc',
                                        color: '#fff',
                                        border: 'none',
                                        borderRadius: 4,
                                        opacity: hasInstance ? 1 : 0.6
                                    }}
                                >
                                    清除选中
                                </button>
                            </>
                        )}
                    </div>
                    
                    <div style={{ fontSize: 13, color: '#666' }}>
                        <p><strong>组合效果说明：</strong></p>
                        <ul style={{ margin: '8px 0', paddingLeft: 20 }}>
                            <li>横向开 + 竖向关 = 仅行内横向连续选中</li>
                            <li>横向开 + 竖向开 = 矩形选区（跨行跨列）</li>
                            <li>横向关 + 竖向开 = 仅列内竖向连续选中</li>
                            <li>横向关 + 竖向关 = 无法选中范围（仅单选）</li>
                        </ul>
                        
                        {enableCtrlEvent && (
                            <div style={{ marginTop: 12, padding: 12, background: '#fff', borderRadius: 4 }}>
                                <p><strong>Ctrl 多选使用方法：</strong></p>
                                <ol style={{ margin: '8px 0', paddingLeft: 20 }}>
                                    <li>按住 <kbd style={{ 
                                        padding: '2px 6px', 
                                        background: '#f5f5f5', 
                                        border: '1px solid #d9d9d9',
                                        borderRadius: 4,
                                        fontFamily: 'monospace'
                                    }}>{isMac ? '⌘ Cmd' : 'Ctrl'}</kbd> 键（开启无需Ctrl键后跳过此步）</li>
                                    <li>在表格中拖拽选择区域</li>
                                    <li>选择完成后抬起 <kbd style={{ 
                                        padding: '2px 6px', 
                                        background: '#f5f5f5', 
                                        border: '1px solid #d9d9d9',
                                        borderRadius: 4,
                                        fontFamily: 'monospace'
                                    }}>{isMac ? '⌘ Cmd' : 'Ctrl'}</kbd> 键（如已开启无需Ctrl键则直接抬起鼠标）</li>
                                    <li>多选结果将显示在下方的结果区域</li>
                                    <li>点击「获取选中」按钮可随时获取当前选中的数据</li>
                                </ol>
                                <p style={{ color: '#fa8c16' }}>
                                    提示：开启「无需Ctrl键」后，可直接拖拽多选，无需按住任何修饰键
                                </p>
                            </div>
                        )}
                    </div>
                </div>
                
                <div style={{ flex: 1, minHeight: 0 }}>
                    <ResourcePanel 
                       
                        columns={columns}
                        data={data}
                        sectionCounts={1}
                        timeline={true}
                        enableHorizontalSelect={enableHorizontalSelect}
                        enableVerticalSelect={enableVerticalSelect}
                        enableCtrlEvent={enableCtrlEvent}
                        enableMultiSelectWithoutCtrl={enableMultiSelectWithoutCtrl}
                        onCtrlSelect={this.handleCtrlSelect}
                        dragEnd={this.handleDragEnd}
                        renderContentItem={this.renderContentItem}
                        getInstance={this.handleGetInstance}
                    />
                </div>
                
                {this.renderCtrlResult()}
                {this.renderGetCtrlEventResult()}
            </div>
        );
    }
}
```

### 点击扩展选中

点击同行单元格时自动扩展选中范围（需配合enableMultiSelectWithoutCtrl使用）

```jsx
import React, { Component } from 'react';
import { ResourcePanel } from '@weapp/ui'

interface State {
    columns: any[];
    data: any[];
    enableCtrlEvent: boolean;
    enableMultiSelectWithoutCtrl: boolean;
    enableClickSelectExpand: boolean;
    enableHorizontalSelect: boolean;
    enableVerticalSelect: boolean;
    ctrlSelectResult: any[];
    resourcePanelInstance: any;
}

export default class ResourcePanelClickSelectExpandDemo extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            columns: [
                { title: '08:00', dataIndex: '8' },
                { title: '09:00', dataIndex: '9' },
                { title: '10:00', dataIndex: '10' },
                { title: '11:00', dataIndex: '11' },
                { title: '12:00', dataIndex: '12' },
                { title: '13:00', dataIndex: '13' },
                { title: '14:00', dataIndex: '14' },
                { title: '15:00', dataIndex: '15' },
                { title: '16:00', dataIndex: '16' },
                { title: '17:00', dataIndex: '17' },
            ],
            data: [
                { id: '1', name: '会议室 A', info: [] },
                { id: '2', name: '会议室 B', info: [] },
                { id: '3', name: '会议室 C', info: [] },
                { id: '4', name: '会议室 D', info: [] },
                { id: '5', name: '会议室 E', info: [] },
                { id: '6', name: '会议室 F', info: [] },
                { id: '7', name: '会议室 G', info: [] },
                { id: '8', name: '会议室 H', info: [] },
            ],
            enableCtrlEvent: true,
            enableMultiSelectWithoutCtrl: true,
            enableClickSelectExpand: false,
            enableHorizontalSelect: true,
            enableVerticalSelect: false,
            ctrlSelectResult: [],
            resourcePanelInstance: null,
        }
    }

    toggleCtrlEvent = () => {
        this.setState(prevState => ({
            enableCtrlEvent: !prevState.enableCtrlEvent,
            ctrlSelectResult: []
        }));
    }

    toggleMultiSelectWithoutCtrl = () => {
        this.setState(prevState => ({
            enableMultiSelectWithoutCtrl: !prevState.enableMultiSelectWithoutCtrl,
            ctrlSelectResult: []
        }));
    }

    toggleClickSelectExpand = () => {
        this.setState(prevState => ({
            enableClickSelectExpand: !prevState.enableClickSelectExpand,
            ctrlSelectResult: []
        }));
    }

    toggleHorizontalSelect = () => {
        this.setState(prevState => ({
            enableHorizontalSelect: !prevState.enableHorizontalSelect,
            ctrlSelectResult: []
        }));
    }

    toggleVerticalSelect = () => {
        this.setState(prevState => ({
            enableVerticalSelect: !prevState.enableVerticalSelect,
            ctrlSelectResult: []
        }));
    }

    handleCtrlSelect = (ctrlEvent: any) => {
        console.log('点击扩展选中结果:', ctrlEvent);
        this.setState({ ctrlSelectResult: ctrlEvent });
    }

    handleGetInstance = (instance: any) => {
        console.log('ResourcePanel 实例已获取:', instance);
        this.setState({ resourcePanelInstance: instance });
    }

    handleClearCtrlEvent = () => {
        const { resourcePanelInstance } = this.state;
        if (resourcePanelInstance?.clear) {
            resourcePanelInstance.clear();
            resourcePanelInstance.clearCtrlEvent();
            this.setState({ ctrlSelectResult: [] });
        }
    }

    handleDragEnd = (args: any) => {
        console.log('拖拽结束:', args);
    }

    renderContentItem = (data?: any) => {
        return <div></div>
    }

    getModeDescription = () => {
        const { enableCtrlEvent, enableMultiSelectWithoutCtrl, enableClickSelectExpand, enableHorizontalSelect, enableVerticalSelect } = this.state;
        const modes = [];
        
        if (enableCtrlEvent) {
            modes.push('Ctrl 多选已开启');
            if (enableMultiSelectWithoutCtrl) {
                modes.push('无需 Ctrl 键');
            }
            if (enableClickSelectExpand) {
                modes.push('点击扩展选中已开启');
            }
        }
        
        if (!enableHorizontalSelect && !enableVerticalSelect) {
            modes.push('单选模式');
        } else {
            if (enableHorizontalSelect) {
                modes.push('横向选中');
            }
            if (enableVerticalSelect) {
                modes.push('竖向选中');
            }
        }
        
        return modes.length > 0 ? modes.join(' + ') : '多选功能未开启';
    }

    renderCtrlResult = () => {
        const { ctrlSelectResult, enableCtrlEvent } = this.state;
        
        if (!enableCtrlEvent) {
            return null;
        }
        
        return (
            <div style={{ 
                marginTop: 16, 
                padding: 12, 
                background: '#f0f5ff', 
                borderRadius: 4,
                border: '1px solid #adc6ff'
            }}>
                <div style={{ fontWeight: 600, marginBottom: 8 }}>
                    选中结果（{ctrlSelectResult.length} 个选区）:
                </div>
                {ctrlSelectResult.length === 0 ? (
                    <div style={{ color: '#666', fontSize: 13 }}>
                        点击单元格进行选择
                    </div>
                ) : (
                    <div style={{ maxHeight: 200, overflow: 'auto' }}>
                        {ctrlSelectResult.map((item: any, index: number) => (
                            <div key={index} style={{ 
                                padding: '8px 12px', 
                                marginBottom: 8, 
                                background: '#fff',
                                borderRadius: 4,
                                fontSize: 13
                            }}>
                                <div><strong>选区 {index + 1}:</strong></div>
                                <div>范围: {item.start?.join(',')} → {item.end?.join(',')}</div>
                                <div>单元格: [{item.scope?.join(', ')}]</div>
                                <div>总计: {item.scope?.length} 个单元格</div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        );
    }

    render() {
        const { columns, data, enableCtrlEvent, enableMultiSelectWithoutCtrl, enableClickSelectExpand, enableHorizontalSelect, enableVerticalSelect } = this.state;
        
        return (
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ marginBottom: 16, padding: '16px', background: '#f5f5f5', borderRadius: 4 }}>
                    <h4 style={{ marginBottom: 12 }}>点击扩展选中 Demo</h4>
                    
                    <div style={{ marginBottom: 12 }}>
                        <strong>当前模式：</strong>
                        <span style={{ color: '#1890ff', marginLeft: 8 }}>{this.getModeDescription()}</span>
                    </div>
                    
                    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
                        <button 
                            onClick={this.toggleCtrlEvent}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: enableCtrlEvent ? '#52c41a' : '#ccc',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            Ctrl多选: {enableCtrlEvent ? '开' : '关'}
                        </button>
                        
                        {enableCtrlEvent && (
                            <>
                                <button 
                                    onClick={this.toggleMultiSelectWithoutCtrl}
                                    style={{ 
                                        padding: '8px 16px', 
                                        cursor: 'pointer',
                                        background: enableMultiSelectWithoutCtrl ? '#13c2c2' : '#ccc',
                                        color: '#fff',
                                        border: 'none',
                                        borderRadius: 4
                                    }}
                                >
                                    无需Ctrl键: {enableMultiSelectWithoutCtrl ? '开' : '关'}
                                </button>
                                
                                {enableMultiSelectWithoutCtrl && (
                                    <button 
                                        onClick={this.toggleClickSelectExpand}
                                        style={{ 
                                            padding: '8px 16px', 
                                            cursor: 'pointer',
                                            background: enableClickSelectExpand ? '#fa8c16' : '#ccc',
                                            color: '#fff',
                                            border: 'none',
                                            borderRadius: 4
                                        }}
                                    >
                                        点击扩展选中: {enableClickSelectExpand ? '开' : '关'}
                                    </button>
                                )}
                            </>
                        )}
                        
                        <button 
                            onClick={this.toggleHorizontalSelect}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: enableHorizontalSelect ? '#722ed1' : '#ccc',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            横向选中: {enableHorizontalSelect ? '开' : '关'}
                        </button>
                        
                        <button 
                            onClick={this.toggleVerticalSelect}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: enableVerticalSelect ? '#d46b08' : '#ccc',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            竖向选中: {enableVerticalSelect ? '开' : '关'}
                        </button>
                        
                        <button 
                            onClick={this.handleClearCtrlEvent}
                            style={{ 
                                padding: '8px 16px', 
                                cursor: 'pointer',
                                background: '#eb2f96',
                                color: '#fff',
                                border: 'none',
                                borderRadius: 4
                            }}
                        >
                            清除选中
                        </button>
                    </div>
                    
                    {(enableClickSelectExpand || !enableHorizontalSelect || !enableVerticalSelect) && (
                        <div style={{ fontSize: 13, color: '#666', marginTop: 12 }}>
                            <p><strong>选中模式说明：</strong></p>
                            <ul style={{ margin: '8px 0', paddingLeft: 20 }}>
                                <li><strong>横向选中：</strong>开启后支持从左到右/从右到左框选</li>
                                <li><strong>竖向选中：</strong>开启后支持从上到下/从下到上框选</li>
                                <li><strong>两者都关：</strong>单选模式，只选中起点单元格</li>
                                <li><strong>只开横向：</strong>框选只在本行生效</li>
                                <li><strong>只开竖向：</strong>框选只在本列生效</li>
                            </ul>
                            {enableClickSelectExpand && (
                                <>
                                    <p><strong>点击扩展选中功能说明：</strong></p>
                                    <ul style={{ margin: '8px 0', paddingLeft: 20 }}>
                                        <li><strong>点击选中：</strong>点击同行任意单元格，只选中该单元格（清除该行其他选中项）</li>
                                        <li><strong>连续扩展：</strong>当该行只有1个选中单元格时，再次点击同行另一格，自动选中中间区域</li>
                                        <li><strong>跨行不受影响：</strong>只清除当前行的选中项，保留其他所有行的选中状态</li>
                                    </ul>
                                    <p style={{ color: '#fa8c16' }}>
                                        <strong>使用示例：</strong>点击第1行第3格 → 点击第1行第5格 → 自动选中第1行的3-5格
                                    </p>
                                </>
                            )}
                        </div>
                    )}
                </div>
                
                <div style={{ flex: 1, minHeight: 0 }}>
                    <ResourcePanel 
                       
                        columns={columns}
                        data={data}
                        sectionCounts={1}
                        timeline={true}
                        enableCtrlEvent={enableCtrlEvent}
                        enableHorizontalSelect={enableHorizontalSelect}
                        enableVerticalSelect={enableVerticalSelect}
                        enableMultiSelectWithoutCtrl={enableMultiSelectWithoutCtrl}
                        enableClickSelectExpand={enableClickSelectExpand}
                        onCtrlSelect={this.handleCtrlSelect}
                        dragEnd={this.handleDragEnd}
                        renderContentItem={this.renderContentItem}
                        getInstance={this.handleGetInstance}
                    />
                </div>
                
                {this.renderCtrlResult()}
            </div>
        );
    }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | class | string |  |  |
| columns | 列配置 | any[] |  |  |
| data | 表单数据 | any[] |  |  |
| sectionCounts | 单元格中的份额 | number |  | 1 |
| timeline | 天模式下的时间线 | boolean |  | false |
| cellWidth | 单元格宽度 | number |  |  |
| renderHeader | 自定义渲染表头 | (data?: any) => React.ReactNode |  |  |
| renderSiderItem | 自定义渲染表单行头部 | (data?: any) => React.ReactNode |  |  |
| renderSideContainer | 自定义渲染表单行头容器 | (data: any, content: any) => React.ReactNode |  |  |
| renderHeadItem | 自定义渲染表头列 | (data?: any) => React.ReactNode |  |  |
| renderContentItem | 自定义渲染表单单元格 | (data?: any) => React.ReactNode |  |  |
| dragStart | 拖拽开始 | (data?: any) => void |  |  |
| dragMove | 拖拽开始 | (data?: any) => void |  |  |
| dragEnd | 拖拽开始 | (data?: any) => void |  |  |
| scroll | 滚动设置 | { x?: number, y?: number } |  |  |
| resize | 窗口尺寸变化事件 | () => void |  |  |
| nodataRender | 暂无数据支持自定义渲染 | () => React.ReactNode |  |  |
| sideWidth | 侧边栏宽度 | number |  |  |
| enableCtrlEvent | 是否允许ctrl选中事件 | boolean | 否 | false |
| onCtrlSelect | ctrl多选事件 | (data?: any) => void | 否 |  |
| enableMultiSelectWithoutCtrl | 无需按住Ctrl键即可多选（需配合enableCtrlEvent使用） | boolean | 否 | false |
| hoverCrossHighlight | 移入十字高亮 | boolean | 否 | false |
| crossHighlightColor | 十字高亮颜色 | string | 否 | #5d9cec |
| showMore | 是否开启点击分页 | boolean |  | false |
| onLoadMore | 点击分页事件 | () => void |  |  |
| loading | 点击分页后数据加载状态 | boolean | 否 |  |
| hasMore | 点击分页后是否最后一页 | boolean | 否 |  |
| shouldAutoScrollToBottom | 点击更多后是否自动滚动到底部 | boolean | 否 | true |
| enableHorizontalSelect | 是否允许横向连续选中 | boolean | 否 | true |
| enableVerticalSelect | 是否允许竖向连续选中 | boolean | 否 | false |
| enableClickSelectExpand | 启用同行点击扩展选中（需配合enableMultiSelectWithoutCtrl使用） | boolean | 否 | false |
## 数据格式说明

列表数据格式参考：

```
  data: [
    {
      id: "148",
      img: [],
      name: `401茶室`,
      selectable: false, // 配置是否可拖拽
      info: [
        {
          "bgcolor": "#AFDC9E",
          "fontcolor": "#000000",
          "meetings": [],
          "time": "09:00",
          dataIndex: '9_1',  // 9：对应columns中的dataIndex， 1：对应单元各种的第几格
          "title": [
            [
              "会议名称:远程会议",
              "应到人数:1",
              "召集人:诸嘉诚",
              "联系人:诸嘉诚",
              "开始时间:2021-04-25 09:00",
              "结束时间:2021-04-25 12:00"
            ]
          ],
          "content": 1
        },
      ]
    }
  ]
```
