使用js插件fullcalendar构建简单会议室预约页面

使用 js 组件 fullcalendar 构建简单会议室预约页面

<link href="./plugins/fullcalendar-5.11.2/fullcalendar-scheduler/main.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="./plugins/fullcalendar-5.11.2/fullcalendar-scheduler/main.min.js"></script>
<script type="text/javascript" language="javascript" src="./plugins/fullcalendar-5.11.2/lib/locales-all.min.js"></script>

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

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var calendarEl = document.getElementById("calendar");

    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
      locale: "zh-cn",
      timeZone: "Asia/Shanghai",
      selectable: true,
      initialView: "resourceTimeGridDay",
      slotMinTime: "08:00",
      slotMaxTime: "20:00",
      businessHours: true,
      views: {
        resourceTimeGridDay: {
          slotDuration: "00:10",
        },
      },
      resources: [
        { id: "a", title: "Room A" },
        { id: "b", title: "Room B" },
        { id: "c", title: "Room C" },
        { id: "d", title: "Room D" },
        { id: "e", title: "Room E" },
        { id: "f", title: "Room F", eventColor: "red" },
        { id: "g", title: "Room G" },
        { id: "h", title: "Room H" },
        { id: "i", title: "Room I" },
        { id: "j", title: "Room J" },
        { id: "k", title: "Room K" },
      ],
      eventSources: [
        {
          url: "../test.php",
          method: "POST",
          extraParams: {
            uid: 1,
          },
          failure: function () {
            alert("请求失败，请联系系统管理员");
          },
          color: "yellow",
          textColor: "black",
        },
      ],
      select: function (info) {
        const events = calendar.getEvents();
        const startTime = new Date(info.startStr).getTime();
        const endTime = new Date(info.endStr).getTime();
        let flag = true;
        for (let index in events) {
          const resourceIds = events[index].getResources().map(function (resource) {
            return resource.id;
          });
          const resourceId = resourceIds[0];

          const st = new Date(events[index]["startStr"]).getTime();
          const et = new Date(events[index]["endStr"]).getTime();
          if (endTime <= st || startTime >= et || resourceId != info.resource.id) {
          } else {
            flag = false;
            break;
          }
        }
        if (!flag) {
          alert("该时间段该会议室已被预定，请选择其它时间段或者其它会议室");
          return false;
        }

        if (confirm("是否确定预定:\r\n" + "起始时间:" + info.startStr + "\r\n结束时间:" + info.endStr + "\r\n会议室:" + info.resource.title + "?")) {
          calendar.addEvent({
            title: "技术部meeting",
            resourceId: info.resource.id,
            start: info.startStr,
            end: info.endStr,
          });
        }
        calendar.unselect();
      },
      eventClick: function (arg) {
        if (confirm("确定要删除这个预定吗?")) {
          arg.event.remove();
        }
      },
    });

    calendar.render();
  });
</script>

后端

$data = [];
$date = date('Y-m-d');
$date_prev = date('Y-m-d', strtotime('-1 day'));
$date_next = date('Y-m-d', strtotime('+1 day'));
$data = [
    ["id" => "1", "resourceId" => "b", "start" => $date . "T09:00:00", "end" => $date . "T10:00:00", "title" => "财务部meetting"],
    ["id" => "2", "resourceId" => "c", "start" => $date . "T15:00:00", "end" => $date . "T17:00:00", "title" => "销售部meeting"],
];
echo json_encode($data);

注意：fullcalendar 的 fullcalendar-scheduler 商用需要购买 schedulerLicenseKey