@farango/calendar_library/dist/components/eventcalendar/EventCalendar.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"] = EventCalendar;
var _react = _interopRequireWildcard(require("react"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _CalendarGrid = require("./CalendarGrid");
require("./CalendarGrid.scss");
var _MonthlyCellRender = require("./cellRender/MonthlyCellRender");
var _WeeklyCellRender = require("./cellRender/WeeklyCellRender");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var defaultStyles = {
  colorActualDay: '#fff',
  colorFontTitle: '#000',
  colorFontButtons: '#000',
  colorFontNameDays: '#000',
  colorFontDays: '#000',
  sizeFontAppoinment: '0.85rem',
  sizeFontButtons: '1rem',
  sizeFontNameDays: '0.85rem',
  sizeFontDays: '0.9rem',
  bgHeader: '#f9fafb',
  bgDaysNames: '#f0f0f0',
  bgCells: '#fff',
  bgActualDay: '#000',
  eventTitleSpacing: '0.1rem',
  eventTimeColor: '#686767',
  eventTitleColor: '#000'
};
function EventCalendar(_ref) {
  var _ref$eventsData = _ref.eventsData,
    eventsData = _ref$eventsData === void 0 ? [] : _ref$eventsData,
    _ref$styles = _ref.styles,
    styles = _ref$styles === void 0 ? defaultStyles : _ref$styles,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? 'Event Calendar' : _ref$title,
    _ref$titleButton = _ref.titleButton,
    titleButton = _ref$titleButton === void 0 ? 'Add Event' : _ref$titleButton,
    _ref$onSelectedEvent = _ref.onSelectedEvent,
    onSelectedEvent = _ref$onSelectedEvent === void 0 ? function () {} : _ref$onSelectedEvent,
    _ref$addEvent = _ref.addEvent,
    addEvent = _ref$addEvent === void 0 ? function () {} : _ref$addEvent,
    _ref$visibilityOption = _ref.visibilityOptions,
    visibilityOptions = _ref$visibilityOption === void 0 ? {} : _ref$visibilityOption,
    _ref$onDailyEvent = _ref.onDailyEvent,
    onDailyEvent = _ref$onDailyEvent === void 0 ? function () {} : _ref$onDailyEvent;
  // Destructure and provide default values from styles
  var _styles$colorActualDa = styles.colorActualDay,
    colorActualDay = _styles$colorActualDa === void 0 ? '' : _styles$colorActualDa,
    _styles$colorFontTitl = styles.colorFontTitle,
    colorFontTitle = _styles$colorFontTitl === void 0 ? '' : _styles$colorFontTitl,
    _styles$colorFontButt = styles.colorFontButtons,
    colorFontButtons = _styles$colorFontButt === void 0 ? '' : _styles$colorFontButt,
    _styles$colorFontName = styles.colorFontNameDays,
    colorFontNameDays = _styles$colorFontName === void 0 ? '' : _styles$colorFontName,
    _styles$colorFontDays = styles.colorFontDays,
    colorFontDays = _styles$colorFontDays === void 0 ? '' : _styles$colorFontDays,
    _styles$sizeFontAppoi = styles.sizeFontAppointment,
    sizeFontAppointment = _styles$sizeFontAppoi === void 0 ? '' : _styles$sizeFontAppoi,
    _styles$sizeFontButto = styles.sizeFontButtons,
    sizeFontButtons = _styles$sizeFontButto === void 0 ? '' : _styles$sizeFontButto,
    _styles$sizeFontNameD = styles.sizeFontNameDays,
    sizeFontNameDays = _styles$sizeFontNameD === void 0 ? '' : _styles$sizeFontNameD,
    _styles$sizeFontDays = styles.sizeFontDays,
    sizeFontDays = _styles$sizeFontDays === void 0 ? '' : _styles$sizeFontDays,
    _styles$bgHeader = styles.bgHeader,
    bgHeader = _styles$bgHeader === void 0 ? '' : _styles$bgHeader,
    _styles$bgDaysNames = styles.bgDaysNames,
    bgDaysNames = _styles$bgDaysNames === void 0 ? '' : _styles$bgDaysNames,
    _styles$bgCells = styles.bgCells,
    bgCells = _styles$bgCells === void 0 ? '' : _styles$bgCells,
    _styles$bgActualDay = styles.bgActualDay,
    bgActualDay = _styles$bgActualDay === void 0 ? '' : _styles$bgActualDay,
    _styles$eventTitleSpa = styles.eventTitleSpacing,
    eventTitleSpacing = _styles$eventTitleSpa === void 0 ? '' : _styles$eventTitleSpa,
    _styles$eventTimeColo = styles.eventTimeColor,
    eventTimeColor = _styles$eventTimeColo === void 0 ? '' : _styles$eventTimeColo,
    _styles$eventTitleCol = styles.eventTitleColor,
    eventTitleColor = _styles$eventTitleCol === void 0 ? '' : _styles$eventTitleCol,
    _styles$eventNumberBa = styles.eventNumberBackground,
    eventNumberBackground = _styles$eventNumberBa === void 0 ? '' : _styles$eventNumberBa;
  var defaultVisibilityOptions = {
    todayButton: true,
    dropdownFilter: true,
    addEventButton: true,
    header: true,
    daysNames: true,
    filters: {
      yearly: true,
      monthly: true,
      weekly: true,
      daily: true
    }
  };

  // Deep merge custom visibilityOptions with defaultVisibilityOptions
  var mergedVisibilityOptions = _objectSpread(_objectSpread(_objectSpread({}, defaultVisibilityOptions), visibilityOptions), {}, {
    // Overwrite top-level keys
    filters: _objectSpread(_objectSpread({}, defaultVisibilityOptions.filters), visibilityOptions.filters)
  });

  // Create custom CSS variables for styling
  var customStyles = _defineProperty(_defineProperty(_defineProperty({
    '--current-day-bg': bgActualDay,
    '--current-day-color': colorActualDay,
    '--event-title-color': colorFontTitle,
    '--event-title-font-size': sizeFontAppointment,
    '--button-color': colorFontButtons,
    '--button-font-size': sizeFontButtons,
    '--name-days-font-color': colorFontNameDays,
    '--name-days-font-size': sizeFontNameDays,
    '--days-font-color': colorFontDays,
    '--days-font-size': sizeFontDays,
    '--calendar-header-bg': bgHeader,
    '--days-names-bg': bgDaysNames,
    '--calendar-cells-bg': bgCells,
    '--event-title-spacing,': eventTitleSpacing
  }, "--event-title-color", eventTitleColor), '--background-number-events', eventNumberBackground), '--event-time-color', eventTimeColor);

  // Select event handler
  var handleSelectEvent = function handleSelectEvent(day) {
    var formattedDate = (0, _dayjs["default"])(day).format('YYYY-MM-DD');
    var event = eventsData.find(function (event) {
      return event.date === formattedDate;
    }) || null;
    onSelectedEvent(event);
  };

  // Renders each cell of the calendar
  var montlyRenderCell = function montlyRenderCell(day) {
    return /*#__PURE__*/_react["default"].createElement(_MonthlyCellRender.MonthlyCellRender, {
      day: day,
      eventsData: eventsData,
      onSelect: handleSelectEvent
    });
  };
  var weeklyRenderCell = function weeklyRenderCell(day, interval) {
    return /*#__PURE__*/_react["default"].createElement(_WeeklyCellRender.WeeklyCellRender, {
      day: day,
      interval: interval,
      eventsData: eventsData,
      onSelect: handleSelectEvent,
      className: "weekly"
    });
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "p-6",
    style: customStyles
  }, /*#__PURE__*/_react["default"].createElement("h2", {
    className: "text-2xl font-bold mb-4"
  }, title), /*#__PURE__*/_react["default"].createElement(_CalendarGrid.CalendarGrid, {
    montlyRenderCell: montlyRenderCell,
    weeklyRenderCell: weeklyRenderCell,
    titleButton: titleButton,
    onAddEventClicked: addEvent,
    visibilityOptions: mergedVisibilityOptions,
    onDailyEvent: onDailyEvent
  }));
}