Fix Issue 114 (#117)

Fix issue
#114

CONTRIBUTING.md

@@ -10,6 +10,8 @@ Before you start contributing, please take a moment to read our Code of Conduct.
 
 If you're new to the project, it's a good idea to familiarize yourself with the [README.md](https://github.com/react-scheduler/react-big-schedule/blob/master/README.md) file, which provides an overview of the project and its features. Also, explore existing issues and pull requests to understand the ongoing work and discussions.
 
+#### Important Note: The `master` branch is for beta releases, and the `main` branch is for stable releases. When changes are pushed to the `master` branch, a beta version will be released, whereas pushing changes to the `main` branch will trigger a release for the next stable version.
+
 ### How to Contribute
 
 We value contributions in various forms – from reporting issues and suggesting improvements to submitting feature requests and providing code changes. To get started with your contributions, follow these steps:
@@ -51,5 +53,3 @@ If you encounter a bug, have a feature request, or need assistance with the libr
 Thank you for taking the time to contribute to react-big-schedule! Your passion and effort are what make open-source communities thrive. We value your contributions and look forward to seeing you grow with the project.
 
 #### Happy coding!
-
-- The react-big-schedule Team

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "4.3.2",
+  "version": "4.3.3-beta.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",
@@ -60,25 +60,25 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "antd": "^5.11.0",
+    "antd": "^5.11.3",
     "dayjs": "^1.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^18.2.0",
-    "rrule": "^2.7.2"
+    "rrule": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",

src/components/AgendaResourceEvents.jsx

@@ -12,7 +12,6 @@ function AgendaResourceEvents(props) {
     const end = localeDayjs(endDate).add(1, 'days');
     const headerStart = localeDayjs(new Date(item.start));
     const headerEnd = localeDayjs(new Date(item.end));
-
     if (start === headerStart && end === headerEnd) {
       return item.events.map(evt => {
         const durationStart = localeDayjs(new Date(startDate));
@@ -36,7 +35,7 @@ function AgendaResourceEvents(props) {
   );
 
   let slotItem = (
-    <div style={{ width }} title={resourceEvents.slotName} className="overflow-text header2-text">
+    <div style={{ width }} title={resourceEvents.slotTitle || resourceEvents.slotName} className="overflow-text header2-text">
       {slotItemContent}
     </div>
   );

src/components/ResourceView.jsx

@@ -41,7 +41,7 @@ function ResourceView({ schedulerData, contentScrollbarHeight, slotClickedFunc,
     );
 
     let slotItem = (
-      <div title={item.slotName} className="overflow-text header2-text" style={{ textAlign: 'left' }}>
+      <div title={item.slotTitle || item.slotName} className="overflow-text header2-text" style={{ textAlign: 'left' }}>
         {slotCell}
       </div>
     );

src/components/SchedulerData.js

@@ -864,6 +864,7 @@ export default class SchedulerData {
       const slotRenderData = {
         slotId: slot.id,
         slotName: slot.name,
+        slotTitle: slot.title,
         parentId: slot.parentId,
         groupOnly: slot.groupOnly,
         hasSummary: false,

src/sample-data/sample1.js

@@ -1,7 +1,7 @@
 const DemoData = {
   resources: [
-    { id: 'r0', name: 'Resource0', groupOnly: true },
-    { id: 'r1', name: 'Resource1', parentId: 'r0' },
+    { id: 'r0', name: 'Resource0', title: 'Resource 0', groupOnly: true },
+    { id: 'r1', name: 'Resource1', title: 'Resource 1', parentId: 'r0' },
     { id: 'r2', name: 'Resource2', parentId: 'r3' },
     { id: 'r3', name: 'Resource3', parentId: 'r1' },
     { id: 'r4', name: 'Resource4' },