实现日历表格，可以切换月份，并且点击日期出现弹出框，可以设置价格和房间数量，并且把价格和数量显示到日历上

实现日历表格的方法有很多种，可以使用传统的HTML和CSS来实现，也可以使用现代化的JavaScript库或框架来实现。这里我会使用React框架来实现。

首先，我们需要安装React和React-DOM库。可以使用以下命令来安装：

npm install react react-dom

接下来，我们可以创建一个名为Calendar的组件。这个组件会有一个状态来保存当前显示的月份和日期。我们会在组件中渲染一个表格，表格中会有一个标题行显示当前月份和一个日期行显示每一天的日期。我们还会为每个日期添加一个点击事件，当用户点击日期时，会弹出一个对话框来设置价格和房间数量。

下面是Calendar组件的代码：

import React, { useState } from 'react';
import './Calendar.css';

function Calendar() {
  const [month, setMonth] = useState(new Date().getMonth() + 1);
  const [year, setYear] = useState(new Date().getFullYear());
  const [selectedDate, setSelectedDate] = useState(null);

  const daysInMonth = new Date(year, month, 0).getDate();
  const firstDayOfMonth = new Date(year, month - 1, 1).getDay();

  const handleDateClick = (date) => {
    setSelectedDate(date);
  };

  const handlePriceChange = (event) => {
    // TODO: Save price for selected date
  };

  const handleRoomCountChange = (event) => {
    // TODO: Save room count for selected date
  };

  const renderTableHeader = () => {
    return (
      <tr>
        <th colSpan="7">{`${year}年${month}月`}</th>
      </tr>
    );
  };

  const renderTableBody = () => {
    let rows = [];
    let cells = [];

    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(year, month - 1, i);

      if (i === 1) {
        for (let j = 0; j < firstDayOfMonth; j++) {
          cells.push(<td key={j}></td>);
        }
      }

      cells.push(
        <td key={i} onClick={() => handleDateClick(date)}>
          {i}
        </td>
      );

      if (cells.length === 7) {
        rows.push(<tr key={i / 7}>{cells}</tr>);
        cells = [];
      }

      if (i === daysInMonth) {
        for (let j = 0; j < 7 - cells.length; j++) {
          cells.push(<td key={i + j + 1}></td>);
        }
        rows.push(<tr key={(i + 1) / 7}>{cells}</tr>);
      }
    }

    return <tbody>{rows}</tbody>;
  };

  return (
    <table className="calendar">
      <thead>{renderTableHeader()}</thead>
      {renderTableBody()}
      {selectedDate && (
        <div className="dialog">
          <h2>{selectedDate.toLocaleDateString()}</h2>
          <label>
            价格:
            <input type="number" onChange={handlePriceChange} />
          </label>
          <label>
            房间数量:
            <input type="number" onChange={handleRoomCountChange} />
          </label>
        </div>
      )}
    </table>
  );
}

export default Calendar;

在上面的代码中，我们使用useState Hook来定义了四个状态：month、year、selectedDate和dialog。month和year分别保存当前显示的月份和年份。selectedDate保存用户点击的日期。dialog用来控制弹出框的显示和隐藏。

我们使用了两个事件处理函数handlePriceChange和handleRoomCountChange来保存用户设置的价格和房间数量。这两个函数会在弹出框中的输入框值发生变化时被调用。

renderTableHeader和renderTableBody函数分别用来渲染表格的标题行和日期行。在日期行中，我们会为每个日期单元格添加一个点击事件handleDateClick。当用户点击日期时，我们会把当前日期保存到selectedDate状态中，并且让dialog显示出来。

最后，我们使用了一个条件渲染来控制弹出框的显示和隐藏。当selectedDate状态不为null时，弹出框会被渲染出来。用户在弹出框中设置完价格和房间数量后，我们可以在handlePriceChange和handleRoomCountChange函数中把这些值保存到数据库中。

CSS文件Calendar.css如下：

.calendar {
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 16px;
}

.calendar th {
  font-weight: bold;
  border: 1px solid black;
  background-color: #ccc;
  padding: 10px;
}

.calendar td {
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px grey;
}

上面的CSS代码定义了日历表格和弹出框的样式。

最后，我们在应用中使用Calendar组件：

import React from 'react';
import ReactDOM from 'react-dom';
import Calendar from './Calendar';

ReactDOM.render(<Calendar />, document.getElementById('root'));

这样，我们就完成了一个可以切换月份、选择日期并设置价格和房间数量的日历表格。