Version 4.3.4

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [4.3.4](https://github.com/react-scheduler/react-big-schedule/compare/4.3.3...4.3.4)
+
+`2024-02-21`
+
+- Updated `node_modules` version by [@ansulagrawal](https://github.com/ansulagrawal) in [#132](https://github.com/react-scheduler/react-big-schedule/pull/132).
+- Fix Issue of Displaying hour headers properly in ViewType.Da by [@ansulagrawal](https://github.com/ansulagrawal) in [#131](https://github.com/react-scheduler/react-big-schedule/pull/131).
+- Bump webpack-dev-server from 4.15.1 to 5.0.2 by [@dependabot](https://github.com/dependabot) in [#130](https://github.com/react-scheduler/react-big-schedule/pull/130).
+
 ## [4.3.3](https://github.com/react-scheduler/react-big-schedule/compare/4.3.2...4.3.3)
 
 `2023-12-16`

SECURITY.md

@@ -7,7 +7,7 @@ We take the security of react-big-schedule seriously. If you believe you have fo
 
 | Version |	Supported |
 | --------| --------- |
-| 4.3.1	| :white_check_mark: |
+| 4.3.2 or grater 	| :white_check_mark: |
 | 4.2.5	| :white_check_mark: |
 | rest all | :x: |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "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",
@@ -59,8 +59,8 @@
     "fix": "eslint ./"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.2.6",
-    "antd": "^5.12.2",
+    "@ant-design/icons": "^5.3.0",
+    "antd": "^5.14.1",
     "dayjs": "^1.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -70,14 +70,14 @@
     "rrule": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.6",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/preset-env": "^7.23.6",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^6.10.0",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.1",
@@ -86,10 +86,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
     "fs-extra": "^11.2.0",
-    "html-webpack-plugin": "^5.5.4",
-    "style-loader": "^3.3.3",
-    "webpack": "^5.89.0",
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^3.3.4",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.2"
   }
 }

src/components/SchedulerData.js

@@ -657,124 +657,126 @@ export default class SchedulerData {
   }
 
   // Previous Code
-  // _createHeaders() {
-  //   const headers = [];
-  //   let start = this.localeDayjs(new Date(this.startDate));
-  //   let end = this.localeDayjs(new Date(this.endDate));
-  //   let header = start;
-
-  //   if (this.showAgenda) {
-  //     headers.push({ time: header.format(DATETIME_FORMAT), nonWorkingTime: false });
-  //   } else if (this.cellUnit === CellUnit.Hour) {
-  //     if (start.hour() === 0) {
-  //       start = start.add(this.config.dayStartFrom, 'hours');
-  //     }
-  //     if (end.hour() === 0) {
-  //       end = end.add(this.config.dayStopTo, 'hours');
-  //     }
-  //     header = start;
-
-  //     let prevHour = -1;
-  //     while (header >= start && header <= end) {
-  //       // prevent doubled hours on time change
-  //       if (header.hour() === prevHour) {
-  //         header = header.add(1, 'hours');
-  //         continue;
-  //       }
-  //       prevHour = header.hour();
-  //       const minuteSteps = this.getMinuteStepsInHour();
-  //       for (let i = 0; i < minuteSteps; i++) {
-  //         const hour = header.hour();
-  //         if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
-  //           const time = header.format(DATETIME_FORMAT);
-  //           const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-  //           headers.push({ time, nonWorkingTime });
-  //         }
-
-  //         header = header.add(this.config.minuteStep, 'minutes');
-  //       }
-  //     }
-  //   } else if (this.cellUnit === CellUnit.Day) {
-  //     while (header >= start && header <= end) {
-  //       const time = header.format(DATETIME_FORMAT);
-  //       const dayOfWeek = header.weekday();
-  //       if (this.config.displayWeekend || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
-  //         const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-  //         headers.push({ time, nonWorkingTime });
-  //       }
-
-  //       header = header.add(1, 'days');
-  //     }
-  //   } else if (this.cellUnit === CellUnit.Week) {
-  //     while (header >= start && header <= end) {
-  //       const time = header.format(DATE_FORMAT);
-  //       headers.push({ time });
-  //       header = header.add(1, 'weeks').startOf('week');
-  //     }
-  //   } else if (this.cellUnit === CellUnit.Month) {
-  //     while (header >= start && header <= end) {
-  //       const time = header.format(DATE_FORMAT);
-  //       headers.push({ time });
-  //       header = header.add(1, 'months').startOf('month');
-  //     }
-  //   } else if (this.cellUnit === CellUnit.Year) {
-  //     while (header >= start && header <= end) {
-  //       const time = header.format(DATE_FORMAT);
-  //       headers.push({ time });
-  //       header = header.add(1, 'years').startOf('year');
-  //     }
-  //   }
-
-  //   this.headers = headers;
-  // }
-
   _createHeaders() {
     const headers = [];
-    const start = this.localeDayjs(new Date(this.startDate));
-    const end = this.localeDayjs(new Date(this.endDate));
+    let start = this.localeDayjs(new Date(this.startDate));
+    let end = this.localeDayjs(new Date(this.endDate));
+    let header = start;
 
-    const processHeader = (header, format, unit, incrementFn) => {
-      let head = header;
-      while (head >= start && head <= end) {
-        const time = head.format(format);
-        if (unit === CellUnit.Day) {
-          const dayOfWeek = head.weekday();
-          if (this.config.displayWeekend || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
+    if (this.showAgenda) {
+      headers.push({ time: header.format(DATETIME_FORMAT), nonWorkingTime: false });
+    } else if (this.cellUnit === CellUnit.Hour) {
+      if (start.hour() === 0) {
+        start = start.add(this.config.dayStartFrom, 'hours');
+      }
+      if (end.hour() === 0) {
+        end = end.add(this.config.dayStopTo, 'hours');
+      }
+      header = start;
+
+      let prevHour = -1;
+      while (header >= start && header <= end) {
+        // prevent doubled hours on time change
+        if (header.hour() === prevHour) {
+          header = header.add(1, 'hours');
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        prevHour = header.hour();
+        const minuteSteps = this.getMinuteStepsInHour();
+        for (let i = 0; i < minuteSteps; i += 1) {
+          const hour = header.hour();
+          if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
+            const time = header.format(DATETIME_FORMAT);
             const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
             headers.push({ time, nonWorkingTime });
           }
-        } else {
-          headers.push({ time });
+
+          header = header.add(this.config.minuteStep, 'minutes');
         }
-        head = head.add(1, incrementFn);
       }
-    };
-
-    if (this.showAgenda) {
-      headers.push({ time: start.format(DATETIME_FORMAT), nonWorkingTime: false });
-    } else if (this.cellUnit === CellUnit.Hour) {
-      const hourIncrement = this.config.minuteStep < 60 ? 'minutes' : 'hours';
-      const minuteSteps = this.getMinuteStepsInHour();
-      let header = start.hour() === 0 ? start.add(this.config.dayStartFrom, 'hours') : start;
-      while (header <= end) {
-        const hour = header.hour();
-        if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
-          const time = header.format(DATETIME_FORMAT);
+    } else if (this.cellUnit === CellUnit.Day) {
+      while (header >= start && header <= end) {
+        const time = header.format(DATETIME_FORMAT);
+        const dayOfWeek = header.weekday();
+        if (this.config.displayWeekend || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
           const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
           headers.push({ time, nonWorkingTime });
         }
-        header = header.add(minuteSteps, hourIncrement);
+
+        header = header.add(1, 'days');
+      }
+    } else if (this.cellUnit === CellUnit.Week) {
+      while (header >= start && header <= end) {
+        const time = header.format(DATE_FORMAT);
+        headers.push({ time });
+        header = header.add(1, 'weeks').startOf('week');
+      }
+    } else if (this.cellUnit === CellUnit.Month) {
+      while (header >= start && header <= end) {
+        const time = header.format(DATE_FORMAT);
+        headers.push({ time });
+        header = header.add(1, 'months').startOf('month');
+      }
+    } else if (this.cellUnit === CellUnit.Year) {
+      while (header >= start && header <= end) {
+        const time = header.format(DATE_FORMAT);
+        headers.push({ time });
+        header = header.add(1, 'years').startOf('year');
       }
-    } else {
-      const header = start;
-      const format = this.cellUnit === CellUnit.Day ? DATETIME_FORMAT : DATE_FORMAT;
-      const incrementFn = this.cellUnit === CellUnit.Day ? 'days' : `${this.cellUnit}s`;
-      processHeader(header, format, this.cellUnit, incrementFn);
     }
 
     this.headers = headers;
   }
 
+  // Fix Optimited code
+  // _createHeaders() {
+  //   const headers = [];
+  //   const start = this.localeDayjs(new Date(this.startDate));
+  //   const end = this.localeDayjs(new Date(this.endDate));
+
+  //   const processHeader = (header, format, unit, incrementFn) => {
+  //     let head = header;
+  //     while (head >= start && head <= end) {
+  //       const time = head.format(format);
+  //       if (unit === CellUnit.Day) {
+  //         const dayOfWeek = head.weekday();
+  //         if (this.config.displayWeekend || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
+  //           const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
+  //           headers.push({ time, nonWorkingTime });
+  //         }
+  //       } else {
+  //         headers.push({ time });
+  //       }
+  //       head = head.add(1, incrementFn);
+  //     }
+  //   };
+
+  //   if (this.showAgenda) {
+  //     headers.push({ time: start.format(DATETIME_FORMAT), nonWorkingTime: false });
+  //   } else if (this.cellUnit === CellUnit.Hour) {
+  //     const hourIncrement = this.config.minuteStep < 60 ? 'minutes' : 'hours';
+  //     const minuteSteps = this.getMinuteStepsInHour();
+  //     let header = start.hour() === 0 ? start.add(this.config.dayStartFrom, 'hours') : start;
+  //     while (header <= end) {
+  //       const hour = header.hour();
+  //       if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
+  //         const time = header.format(DATETIME_FORMAT);
+  //         const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
+  //         headers.push({ time, nonWorkingTime });
+  //       }
+  //       header = header.add(minuteSteps, hourIncrement);
+  //     }
+  //   } else {
+  //     const header = start;
+  //     const format = this.cellUnit === CellUnit.Day ? DATETIME_FORMAT : DATE_FORMAT;
+  //     const incrementFn = this.cellUnit === CellUnit.Day ? 'days' : `${this.cellUnit}s`;
+  //     processHeader(header, format, this.cellUnit, incrementFn);
+  //   }
+
+  //   this.headers = headers;
+  // }
+
   _createInitHeaderEvents(header) {
     const start = this.localeDayjs(new Date(header.time));
     const startValue = start.format(DATETIME_FORMAT);

webpack/webpack.dev.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ESLintWebpackPlugin = require('eslint-webpack-plugin');