@farango/calendar_library/dist/components/eventcalendar/montlyCalendar/MonthlyCalendar.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"] = exports.MonthlyCalendar = void 0;
var _react = _interopRequireDefault(require("react"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
require("../CalendarGrid.scss");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
// Extend dayjs with ISO week support
_dayjs["default"].extend(_isoWeek["default"]);

// Helper function to generate days for the current month, including at least one week of the next month
var generateMonthDays = function generateMonthDays(month) {
  var days = [];
  var startDay = (0, _dayjs["default"])(month).startOf('month').startOf('isoWeek'); // Use ISO week for Monday start
  var endDay = (0, _dayjs["default"])(month).add(1, 'month').startOf('month').endOf('isoWeek'); // Extend to the end of the ISO week

  var day = startDay.clone();
  while (day.isBefore(endDay, 'day') || day.isSame(endDay, 'day')) {
    days.push(day);
    day = day.add(1, 'day');
  }
  return days;
};

// New MonthlyCalendar Component
var MonthlyCalendar = exports.MonthlyCalendar = function MonthlyCalendar(_ref) {
  var currentMonth = _ref.currentMonth,
    cellRender = _ref.cellRender,
    size = _ref.size;
  var days = generateMonthDays(currentMonth);

  // Check if the day is in the current month
  var isCurrentMonth = function isCurrentMonth(day) {
    return day.isSame(currentMonth, 'month');
  };

  // Inline styles based on the size prop
  var containerStyle = size ? {
    width: size.width,
    height: size.height
  } : {};
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "calendar-grid",
    style: containerStyle
  }, ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(function (day, index) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      className: "day-header"
    }, day);
  }), days.map(function (day, index) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      className: "day-cell ".concat(!isCurrentMonth(day) ? 'other-month' : '', " ").concat(day.isSame((0, _dayjs["default"])(), 'day') ? 'current-day' : '')
    }, cellRender(day));
  }));
};
var _default = exports["default"] = MonthlyCalendar;