javascript - 根据发布请求数据更改日历 CSS

Question

我正在发送发布请求以创建可用性日历。我从来没有真正使用过日历，我只需要一个快速开始就可以在哪里。以下是我的发帖请求和回复。

我想做的是，如果可用 < 1 将相应日期的 css 更改为灰色。如果可用 is > 0 则将相应日期的背景 css 显示为绿色。

最终，我希望日历成为使用 ajax 输出一些结果的 daterangepicker。

我不知道从哪里开始。任何帮助表示赞赏。我知道 MySQL 查询并不理想，但我稍后会处理。

function calAvailability(value) {
    var roomcode = value;
    $.ajax({
      url: "calavail-action.php",
      type: "POST",
      data: { roomcode: roomcode },
      dataType: "json",
      success: function (response) {
          calAvailResponse(response);
      }
      });
  }

<?php
include 'dbh.php';
$conn = new mysqli($servername, $username, $password, $database);

$roomcode = $_POST['roomcode'];
$sql=
"SELECT
staydate,
available,
ri.roomcode AS roomcode
FROM resort_availability AS ra
    JOIN room_info AS ri ON (ra.room = ri.roomcode)
WHERE roomcode = '$roomcode'
ORDER BY staydate
";
$data = $conn->query($sql)->fetch_all(MYSQLI_ASSOC);



echo json_encode($data);
?>

[{"staydate":"2022-02-01","available":"0","roomcode":"U7"},{"staydate":"2022-02-02","available":"1","roomcode":"U7"},{"staydate":"2022-02-03","available":"0","roomcode":"U7"},{"staydate":"2022-02-04","available":"0","roomcode":"U7"},{"staydate":"2022-02-05","available":"0","roomcode":"U7"},{"staydate":"2022-02-06","available":"0","roomcode":"U7"},{"staydate":"2022-02-07","available":"0","roomcode":"U7"},{"staydate":"2022-02-08","available":"1","roomcode":"U7"},{"staydate":"2022-02-09","available":"0","roomcode":"U7"},{"staydate":"2022-02-10","available":"1","roomcode":"U7"},{"staydate":"2022-02-11","available":"0","roomcode":"U7"},{"staydate":"2022-02-12","available":"1","roomcode":"U7"},{"staydate":"2022-02-13","available":"0","roomcode":"U7"},{"staydate":"2022-02-14","available":"0","roomcode":"U7"},{"staydate":"2022-02-15","available":"0","roomcode":"U7"},{"staydate":"2022-02-16","available":"0","roomcode":"U7"},{"staydate":"2022-02-17","available":"0","roomcode":"U7"},{"staydate":"2022-02-18","available":"1","roomcode":"U7"},{"staydate":"2022-02-19","available":"0","roomcode":"U7"},{"staydate":"2022-02-20","available":"0","roomcode":"U7"},{"staydate":"2022-02-21","available":"0","roomcode":"U7"},{"staydate":"2022-02-22","available":"0","roomcode":"U7"},{"staydate":"2022-02-23","available":"0","roomcode":"U7"},{"staydate":"2022-02-24","available":"0","roomcode":"U7"},{"staydate":"2022-02-25","available":"0","roomcode":"U7"},{"staydate":"2022-02-26","available":"0","roomcode":"U7"},{"staydate":"2022-02-27","available":"0","roomcode":"U7"},{"staydate":"2022-02-28","available":"0","roomcode":"U7"}]

标签： javascriptmysqljsoncalendardaterangepicker