@farango/calendar_library/dist/components/availabilityview/DailyAppointments.js

The **Event Calendar** is a simple and responsive React component that displays a **monthly calendar** with support for events. This component is built with React and SCSS and can be easily integrated into your React applications.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
require("./DailyAppointments.scss");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
// Optional styling

var groupByRows = function groupByRows(array, itemsPerRow) {
  var grouped = [];
  for (var i = 0; i < array.length; i += itemsPerRow) {
    grouped.push(array.slice(i, i + itemsPerRow));
  }
  return grouped;
};
var DailyAppointments = function DailyAppointments(_ref) {
  var availability = _ref.availability,
    time = _ref.time,
    onTimeSlotSelect = _ref.onTimeSlotSelect;
  var groupedAvailability = groupByRows(availability, 4); // Group into rows of 4

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "daily-appointments"
  }, /*#__PURE__*/_react["default"].createElement("h5", {
    className: "daily-appointments__title"
  }, time ? time : "Select a Time Slot"), groupedAvailability.map(function (row, rowIndex) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "time-slot-row",
      key: rowIndex
    }, row.map(function (timeSlot, index) {
      return /*#__PURE__*/_react["default"].createElement("button", {
        key: index,
        className: "time-slot-button",
        onClick: function onClick() {
          return onTimeSlotSelect(timeSlot);
        },
        disabled: !timeSlot.available // Disable button if slot is unavailable
      }, timeSlot.time);
    }));
  }));
};
DailyAppointments.propTypes = {
  availability: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    time: _propTypes["default"].string.isRequired,
    available: _propTypes["default"].bool.isRequired
  })).isRequired,
  onTimeSlotSelect: _propTypes["default"].func.isRequired
};
var _default = exports["default"] = DailyAppointments;