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

以下是一个实现这个功能的简单示例代码：

HTML代码：

<div id="calendar"></div>

<!-- 弹出框 -->
<div id="popup">
  <h2 id="date"></h2>
  <label>价格:</label>
  <input type="number" id="price" min="0">
  <label>房间数量:</label>
  <input type="number" id="quantity" min="0">
  <button onclick="save()">保存</button>
</div>

JavaScript代码：

// 获取日历容器
const calendar = document.getElementById("calendar");

// 获取弹出框和相关元素
const popup = document.getElementById("popup");
const date = document.getElementById("date");
const price = document.getElementById("price");
const quantity = document.getElementById("quantity");

// 当前显示的年份和月份
let currentYear, currentMonth;

// 初始化日历
function initCalendar(year, month) {
  // 清空日历容器
  calendar.innerHTML = "";

  // 设置当前年份和月份
  currentYear = year;
  currentMonth = month;

  // 创建表格
  const table = document.createElement("table");

  // 创建表头
  const thead = document.createElement("thead");
  const tr = document.createElement("tr");
  const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
  for (let i = 0; i < 7; i++) {
    const th = document.createElement("th");
    th.textContent = weekdays[i];
    tr.appendChild(th);
  }
  thead.appendChild(tr);
  table.appendChild(thead);

  // 创建日期单元格
  const tbody = document.createElement("tbody");
  const firstDayOfWeek = new Date(year, month, 1).getDay();
  const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
  let date = 1;
  for (let i = 0; i < 6; i++) {
    const tr = document.createElement("tr");
    for (let j = 0; j < 7; j++) {
      const td = document.createElement("td");
      if ((i === 0 && j < firstDayOfWeek) || date > lastDateOfMonth) {
        td.classList.add("empty");
      } else {
        td.textContent = date;
        td.addEventListener("click", showPopup);
        date++;
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);

  // 将表格添加到日历容器中
  calendar.appendChild(table);
}

// 弹出框显示指定日期的信息
function showPopup(event) {
  const td = event.target;
  if (td.classList.contains("empty")) {
    return;
  }
  date.textContent = `${currentYear}-${currentMonth + 1}-${td.textContent}`;
  price.value = "";
  quantity.value = "";
  popup.style.display = "block";
}

// 保存弹出框中的信息并更新日历
function save() {
  const td = document.querySelector(`td:not(.empty):contains('${date.textContent.split('-')[2]}')`);
  td.dataset.price = price.value;
  td.dataset.quantity = quantity.value;
  popup.style.display = "none";
}

// 切换到上一个月份
function prevMonth() {
  if (currentMonth === 0) {
    initCalendar(currentYear - 1, 11);
  } else {
    initCalendar(currentYear, currentMonth - 1);
  }
}

// 切换到下一个月份
function nextMonth() {
  if (currentMonth === 11) {
    initCalendar(currentYear + 1, 0);
  } else {
    initCalendar(currentYear, currentMonth + 1);
  }
}

// 初始化日历为当前月份
const today = new Date();
initCalendar(today.getFullYear(), today.getMonth());

CSS代码：

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #eee;
}

td.empty {
  background-color: #f7f7f7;
}

#popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}

#popup label {
  display: block;
  margin-bottom: 10px;
}

#popup input {
  width: 100px;
  margin-right: 10px;
}

这个示例实现了一个简单的日历表格，并且可以切换月份和点击日期弹出设置价格和房间数量的弹出框，并且将设置的价格和房间数量显示在日历中。需要注意的是，这个示例中并没有提供保存设置的价格和房间数量的功能，需要读者自行实现。