@farango/calendar_library
Version:
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.
40 lines (39 loc) • 1.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MonthlyCellRender = void 0;
var _react = _interopRequireDefault(require("react"));
var _dayjs = _interopRequireDefault(require("dayjs"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var MonthlyCellRender = exports.MonthlyCellRender = function MonthlyCellRender(_ref) {
var day = _ref.day,
eventsData = _ref.eventsData,
onSelect = _ref.onSelect;
var currentDate = (0, _dayjs["default"])(day).format('YYYY-MM-DD');
var today = (0, _dayjs["default"])().format('YYYY-MM-DD'); // Get current date
var events = eventsData.filter(function (event) {
return event.date === currentDate;
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: "cell-container ".concat(events.length ? 'event-cell' : ''),
onClick: function onClick() {
return onSelect(day);
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "day-number ".concat(currentDate === today ? 'current-day' : '')
}, /*#__PURE__*/_react["default"].createElement("span", null, day.format('D'))), events.map(function (event, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "event-wrapper"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "event-title-container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "event-title"
}, event.title), event.numberEvents > 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: "event-circle"
}, /*#__PURE__*/_react["default"].createElement("span", null, event.numberEvents))), /*#__PURE__*/_react["default"].createElement("div", {
className: "event-time"
}, event.time));
}));
};