big-scheduler
Version:
Big scheduler 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-a
493 lines (428 loc) • 16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _weekOfYear = _interopRequireDefault(require("dayjs/plugin/weekOfYear"));
var _default2 = require("../config/default");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
// import React from "react";
// import PropTypes from "prop-types";
// import dayjs from "dayjs";
// import weekOfYear from "dayjs/plugin/weekOfYear";
// import { CellUnit } from "../config/default";
// dayjs.extend(weekOfYear);
// function HeaderView({ schedulerData, nonAgendaCellHeaderTemplateResolver }) {
// const { headers, cellUnit, config, localeDayjs } = schedulerData;
// const headerHeight = schedulerData.getTableHeaderHeight();
// const cellWidth = schedulerData.getContentCellWidth();
// const getYearFromHeaders = () => {
// if (headers.length === 0) return localeDayjs().year();
// const firstDate = localeDayjs(new Date(headers[0].time));
// return firstDate.year();
// };
// console.log(" year ", headers[headers.length - 1], headers[0]);
// let start = localeDayjs(new Date(headers[0].time));
// let end = localeDayjs(new Date(headers[headers.length - 1].time));
// const year = getYearFromHeaders();
// console.log(" start ", start);
// const generateWeeksForYear = (year) => {
// const weeks = [];
// let start = localeDayjs(start).startOf("year");
// let end = localeDayjs(end).endOf("year");
// while (start <= end) {
// weeks.push({
// weekNumber: start.week(),
// startDate: start.startOf("week"),
// endDate: start.endOf("week"),
// });
// start = start.add(1, "week");
// }
// return weeks;
// };
// const weeks = generateWeeksForYear(year);
// // Group headers by week
// const groupHeadersByWeek = (headers) => {
// const weeksMap = {};
// headers.forEach((item) => {
// const datetime = localeDayjs(new Date(item.time));
// // setYear(datetime.year())
// const weekNumber = datetime.week();
// if (!weeksMap[weekNumber]) {
// weeksMap[weekNumber] = [];
// }
// weeksMap[weekNumber].push(item);
// });
// return weeksMap;
// };
// const groupedHeaders = groupHeadersByWeek(headers);
// // Get month names and their corresponding date ranges
// const generateMonthsForYear = (year) => {
// const months = [];
// let currentMonth = localeDayjs(start).startOf("month");
// while (currentMonth.year() === year) {
// months.push({
// monthYear: currentMonth.format("MMMM YYYY"),
// startDate: currentMonth.startOf("month"),
// endDate: currentMonth.endOf("month"),
// });
// currentMonth = currentMonth.add(1, "month");
// }
// return months;
// };
// const months = generateMonthsForYear(year);
// // Render the month row
// const renderMonthRow = () => {
// const monthHeaders = [];
// months.forEach((month) => {
// const totalDays = month.endDate.diff(month.startDate, "days") + 1;
// monthHeaders.push(
// <th key={month.monthYear} colSpan={totalDays} className="header-month">
// {month.monthYear}
// </th>
// );
// });
// return <tr style={{ height: headerHeight / 3 }}>{monthHeaders}</tr>;
// };
// // Render the week row
// const renderWeekRow = () => {
// const weekHeaders = [];
// let currentWeekStart = localeDayjs(`${weeks[0].startDate}`).startOf("week");
// // Set to track unique week identifiers
// const uniqueWeekSet = new Set();
// while (
// currentWeekStart.isBefore(
// localeDayjs(`${weeks[weeks.length - 1].endDate}`)
// )
// ) {
// let weekNumber = currentWeekStart.week();
// const year = currentWeekStart.year(); // Get the year of the current week
// // Handle weeks beyond 52 by checking if it falls into week 53
// if (weekNumber === 1 && currentWeekStart.month() === 11) {
// // This is an edge case where week 1 is actually in the next year
// // So, check if it should be week 53
// const previousYear = year - 1;
// const lastWeekOfPreviousYear = localeDayjs(
// `${previousYear}-12-31`
// ).week();
// if (lastWeekOfPreviousYear === 52) {
// weekNumber = 53; // Adjust to 53 if it's actually the last week of the previous year
// }
// }
// // Create a unique identifier for the week
// let uniqueKey = `${year}-W${weekNumber}`;
// let counter = 1;
// // Ensure the unique key is unique across the year
// while (uniqueWeekSet.has(uniqueKey)) {
// uniqueKey = `${year}-W${weekNumber}-${counter}`;
// counter++;
// }
// uniqueWeekSet.add(uniqueKey);
// weekHeaders.push(
// <th key={uniqueKey} colSpan={7} className="header-week">
// Week {weekNumber}
// </th>
// );
// currentWeekStart = currentWeekStart.add(1, "week");
// }
// return <tr style={{ height: headerHeight / 3 }}>{weekHeaders}</tr>;
// };
// // Render the date row
// const renderDateRow = () => {
// const dateHeaders = [];
// let currentDay = localeDayjs(`${months[0].startDate}`);
// while (
// currentDay.isBefore(localeDayjs(`${months[months.length - 1].endDate}`))
// ) {
// const dateString = currentDay.format("YYYY-MM-DD");
// const headerItem = headers.find((item) =>
// localeDayjs(new Date(item.time)).isSame(currentDay, "day")
// );
// const date = headerItem
// ? localeDayjs(new Date(headerItem.time)).format("D")
// : "";
// dateHeaders.push(
// <th
// key={dateString}
// className="header-date"
// style={{ width: cellWidth }}
// >
// {date}
// </th>
// );
// currentDay = currentDay.add(1, "day");
// }
// return <tr style={{ height: headerHeight / 3 }}>{dateHeaders}</tr>;
// };
// return (
// <thead>
// {renderMonthRow()}
// {renderWeekRow()}
// {renderDateRow()}
// </thead>
// );
// }
// HeaderView.propTypes = {
// schedulerData: PropTypes.object.isRequired,
// nonAgendaCellHeaderTemplateResolver: PropTypes.func,
// };
// HeaderView.defaultProps = {
// nonAgendaCellHeaderTemplateResolver: null,
// };
// export default HeaderView;
/* eslint-disable no-nested-ternary */
/* eslint-disable react/no-array-index-key */
// import React from "react";
// import PropTypes from "prop-types";
// import { CellUnit } from "../config/default";
// function HeaderView({ schedulerData, nonAgendaCellHeaderTemplateResolver }) {
// const { headers, cellUnit, config, localeDayjs } = schedulerData;
// console.log(" header s ", headers);
// const headerHeight = schedulerData.getTableHeaderHeight();
// const cellWidth = schedulerData.getContentCellWidth();
// const minuteStepsInHour = schedulerData.getMinuteStepsInHour();
// let headerList = [];
// let style;
// if (cellUnit === CellUnit.Hour) {
// headers.forEach((item, index) => {
// if (index % minuteStepsInHour === 0) {
// const datetime = localeDayjs(new Date(item.time));
// style = item.nonWorkingTime
// ? {
// width: cellWidth * minuteStepsInHour,
// color: config.nonWorkingTimeHeadColor,
// backgroundColor: config.nonWorkingTimeHeadBgColor,
// }
// : {
// width: cellWidth * minuteStepsInHour,
// };
// if (index === headers.length - minuteStepsInHour) {
// style = item.nonWorkingTime
// ? {
// color: config.nonWorkingTimeHeadColor,
// backgroundColor: config.nonWorkingTimeHeadBgColor,
// }
// : {};
// }
// const pFormattedList = config.nonAgendaDayCellHeaderFormat
// .split("|")
// .map((pitem) => datetime.format(pitem));
// let element;
// if (typeof nonAgendaCellHeaderTemplateResolver === "function") {
// element = nonAgendaCellHeaderTemplateResolver(
// schedulerData,
// item,
// pFormattedList,
// style
// );
// } else {
// const pList = pFormattedList.map((formattedItem, pIndex) => (
// <div key={pIndex}>{formattedItem}</div>
// ));
// element = (
// <th
// key={`header-${item.time}`}
// className="header3-text"
// style={style}
// >
// <div>{pList}</div>
// </th>
// );
// }
// headerList.push(element);
// }
// });
// } else {
// headerList = headers.map((item, index) => {
// const datetime = localeDayjs(new Date(item.time));
// style = item.nonWorkingTime
// ? {
// width: cellWidth,
// color: config.nonWorkingTimeHeadColor,
// backgroundColor: config.nonWorkingTimeHeadBgColor,
// }
// : { width: cellWidth };
// if (index === headers.length - 1)
// style = item.nonWorkingTime
// ? {
// color: config.nonWorkingTimeHeadColor,
// backgroundColor: config.nonWorkingTimeHeadBgColor,
// }
// : {};
// const cellFormat =
// cellUnit === CellUnit.Week
// ? config.nonAgendaWeekCellHeaderFormat
// : cellUnit === CellUnit.Month
// ? config.nonAgendaMonthCellHeaderFormat
// : cellUnit === CellUnit.Year
// ? config.nonAgendaYearCellHeaderFormat
// : config.nonAgendaOtherCellHeaderFormat;
// const pFormattedList = cellFormat
// .split("|")
// .map((dateFormatPart) => datetime.format(dateFormatPart));
// if (typeof nonAgendaCellHeaderTemplateResolver === "function") {
// return nonAgendaCellHeaderTemplateResolver(
// schedulerData,
// item,
// pFormattedList,
// style
// );
// }
// const pList = pFormattedList.map((formattedItem, pIndex) => (
// <div key={pIndex}>{formattedItem}</div>
// ));
// return (
// <th key={`header-${item.time}`} className="header3-text" style={style}>
// <div>{pList}</div>
// </th>
// );
// });
// }
// return (
// <thead>
// <tr style={{ height: headerHeight }}>{headerList}</tr>
// </thead>
// );
// }
// HeaderView.propTypes = {
// schedulerData: PropTypes.object.isRequired,
// nonAgendaCellHeaderTemplateResolver: PropTypes.func,
// };
// HeaderView.defaultProps = {
// nonAgendaCellHeaderTemplateResolver: null,
// };
// export default HeaderView;
_dayjs["default"].extend(_weekOfYear["default"]);
function HeaderView(_ref) {
var schedulerData = _ref.schedulerData,
nonAgendaCellHeaderTemplateResolver = _ref.nonAgendaCellHeaderTemplateResolver;
var headers = schedulerData.headers,
cellUnit = schedulerData.cellUnit,
config = schedulerData.config,
localeDayjs = schedulerData.localeDayjs;
var headerHeight = schedulerData.getTableHeaderHeight();
var cellWidth = schedulerData.getContentCellWidth();
// Get the start and end dates from the headers array
var start = localeDayjs(new Date(headers[0].time));
var end = localeDayjs(new Date(headers[headers.length - 1].time));
// Function to generate weeks for a given range (start to end date)
var generateWeeksForRange = function generateWeeksForRange(start, end) {
var weeks = [];
var currentStart = start.startOf("week");
var currentEnd = currentStart.endOf("week");
while (currentStart.isBefore(end)) {
weeks.push({
weekNumber: currentStart.week(),
startDate: currentStart,
endDate: currentEnd
});
currentStart = currentStart.add(1, "week");
currentEnd = currentStart.endOf("week");
}
return weeks;
};
// Generate weeks between start and end dates
var weeks = generateWeeksForRange(start, end);
console.log(" weeks ", weeks);
// Function to group headers by week
var groupHeadersByWeek = function groupHeadersByWeek(headers) {
var weeksMap = {};
headers.forEach(function (item) {
var datetime = localeDayjs(new Date(item.time));
var weekNumber = datetime.week();
if (!weeksMap[weekNumber]) {
weeksMap[weekNumber] = [];
}
weeksMap[weekNumber].push(item);
});
return weeksMap;
};
var groupedHeaders = groupHeadersByWeek(headers);
// Function to generate months for a given range (start to end date)
var generateMonthsForRange = function generateMonthsForRange(start, end) {
var months = [];
var currentMonth = start.startOf("month");
while (currentMonth.isBefore(end, "month")) {
months.push({
monthYear: currentMonth.format("MMMM YYYY"),
startDate: currentMonth.startOf("month"),
endDate: currentMonth.endOf("month")
});
currentMonth = currentMonth.add(1, "month");
}
return months;
};
// Generate months between start and end dates
var months = generateMonthsForRange(start, end);
// Render the month row
var renderMonthRow = function renderMonthRow() {
var monthHeaders = [];
months.forEach(function (month) {
var totalDays = month.endDate.diff(month.startDate, "days") + 1;
monthHeaders.push(/*#__PURE__*/_react["default"].createElement("th", {
key: month.monthYear,
colSpan: totalDays,
className: "header-month"
}, month.monthYear));
});
return /*#__PURE__*/_react["default"].createElement("tr", {
style: {
height: headerHeight / 3
}
}, monthHeaders);
};
// Render the week row
var renderWeekRow = function renderWeekRow() {
var weekHeaders = [];
weeks.forEach(function (week) {
weekHeaders.push(/*#__PURE__*/_react["default"].createElement("th", {
key: week.weekNumber,
colSpan: 7,
className: "header-week"
}, "Week ", week.weekNumber));
});
return /*#__PURE__*/_react["default"].createElement("tr", {
style: {
height: headerHeight / 3
}
}, weekHeaders);
};
// Render the date row
var renderDateRow = function renderDateRow() {
var dateHeaders = [];
var currentDay = start.clone().startOf("day");
while (currentDay.isBefore(end, "day")) {
var dateString = currentDay.format("YYYY-MM-DD");
var headerItem = headers.find(function (item) {
return localeDayjs(new Date(item.time)).isSame(currentDay, "day");
});
var date = headerItem ? localeDayjs(new Date(headerItem.time)).format("D") : "";
dateHeaders.push(/*#__PURE__*/_react["default"].createElement("th", {
key: dateString,
className: "header-date",
style: {
width: cellWidth
}
}, date));
currentDay = currentDay.add(1, "day");
}
return /*#__PURE__*/_react["default"].createElement("tr", {
style: {
height: headerHeight / 3
}
}, dateHeaders);
};
return /*#__PURE__*/_react["default"].createElement("thead", null, renderMonthRow(), renderWeekRow(), renderDateRow());
}
HeaderView.propTypes = {
schedulerData: _propTypes["default"].object.isRequired,
nonAgendaCellHeaderTemplateResolver: _propTypes["default"].func
};
HeaderView.defaultProps = {
nonAgendaCellHeaderTemplateResolver: null
};
var _default = exports["default"] = HeaderView;
//# sourceMappingURL=HeaderView.js.map