makula-schedule 2.1.3 → 2.2.1

package/dist/components/MonthCalendarView.js

@@ -0,0 +1,252 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _antd = require("antd");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+require("../css/month-calendar.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// eslint-disable-next-line no-unused-vars
+
+_dayjs["default"].extend(_isoWeek["default"]);
+var DEFAULT_BG_COLOR = '#80C5F6';
+function buildMonthGrid(date, weekStartsOn) {
+  var current = (0, _dayjs["default"])(date);
+  var firstOfMonth = current.startOf('month');
+  var lastOfMonth = current.endOf('month');
+
+  // Find the start of the grid (first day of the week containing the 1st)
+  var gridStart;
+  if (weekStartsOn === 1) {
+    // Monday start
+    gridStart = firstOfMonth.startOf('isoWeek');
+  } else {
+    // Sunday start
+    var day = firstOfMonth.day();
+    gridStart = day === 0 ? firstOfMonth : firstOfMonth.subtract(day, 'days');
+  }
+
+  // Build weeks until we pass the end of the month
+  var weeks = [];
+  var cursor = gridStart;
+  while (cursor.isBefore(lastOfMonth) || cursor.isSame(lastOfMonth, 'day') || weeks.length === 0) {
+    var week = [];
+    for (var i = 0; i < 7; i++) {
+      week.push({
+        date: cursor,
+        isCurrentMonth: cursor.month() === current.month() && cursor.year() === current.year(),
+        isToday: cursor.isSame((0, _dayjs["default"])(), 'day')
+      });
+      cursor = cursor.add(1, 'day');
+    }
+    weeks.push(week);
+    // Stop if we've filled weeks beyond the month
+    if (cursor.month() !== current.month() && weeks.length >= 4) {
+      // Check if we need one more week
+      if (cursor.isAfter(lastOfMonth)) break;
+    }
+  }
+  return weeks;
+}
+function getEventsForDay(events, day) {
+  var dayStart = day.startOf('day');
+  var dayEnd = day.endOf('day');
+  return events.filter(function (event) {
+    var eventStart = (0, _dayjs["default"])(event.start);
+    var eventEnd = (0, _dayjs["default"])(event.end);
+    return eventStart.isBefore(dayEnd) && eventEnd.isAfter(dayStart);
+  });
+}
+function getDayHeaderLabels(weekStartsOn, headerFormat) {
+  var base = weekStartsOn === 1 ? (0, _dayjs["default"])().startOf('isoWeek') : (0, _dayjs["default"])().day(0);
+  var labels = [];
+  for (var i = 0; i < 7; i++) {
+    labels.push(base.add(i, 'day').format(headerFormat));
+  }
+  return labels;
+}
+function EventPill(_ref) {
+  var event = _ref.event,
+    eventItemPopoverEnabled = _ref.eventItemPopoverEnabled,
+    eventItemPopoverTrigger = _ref.eventItemPopoverTrigger,
+    CustomEventPopover = _ref.CustomEventPopover,
+    onEventClick = _ref.onEventClick;
+  var bgColor = event.bgColor || DEFAULT_BG_COLOR;
+  var startTime = (0, _dayjs["default"])(event.start);
+  var endTime = (0, _dayjs["default"])(event.end);
+  var pill = /*#__PURE__*/_react["default"].createElement("span", {
+    className: "rbs-month-calendar-event",
+    style: {
+      backgroundColor: bgColor
+    },
+    onClick: function onClick(e) {
+      if (onEventClick) {
+        e.stopPropagation();
+        onEventClick(event);
+      }
+    },
+    title: event.title
+  }, event.title);
+  if (!eventItemPopoverEnabled) {
+    return pill;
+  }
+  var popoverContent = CustomEventPopover ? CustomEventPopover(event, event.title, startTime, endTime, bgColor) : /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: 280
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: 6
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: 12,
+      height: 12,
+      borderRadius: 6,
+      backgroundColor: bgColor,
+      marginRight: 8,
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      fontWeight: 500,
+      fontSize: 14,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, event.title)), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      color: '#666',
+      fontSize: 13
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      fontWeight: 500
+    }
+  }, startTime.format('HH:mm')), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      margin: '0 6px',
+      color: '#999'
+    }
+  }, startTime.format('MMM D')), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      margin: '0 4px'
+    }
+  }, "-"), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      fontWeight: 500
+    }
+  }, endTime.format('HH:mm')), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      margin: '0 6px',
+      color: '#999'
+    }
+  }, endTime.format('MMM D'))));
+  return /*#__PURE__*/_react["default"].createElement(_antd.Popover, {
+    content: popoverContent,
+    trigger: eventItemPopoverTrigger,
+    placement: "bottomLeft"
+  }, pill);
+}
+EventPill.propTypes = {
+  event: _propTypes["default"].object.isRequired,
+  eventItemPopoverEnabled: _propTypes["default"].bool,
+  eventItemPopoverTrigger: _propTypes["default"].string,
+  CustomEventPopover: _propTypes["default"].func,
+  onEventClick: _propTypes["default"].func
+};
+function MonthCalendarView(_ref2) {
+  var _ref2$events = _ref2.events,
+    events = _ref2$events === void 0 ? [] : _ref2$events,
+    date = _ref2.date,
+    onEventClick = _ref2.onEventClick,
+    CustomEventPopover = _ref2.CustomEventPopover,
+    _ref2$eventItemPopove = _ref2.eventItemPopoverEnabled,
+    eventItemPopoverEnabled = _ref2$eventItemPopove === void 0 ? true : _ref2$eventItemPopove,
+    _ref2$eventItemPopove2 = _ref2.eventItemPopoverTrigger,
+    eventItemPopoverTrigger = _ref2$eventItemPopove2 === void 0 ? 'hover' : _ref2$eventItemPopove2,
+    _ref2$maxEventsPerCel = _ref2.maxEventsPerCell,
+    maxEventsPerCell = _ref2$maxEventsPerCel === void 0 ? 3 : _ref2$maxEventsPerCel,
+    onMoreClick = _ref2.onMoreClick,
+    _ref2$weekStartsOn = _ref2.weekStartsOn,
+    weekStartsOn = _ref2$weekStartsOn === void 0 ? 1 : _ref2$weekStartsOn,
+    _ref2$headerFormat = _ref2.headerFormat,
+    headerFormat = _ref2$headerFormat === void 0 ? 'ddd' : _ref2$headerFormat,
+    className = _ref2.className;
+  var currentDate = date ? (0, _dayjs["default"])(date) : (0, _dayjs["default"])();
+  var weeks = (0, _react.useMemo)(function () {
+    return buildMonthGrid(currentDate, weekStartsOn);
+  }, [currentDate.format('YYYY-MM'), weekStartsOn]);
+  var dayHeaders = (0, _react.useMemo)(function () {
+    return getDayHeaderLabels(weekStartsOn, headerFormat);
+  }, [weekStartsOn, headerFormat]);
+  var rootClassName = ['rbs-month-calendar', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: rootClassName
+  }, dayHeaders.map(function (label, i) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: "header-".concat(i),
+      className: "rbs-month-calendar-header-cell"
+    }, label);
+  }), weeks.map(function (week, wi) {
+    return week.map(function (day, di) {
+      var dayEvents = getEventsForDay(events, day.date);
+      var visibleEvents = dayEvents.slice(0, maxEventsPerCell);
+      var overflowCount = dayEvents.length - maxEventsPerCell;
+      var cellClasses = ['rbs-month-calendar-cell', !day.isCurrentMonth && 'rbs-month-calendar-cell--outside', day.isToday && 'rbs-month-calendar-cell--today'].filter(Boolean).join(' ');
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: "".concat(wi, "-").concat(di),
+        className: cellClasses
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "rbs-month-calendar-day-number"
+      }, day.date.date()), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "rbs-month-calendar-events"
+      }, visibleEvents.map(function (event) {
+        return /*#__PURE__*/_react["default"].createElement(EventPill, {
+          key: event.id,
+          event: event,
+          eventItemPopoverEnabled: eventItemPopoverEnabled,
+          eventItemPopoverTrigger: eventItemPopoverTrigger,
+          CustomEventPopover: CustomEventPopover,
+          onEventClick: onEventClick
+        });
+      }), overflowCount > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+        className: "rbs-month-calendar-more",
+        type: "button",
+        onClick: function onClick() {
+          if (onMoreClick) onMoreClick(day.date, dayEvents);
+        }
+      }, "+", overflowCount, " more")));
+    });
+  }));
+}
+MonthCalendarView.propTypes = {
+  events: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+    title: _propTypes["default"].string.isRequired,
+    start: _propTypes["default"].string.isRequired,
+    end: _propTypes["default"].string.isRequired,
+    bgColor: _propTypes["default"].string
+  })),
+  date: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  onEventClick: _propTypes["default"].func,
+  CustomEventPopover: _propTypes["default"].func,
+  eventItemPopoverEnabled: _propTypes["default"].bool,
+  eventItemPopoverTrigger: _propTypes["default"].string,
+  maxEventsPerCell: _propTypes["default"].number,
+  onMoreClick: _propTypes["default"].func,
+  weekStartsOn: _propTypes["default"].oneOf([0, 1]),
+  headerFormat: _propTypes["default"].string,
+  className: _propTypes["default"].string
+};
+var _default = exports["default"] = MonthCalendarView;

package/dist/components/index.js

@@ -46,6 +46,12 @@ Object.defineProperty(exports, "DnDSource", {
     return _DnDSource["default"];
   }
 });
+Object.defineProperty(exports, "MonthCalendarView", {
+  enumerable: true,
+  get: function get() {
+    return _MonthCalendarView["default"];
+  }
+});
 exports.Scheduler = Scheduler;
 Object.defineProperty(exports, "SchedulerData", {
   enumerable: true,
@@ -81,6 +87,7 @@ var _BodyView = _interopRequireDefault(require("./BodyView"));
 var _DnDContext = _interopRequireDefault(require("./DnDContext"));
 var _DnDSource = _interopRequireDefault(require("./DnDSource"));
 var _HeaderView = _interopRequireDefault(require("./HeaderView"));
+var _MonthCalendarView = _interopRequireDefault(require("./MonthCalendarView"));
 var _ResourceEvents = _interopRequireDefault(require("./ResourceEvents"));
 var _ResourceView = _interopRequireDefault(require("./ResourceView"));
 var _SchedulerData = _interopRequireDefault(require("./SchedulerData"));

package/dist/css/month-calendar.css

@@ -0,0 +1,109 @@
+.rbs-month-calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border: 1px solid #e9e9e9;
+  font-family: inherit;
+  font-size: 13px;
+}
+
+.rbs-month-calendar-header-cell {
+  padding: 8px 4px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+  border-bottom: 1px solid #e9e9e9;
+  border-right: 1px solid #e9e9e9;
+  background: #fafafa;
+}
+
+.rbs-month-calendar-header-cell:last-child {
+  border-right: none;
+}
+
+.rbs-month-calendar-cell {
+  min-height: 100px;
+  border-bottom: 1px solid #e9e9e9;
+  border-right: 1px solid #e9e9e9;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  overflow: hidden;
+}
+
+.rbs-month-calendar-cell:nth-child(7n) {
+  border-right: none;
+}
+
+.rbs-month-calendar-cell:nth-last-child(-n+7) {
+  border-bottom: none;
+}
+
+.rbs-month-calendar-cell--outside {
+  background: #fafafa;
+}
+
+.rbs-month-calendar-cell--outside .rbs-month-calendar-day-number {
+  color: #bbb;
+}
+
+.rbs-month-calendar-cell--today .rbs-month-calendar-day-number {
+  background: #1890ff;
+  color: #fff;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rbs-month-calendar-day-number {
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+  line-height: 24px;
+}
+
+.rbs-month-calendar-events {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.rbs-month-calendar-event {
+  display: block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.rbs-month-calendar-event:hover {
+  opacity: 0.85;
+}
+
+.rbs-month-calendar-more {
+  font-size: 11px;
+  color: #1890ff;
+  cursor: pointer;
+  padding: 2px 4px;
+  margin-top: 2px;
+  background: none;
+  border: none;
+  text-align: left;
+}
+
+.rbs-month-calendar-more:hover {
+  text-decoration: underline;
+}

package/dist/index.d.ts

@@ -464,3 +464,34 @@ export interface SchedulerDataBehaviors<EventType extends EventItem = EventItem>
 export const DATE_FORMAT = 'YYYY-MM-DD';
 
 export const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+export interface MonthCalendarEvent {
+  id: string | number;
+  title: string;
+  start: string;
+  end: string;
+  bgColor?: string;
+  [x: string]: unknown;
+}
+
+export interface MonthCalendarViewProps {
+  events?: MonthCalendarEvent[];
+  date?: string | Dayjs | Date;
+  onEventClick?: (event: MonthCalendarEvent) => void;
+  CustomEventPopover?: (
+    event: MonthCalendarEvent,
+    title: string,
+    start: Dayjs,
+    end: Dayjs,
+    color: string
+  ) => React.ReactNode;
+  eventItemPopoverEnabled?: boolean;
+  eventItemPopoverTrigger?: 'hover' | 'click';
+  maxEventsPerCell?: number;
+  onMoreClick?: (date: Dayjs, events: MonthCalendarEvent[]) => void;
+  weekStartsOn?: 0 | 1;
+  headerFormat?: string;
+  className?: string;
+}
+
+export const MonthCalendarView: React.FC<MonthCalendarViewProps>;

package/dist/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "DnDSource", {
     return _index.DnDSource;
   }
 });
+Object.defineProperty(exports, "MonthCalendarView", {
+  enumerable: true,
+  get: function get() {
+    return _index.MonthCalendarView;
+  }
+});
 Object.defineProperty(exports, "Scheduler", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makula-schedule",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",