Our pure JavaScript Scheduler component


Post by ashwin »

Hi,

I am facing below warnings in the deployed environment but not in local. Any reason for this?

WrapperHelper.js?05a2:6
BryntumSchedulerProComponent development warning!
"listeners" is a static config option for component constructor only. No runtime changes are supported!
Please check React integration guide: https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide

BryntumSchedulerProComponent development warning!
"tbar" is a static config option for component constructor only. No runtime changes are supported!
Please check React integration guide: https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide


Post by marcio »

Hey ashwin,

These warnings are important and should be resolved, as they could lead to unexpected behavior. Usually, those options should be passed directly to the component and not on some state variable per example, as the warning says, the listeners and tbar options are static and should not be changed directly during runtime. If you still have doubts about that, please share how does your component look like for us to assist you.

Best regards,
Márcio


Post by ashwin »

Below is the code, i am not updating anything from state

 <BryntumSchedulerPro
        ref={schedulerRef}
        startDate={DateHelper.format(dateRangeSelect.startDate, 'YYYY-MM-DD')}
        endDate={DateHelper.format(addDays(dateRangeSelect.endDate, 1), 'YYYY-MM-DD')}
        fillTicks
        onDataChange={handleDataCHange}
      // eventTooltipFeature={{
      //   template: (record: any) => ReactDOMServer.renderToStaticMarkup(<div><ToolTipPuck data={record} /></div>),
      //   // hideDelay: 10000,
      // }}
        features={{
          scheduleTooltip: false,
          search: true,
          // eventResize: false,
          dependencies: false,
          // calendar: true,
          taskEdit: false,
          eventDrag: {
            copy: true, // create a copy of the dragged event in the scheduler's event store
          },
          eventTooltip: {
            template: (record: any) => ReactDOMServer.renderToStaticMarkup(<div><ToolTipPuck data={record} /></div>),
            cls: 'custom-tooltip-section',
          // hideDelay: 100004,
          },
          timeRanges: {
            showHeaderElements: true,
          },
          // timeRanges: true,
          tree: true,
          resourceTimeRanges: true,
          // percentBar   : true,
          regionResize: true,
          excelExporter: {
            zipcelx,
            // Choose the date format for date fields
            dateFormat: 'YYYY-MM-DD HH:mm',
          },
          pdfExport: {
            exportServer: 'http://localhost:3000/',
            // Required for font-awesome icons to display correctly

      // headerTpl,
      // footerTpl
      },
      eventEdit: {
        items: {
          recurrenceCombo: false,
          // actBillHrs: {
          //   type: 'text',
          //   name: 'actBillHrs',
          //   label: 'Actual hrs',
          //   weight: 120,
          // },
          // totalEstBillHrs: {
          //   type: 'text',
          //   name: 'totalEstBillHrs',
          //   label: 'Est hrs',
          //   weight: 120,
          // // This field is only displayed for meetings
          // // dataset : { eventType : 'meeting' }
          // },
          // dwell: {
          //   type: 'text',
          //   name: 'dwell',
          //   label: 'dwell',
          //   weight: 120,
          // // This field is only displayed for meetings
          // // dataset : { eventType : 'meeting' }
          // },
          // prod: {
          //   type: 'text',
          //   name: 'prod',
          //   label: 'prod',
          //   weight: 120,
          // // This field is only displayed for meetings
          // // dataset : { eventType : 'meeting' }
          // },
          // eventColor: {
          //   type: 'combo',
          //   name: 'eventColor',
          //   label: 'color',
          //   items: ['#ffffff'],
          //   weight: 120,
          // },
          // percentDone: {
          //   type: 'text',
          //   name: 'percentDone',
          //   label: 'percentDone',
          //   weight: 120,
          // // This field is only displayed for meetings
          // // dataset : { eventType : 'meeting' }
          // },
          nameField: {
            readOnly: true,
          },
          shopField: {
            type: 'text',
            name: 'shopName',
            label: 'shop',
            readOnly: true,
            weight: 120,
          },
          resourceField: {
            required: true,
            label: 'SLOT',
          },
          endDateField: {
            // type: 'endDateField',
            listeners: {
              // Look in owner chain for this function name
              change: (record: any) => {
                const endDateCombo = record.source.owner.widgetMap.nameField.placeholder;
                if (endDateCombo === 'Puck Name') {
                  // setendDateDragPuck(record.value);
                }
              },
            },
          },

        },
      },
      eventDragCreate: false,
      // Turn the Event menu off completely, will not be created
      eventMenu: true,
      // Turn the Schedule menu off completely, will not be created
      scheduleMenu: false,
      // Turn the TimeAxis Header menu off completely, will not be created
      timeAxisHeaderMenu: true,
    }}
    eventRenderer={(argss: any) => {
      const { eventRecord, resourceRecord, renderData } = argss;
      const { isLeaf } = resourceRecord;
      // Add custom CSS classes to the template element data by setting property names
      // eslint-disable-next-line no-param-reassign
      renderData.cls.leaf = isLeaf;
      // eslint-disable-next-line no-param-reassign
      renderData.cls.group = !isLeaf;

      // add css class to the event
      renderData.cls.add('customLeftBars');

      // const value = eventRecord.data.percentDone || 0;
      // Add a child to the event element (b-sch-event)
      // renderData.children.push({
      //   className: 'value',
      //   style: {
      //     width: `${value}%`,
      //   },
      //   // html : value
      //   html: '',
      // });

      const convertActualStart = DateHelper.format(new Date(eventRecord.startDate), 'YYYY-MM-DD');
      const calendarStart = DateHelper.format(new Date(dateRangeSelect.startDate), 'YYYY-MM-DD');
      // const checkstartMore: any = (DateHelper.isAfter(new Date(eventRecord.actualStartDate), dateRangeSelect.startDate)
      // || DateHelper.isEqual(new Date(eventRecord.actualStartDate), dateRangeSelect.startDate));

      const checkstartMore = DateHelper.isBefore(new Date(convertActualStart), new Date(calendarStart));

      const convertActyualEnd = DateHelper.format(new Date(eventRecord.endDate), 'YYYY-MM-DD');
      const calendarEnd = DateHelper.format(new Date(dateRangeSelect.endDate), 'YYYY-MM-DD');

      const checkendMore = DateHelper.isAfter(new Date(convertActyualEnd), new Date(calendarEnd));

      // if (eventRecord.droppedEvent) {
      //   console.log('winnnt3', schedulerinst.instance);
      //   const eventCurrentDrop = schedulerinst.instance.eventStore.getById(eventRecord.id);
      //   const newData = getsampleRightPanel.map((k: any) => (
      //     {
      //       ...k,
      //       id: _.uniqueId(),
      //       children: k.children.map((m: any) => ({ ...m, id: _.uniqueId() })),
      //     }));
      //   setsampleRightPanel(newData);
      //   schedulerinst.instance?.editEvent(eventCurrentDrop);
      //   eventCurrentDrop.droppedEvent = false;
      // }

      const value = eventRecord.data.percentDone || 0;
      // Add a child to the event element (b-sch-event)

      renderData.children.push({
        className: 'percCompleteDynamic',
        style: {
          width: `${value}%`,
        },
        html: '',
      });

      renderData.children.push({
        className: 'value',
        style: {
          left: (checkstartMore || checkendMore) ? `${Math.abs(renderData.left)}px` : '0px',
        },
        // html : value
        html: ReactDOMServer.renderToStaticMarkup(<EventRenderer eventRecord={eventRecord} checkstartMore={checkstartMore} checkendMore={checkendMore} />),
      });

      if (eventRecord.droppedEvent) {
        const eventCurrentDrop = schedulerinst.instance.eventStore.getById(eventRecord.id);
        setTimeout(() => {
          eventCurrentDrop.droppedEvent = false;
        }, 1000);
      }

      // return isLeaf ? ReactDOMServer.renderToStaticMarkup(<EventRenderer eventRecord={eventRecord} checkstartMore={checkstartMore} checkendMore={checkendMore} />) : 'out of slot';
    }}
  // eslint-disable-next-line react/jsx-props-no-multi-spaces
  // eventRenderer={() => ReactDOMServer.renderToStaticMarkup(<EventRenderer checkstartMore={checkstartMore} checkendMore={checkendMore} />)}
    resources={eventsData ? eventsData?.resources : []}
  // events={eventsData ? eventsData?.events : []}
    listeners={{
      // eventmouseenter(event: any) {
      //   if (event && event.relatedTarget) {
      //     const { relatedTarget } = event;
      //     console.log('11155', relatedTarget);
      //     // Do something with relatedTarget
      //   }
      // },
      // onTimeSpanMouseLeave(event: any) {
      //   if (event && event.relatedTarget) {
      //     const { relatedTarget } = event;
      //     console.log('6777', relatedTarget);
      //     // Do something with relatedTarget
      //   }
      // },
      // eventClick(data: any) {
      //   console.log('single', data);
      //   const targetPrevDate = schedulerinst.instance.widgetMap.startDateFiled.currentElement.querySelector('.b-icon-angle-left');
      //   targetPrevDate.click();
      // },
      renderEvent({ eventRecord, element }: any) {
        // if (schedulerinst.instance) {
        //   const viewStartDate = schedulerinst.instance.timeAxis.startDate;

        //   if (!DateHelper.isAfter(
        //     new Date(eventRecord.actualStartDate),
        //     viewStartDate,
        //   )) {
        //     // if (eventRecord.name === 'DEAX1002') {
        //     const leftValue = element.offsetLeft;
        //     const target = element.querySelector('.custom-left-style');
        //     if (target) {
        //       target.style.left = `${Math.abs(leftValue)}px`;
        //     }
        //   }
        // }

        if (element) {
          const target = element.querySelector('.render-event-next');
          if (target) {
            target.addEventListener('click', () => {
              schedulerinst.instance.mask('Loading data');
              let startDate: any;
              let endDate: any;
              const addStartDate = DateHelper.add(dateRangeSelect.endDate, 3, 'day');
              const addEndDate = DateHelper.add(addStartDate, 11, 'day');
              setDateRangeSelect((prev: any) => ({ ...prev, startDate: addStartDate, endDate: addEndDate }));
              // eslint-disable-next-line prefer-const
              startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
              // eslint-disable-next-line prefer-const
              endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
              schedulerinst.instance.setTimeSpan(addStartDate, addDays(addEndDate, 1));
              // eslint-disable-next-line max-len
              const myCustomTag = schedulerinst.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
              myCustomTag.innerText = `${startDate}-${endDate}`;
              setInitateCall(true);
            });
          }
          if (eventRecord) {
          // do domething
          }
          const targetPrev = element.querySelector('.render-event-prev');
          if (targetPrev) {
            targetPrev.addEventListener('click', () => {
              schedulerinst.instance.mask('Loading data');
              let startDate: any;
              let endDate: any;
              const addStartDate = DateHelper.add(dateRangeSelect.startDate, -3, 'day');
              const addEndDate = DateHelper.add(addStartDate, -11, 'day');
              setDateRangeSelect((prev: any) => ({ ...prev, startDate: addEndDate, endDate: addStartDate }));
              // eslint-disable-next-line prefer-const
              startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
              // eslint-disable-next-line prefer-const
              endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
              schedulerinst.instance.setTimeSpan(addEndDate, addDays(addStartDate, 1));
              // eslint-disable-next-line max-len
              const myCustomTag = schedulerinst.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
              myCustomTag.innerText = `${startDate}-${endDate}`;
              setInitateCall(true);
            });
          }
        }

        // if (eventRecord.droppedEvent) {
        //   console.log('winnnt', schedulerinst.instance);
        //   const eventCurrentDrop = schedulerinst.instance.eventStore.getById(eventRecord.id);
        //   const newData = getsampleRightPanel.map((k: any) => (
        //     {
        //       ...k,
        //       id: _.uniqueId(),
        //       children: k.children.map((m: any) => ({ ...m, id: _.uniqueId() })),
        //     }));
        //   setsampleRightPanel(newData);
        //   schedulerinst.instance?.editEvent(eventCurrentDrop);
        //   eventCurrentDrop.droppedEvent = false;
        // }
      },
      // beforeEventDrag() {
      //   console.log('dragging');
      // },
      beforeEventEditShow(props: any) {
        const { editor, eventRecord } = props;
        const { resourceField, shopField } = editor.widgetMap;
        if (eventRecord.note === 'New Task') {
          shopField.hidden = true;
          editor.title = 'Add event';
        }
        editor.widgetMap.resourceField.store.filter({
          filterBy: (resource: any) => resource.data.slottype,
        });
        resourceField.hidden = false;
      },
      eventResizeEnd(props: any) {
        setUpdateDragPayload({
          assignmentId: props.eventRecord.assignmentId,
          startDate: props.eventRecord.startDate,
          endDate: props.eventRecord.endDate,
          slotId: props.eventRecord.resourceId.split('P')[0],
          id: props.eventRecord.id,
        });
        setUpdateDrag(true);
      },
      afterEventDrop(records: any) {
        setUpdateDragPayload({
          assignmentId: records.eventRecords[0].assignmentId,
          startDate: records.eventRecords[0].startDate,
          endDate: records.eventRecords[0].endDate,
          slotId: records.eventRecords[0].resourceId.split('P')[0],
          id: records.eventRecords[0].id,
        });
        setUpdateDrag(true);
      },
      eventEditBeforeSetRecord({ record: eventRecord }: any) {
        if (eventRecord.originalData.name === 'Drag Task') {
          // eventRecord.set('name', 'Puck Name');
          // eslint-disable-next-line radix
          eventRecord.set(
            'endDate',
            new Date(
              parseInt(DateHelper.format(eventRecord.startDate, 'YYYY')),
              parseInt(DateHelper.format(eventRecord.startDate, 'M')) - 1,
              parseInt(DateHelper.format(eventRecord.startDate, 'D')) + 1,
              13,
              40,
            ),
          );
        }

        // // Only CEO and CTO roles are allowed to play golf...
        // editor.widgetMap.resourceField.store.filter({
        //   filterBy: (resource: any) => resource.data.slottype,
        // });
      },
      beforeEventSave(params: any) {
        const { eventRecord, values } = params;
        if (eventRecord.originalData.name === 'Drag Task') {
          // eventRecord.actualStartDate = DateHelper.format(new Date(eventRecord.startDate), 'YYYY-MM-DD');
          eventRecord.actualStartDate = DateHelper.format(values.startDate, 'YYYY-MM-DD');
          // const formattedDate = DateHelper.format(endDateDragPuck, 'YYYY-MM-DD');
          const formattedDate = DateHelper.format(values.endDate, 'YYYY-MM-DD');
          eventRecord.actualEndDate = `${formattedDate}T15:50:54.343Z`;
        }
      },
      afterEventSave(props: any) {
        // console.log('ss', props);
        if (props.eventRecord.originalData.note === 'New Task') {
          props.eventRecord.originalData.name = '';
          setPostDragPayload({
            id: props.eventRecord.id,
            jobId: `${props.eventRecord.originalData.milestoneWidth}`,
            slotId: props.eventRecord.resourceId.split('P')[0],
            startDate: props.eventRecord.startDate,
            endDate: props.eventRecord.endDate,
          });
          setExternalDrag(true);
        }
        if (props.eventRecord.originalData.note !== 'New Task') {
          setUpdateDragPayload({
            assignmentId: props.eventRecord.assignmentId,
            startDate: props.eventRecord.startDate,
            endDate: props.eventRecord.endDate,
            slotId: props.eventRecord.resourceId.split('P')[0],
            id: props.eventRecord.id,
          });
          setUpdateDrag(true);
        }
      },
      // selectionChange({ mode, selected }: any) {
      //     if (mode === 'row' && selected?.length) {
      //         schedulerinst.instance.tbar.widgetMap.resourceCombo.value = selected[0];
      //     }
      // }
      // afterEventSave: () => {
      //   schedulerinst.instance.eventStore.sort({ field: 'startDate', ascending: true });
      //   const eventsByStartDate = [...schedulerinst.instance.eventStore.records];
      //   schedulerinst.instance.eventStore.clearSorters();
      //   schedulerinst.instance.eventStore.sort({ field: 'endDate', ascending: false });
      //   const eventsByEndDate = [...schedulerinst.instance.eventStore.records];
      //   schedulerinst.instance.eventStore.clearSorters();
      //   if (eventsByStartDate.length) {
      //     // @ts-ignore
      //     // eslint-disable-next-line max-len
      //     schedulerinst.instance.setTimeSpan(eventsByStartDate[0].startDate, eventsByEndDate[0].endDate);
      //   }
      // },
      beforeEventDropFinalize({ context }: any) {
        const { newResource } = context;
        // Don't allow dropping events in the past
        context.valid = newResource.data.slottype;
      },
    }}
    tbar={{
      title: 'Text',
      content: '<div class="toolbar-title">Maintenance Schedule</div>',
      items: {
        startDateFiled: {
          type: 'datefield',
          value: dateRangeSelect.startDate,
          // value: '2023-1-25',
          format: 'MMM D',
          contentElementCls: 'add-custom-calendar-tbar',
          step: '10d',
          listeners: {
            change: (value : any) => {
              schedulerinst.instance.mask('Loading data');
              schedulerinst.instance.viewPreset = 'weekPreset';
              const checkDateGreaterThanPreviuos = DateHelper.isAfter(value.oldValue, value.value);
              let startDate;
              let endDate;
              if (checkDateGreaterThanPreviuos) {
                const addStartDate = DateHelper.add(dateRangeSelect.startDate, -3, 'day');
                const addEndDate = DateHelper.add(addStartDate, -11, 'day');
                setDateRangeSelect((prev: any) => ({ ...prev, startDate: addEndDate, endDate: addStartDate }));
                startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
                endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
                schedulerinst.instance.setTimeSpan(addEndDate, addDays(addStartDate, 1));
              } else {
                const addStartDate = DateHelper.add(dateRangeSelect.endDate, 3, 'day');
                const addEndDate = DateHelper.add(addStartDate, 11, 'day');
                setDateRangeSelect((prev: any) => ({ ...prev, startDate: addStartDate, endDate: addEndDate }));
                startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
                endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
                schedulerinst.instance.setTimeSpan(addStartDate, addDays(addEndDate, 1));
              }
              // eslint-disable-next-line max-len
              const myCustomTag = schedulerinst.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
              myCustomTag.innerText = `${startDate}-${endDate}`;
              setInitateCall(true);
            },
          },
        },
        addEventButton: {
          type: 'button',
          icon: 'b-icon b-icon-add',
          contentElementCls: 'add-custom-button-tbar',
          text: 'Add',
          onAction: () => {
            const resource = schedulerinst.instance.resourceStore.first;
            if (!resource) {
              Toast.show('There is no resource available');
              return;
            }
            const event = new EventModel({
              resourceId: resource.children[0].id,
              startDate: schedulerinst.instance.startDate,
              duration: 26,
              durationUnit: 'hour',
              name: 'Drag Task',
              note: 'New Task',
            });
            // schedulerinst.instance?.addEvent(event);
            schedulerinst.instance?.editEvent(event);
          },
        },
        addFilterOptin: {
          type: 'button',
          // text     : 'Excel Export',
          ref: 'excelExportBtn1',
          contentElementCls: 'add-custom-common-style-tbar',
          disabled: true,
          // icon     : 'b-fa-file-export',
          content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6V8H21V6H3ZM10 18H14V16H10V18ZM18 13H6V11H18V13Z" fill="#3F4F6B"/>
        </svg>`,
          onAction: () => {
            schedulerinst.instance.features.excelExporter.export();
          },
        },
        addExcelExport: {
          type: 'button',
          // text     : 'Excel Export',
          contentElementCls: 'add-custom-common-style-tbar',
          ref: 'excelExportBtn1',
          // icon     : 'b-fa-file-export',
          content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.5H15V3.5H9V9.5H5L12 16.5L19 9.5ZM11 11.5V5.5H13V11.5H14.17L12 13.67L9.83 11.5H11ZM19 20.5V18.5H5V20.5H19Z" fill="#3F4F6B"/>
        </svg>
        `,
          onAction: () => {
            schedulerinst.instance.features.excelExporter.export();
          },
        },
        addGridOptin: {
          type: 'button',
          // text     : 'Excel Export',
          contentElementCls: 'add-custom-common-style-tbar',
          ref: 'excelExportBtn1',
          disabled: true,
          // icon     : 'b-fa-file-export',
          content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H20C21.1 2 22 2.9 22 4V20C22 21.1 21.1 22 20 22H4C2.9 22 2 21.1 2 20V4C2 2.9 2.9 2 4 2ZM4 20H8V16H4V20ZM8 14H4V10H8V14ZM4 8H8V4H4V8ZM14 20H10V16H14V20ZM10 14H14V10H10V14ZM14 8H10V4H14V8ZM16 20H20V16H16V20ZM20 14H16V10H20V14ZM16 8H20V4H16V8Z" fill="#3F4F6B"/>
        </svg>
        `,
          onAction: () => {
            schedulerinst.instance.features.excelExporter.export();
          },
        },
      // addSearch: {
      //   type: 'dropdown',
      //   width: 300,
      //   label: 'Scroll to Event',
      //   editable: false,
      //   store: schedulerinst.instance && schedulerinst.instance.eventStore,
      //   valueField: 'id',
      //   displayField: 'name',
      //   onAction({ record }: any) {
      //     // eslint-disable-next-line max-len
      //     schedulerinst.instance.scrollEventIntoView(record, {
      //       animate: {
      //         easing: 'easeFromTo',
      //         duration: 1000,
      //       },
      //       highlight: true,
      //     });
      //     const checkId = document.querySelector("[data-ref = 'addSearch']")?.querySelector('input');
      //     if (checkId) {
      //       checkId.blur();
      //     }
      //   },
      // },
      // search: {
      //   // appendTo: document.body,
      //   type: 'text',
      //   contentElementCls: 'add-custom-elasticsearch-tbar b-fa b-fa-search',
      //   label: '',
      //   align: 'start',
      //   icon: 'b-fa b-fa-search',
      //   placeholder: 'Search Puck',
      //   value: '',
      //   // eslint-disable-next-line max-len
      //   // content: '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium makeStyles-searchicon-53 css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="SearchIcon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>',
      //   // eslint-disable-next-line max-len
      //   onInput: (val: any) => {
      //     const { instance } = schedulerinst;
      //     instance.eventStore.forEach((task: any) => {
      //       const taskClassList = new DomClassList(task.cls);
      //       const matched = taskClassList.contains('b-match');
      //       if (task.name.toLowerCase().indexOf(val.value.toLowerCase()) >= 0) {
      //         if (!matched) {
      //           taskClassList.add('b-match');
      //         }
      //       } else if (matched) {
      //         taskClassList.remove('b-match');
      //       }
      //       // eslint-disable-next-line no-param-reassign
      //       task.cls = taskClassList.value;
      //     });
      //     instance.element.classList[val.value.length > 0 ? 'add' : 'remove']('b-highlighting');
      //   },
      // },
      },
    }}
    resourceTimeRanges={eventsData.resourceTimeRangesStack}
  // eslint-disable-next-line react/jsx-props-no-spreading
    {...GanttDefaultConfig}
  />

Post by marcio »

Hey ashwin,

We would need a sample project with all the related code to your configuration. Adding your code to our Scheduler Pro React demo didn't trigger any issues (I commented on some missing parts of your code, that's why we would the sample project). We didn't have the warning displayed with this code.

function App() {
    const schedulerpro = useRef();
    const project = useRef();

const [events] = useState(projectData.events);
const [resources] = useState(projectData.resources);
const [assignments] = useState(projectData.assignments);
const [dependencies] = useState(projectData.dependencies);
const [initateCall, setInitateCall] = useState(false);
const [updateDragPayload, setUpdateDragPayload] = useState({});
const [PostDragPayload, setPostDragPayload] = useState({});
const [updateDrag, setUpdateDrag] = useState(false);
const [externalDrag, setExternalDrag] = useState(false);
const [dateRangeSelect, setDateRangeSelect] = useState(null);

return (
    <>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children={<BryntumThemeCombo />}
        />
        <BryntumProjectModel
            ref={project}
            events={events}
            resources={resources}
            assignments={assignments}
            dependencies={dependencies}
        />
        <BryntumSchedulerPro
            ref={schedulerpro}
            project={project}
            {...schedulerProConfig}
            tbar={{
                title: 'Text',
                content: '<div class="toolbar-title">Maintenance Schedule</div>',
                items: {
                  startDateFiled: {
                    type: 'datefield',
                    // value: dateRangeSelect.startDate,
                    value: '2023-1-25',
                    format: 'MMM D',
                    contentElementCls: 'add-custom-calendar-tbar',
                    step: '10d',
                    listeners: {
                      change: (value) => {
                        schedulerpro.instance.mask('Loading data');
                        schedulerpro.instance.viewPreset = 'weekPreset';
                        const checkDateGreaterThanPreviuos = DateHelper.isAfter(value.oldValue, value.value);
                        let startDate;
                        let endDate;
                        if (checkDateGreaterThanPreviuos) {
                          const addStartDate = DateHelper.add(new Date(), -3, 'day');
                          const addEndDate = DateHelper.add(addStartDate, -11, 'day');
                          setDateRangeSelect((prev) => ({ ...prev, startDate: addEndDate, endDate: addStartDate }));
                          startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
                          endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
                        //   schedulerpro.instance.setTimeSpan(addEndDate, addDays(addStartDate, 1));
                        } else {
                          const addStartDate = DateHelper.add(new Date(), 3, 'day');
                          const addEndDate = DateHelper.add(addStartDate, 11, 'day');
                          setDateRangeSelect((prev) => ({ ...prev, startDate: addStartDate, endDate: addEndDate }));
                          startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
                          endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
                        //   schedulerpro.instance.setTimeSpan(addStartDate, addDays(addEndDate, 1));
                        }
                        // eslint-disable-next-line max-len
                        const myCustomTag = schedulerpro.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
                        myCustomTag.innerText = `${startDate}-${endDate}`;
                        setInitateCall(true);
                      },
                    },
                  },
                  addEventButton: {
                    type: 'button',
                    icon: 'b-icon b-icon-add',
                    contentElementCls: 'add-custom-button-tbar',
                    text: 'Add',
                    onAction: () => {
                      const resource = schedulerpro.instance.resourceStore.first;
                      if (!resource) {
                        Toast.show('There is no resource available');
                        return;
                      }
                      const event = new EventModel({
                        resourceId: resource.children[0].id,
                        startDate: schedulerpro.instance.startDate,
                        duration: 26,
                        durationUnit: 'hour',
                        name: 'Drag Task',
                        note: 'New Task',
                      });
                      // schedulerpro.instance?.addEvent(event);
                      schedulerpro.instance.editEvent(event);
                    },
                  },
                  addFilterOptin: {
                    type: 'button',
                    // text     : 'Excel Export',
                    ref: 'excelExportBtn1',
                    contentElementCls: 'add-custom-common-style-tbar',
                    disabled: true,
                    // icon     : 'b-fa-file-export',
                    content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6V8H21V6H3ZM10 18H14V16H10V18ZM18 13H6V11H18V13Z" fill="#3F4F6B"/>
                  </svg>`,
                    onAction: () => {
                    //   schedulerinst.instance.features.excelExporter.export();
                    },
                  },
                  addExcelExport: {
                    type: 'button',
                    // text     : 'Excel Export',
                    contentElementCls: 'add-custom-common-style-tbar',
                    ref: 'excelExportBtn1',
                    // icon     : 'b-fa-file-export',
                    content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.5H15V3.5H9V9.5H5L12 16.5L19 9.5ZM11 11.5V5.5H13V11.5H14.17L12 13.67L9.83 11.5H11ZM19 20.5V18.5H5V20.5H19Z" fill="#3F4F6B"/>
                  </svg>
                  `,
                    onAction: () => {
                    //   schedulerinst.instance.features.excelExporter.export();
                    },
                  },
                  addGridOptin: {
                    type: 'button',
                    // text     : 'Excel Export',
                    contentElementCls: 'add-custom-common-style-tbar',
                    ref: 'excelExportBtn1',
                    disabled: true,
                    // icon     : 'b-fa-file-export',
                    content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H20C21.1 2 22 2.9 22 4V20C22 21.1 21.1 22 20 22H4C2.9 22 2 21.1 2 20V4C2 2.9 2.9 2 4 2ZM4 20H8V16H4V20ZM8 14H4V10H8V14ZM4 8H8V4H4V8ZM14 20H10V16H14V20ZM10 14H14V10H10V14ZM14 8H10V4H14V8ZM16 20H20V16H16V20ZM20 14H16V10H20V14ZM16 8H20V4H16V8Z" fill="#3F4F6B"/>
                  </svg>
                  `,
                    onAction: () => {
                    //   schedulerinst.instance.features.excelExporter.export();
                    },
                  },
                addSearch: {
                  type: 'dropdown',
                  width: 300,
                  label: 'Scroll to Event',
                  editable: false,
                  store: schedulerpro.instance && schedulerpro.instance.eventStore,
                  valueField: 'id',
                  displayField: 'name',
                  onAction({ record }) {
                    // eslint-disable-next-line max-len
                    schedulerpro.instance.scrollEventIntoView(record, {
                      animate: {
                        easing: 'easeFromTo',
                        duration: 1000,
                      },
                      highlight: true,
                    });
                    const checkId = document.querySelector("[data-ref = 'addSearch']")?.querySelector('input');
                    if (checkId) {
                      checkId.blur();
                    }
                  },
                },
                search: {
                  // appendTo: document.body,
                  type: 'text',
                  contentElementCls: 'add-custom-elasticsearch-tbar b-fa b-fa-search',
                  label: '',
                  align: 'start',
                  icon: 'b-fa b-fa-search',
                  placeholder: 'Search Puck',
                  value: '',
                  // eslint-disable-next-line max-len
                  // content: '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium makeStyles-searchicon-53 css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="SearchIcon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>',
                  // eslint-disable-next-line max-len
                  onInput: (val) => {
                    const { instance } = schedulerpro;
                    instance.eventStore.forEach((task) => {
                      const taskClassList = new DomClassList(task.cls);
                      const matched = taskClassList.contains('b-match');
                      if (task.name.toLowerCase().indexOf(val.value.toLowerCase()) >= 0) {
                        if (!matched) {
                          taskClassList.add('b-match');
                        }
                      } else if (matched) {
                        taskClassList.remove('b-match');
                      }
                      // eslint-disable-next-line no-param-reassign
                      task.cls = taskClassList.value;
                    });
                    instance.element.classList[val.value.length > 0 ? 'add' : 'remove']('b-highlighting');
                  },
                },
                },
              }} 
              listeners={{
                eventmouseenter(event) {
                  if (event && event.relatedTarget) {
                    const { relatedTarget } = event;
                    console.log('11155', relatedTarget);
                    // Do something with relatedTarget
                  }
                },
                onTimeSpanMouseLeave(event) {
                  if (event && event.relatedTarget) {
                    const { relatedTarget } = event;
                    console.log('6777', relatedTarget);
                    // Do something with relatedTarget
                  }
                },
                eventClick(data) {
                  console.log('single', data);
                  const targetPrevDate = schedulerpro.instance.widgetMap.startDateFiled.currentElement.querySelector('.b-icon-angle-left');
                  targetPrevDate.click();
                },
                renderEvent({ eventRecord, element }) {
                  if (schedulerpro.instance) {

                    if (element) {
                        const target = element.querySelector('.render-event-next');
                        if (target) {
                          target.addEventListener('click', () => {
                            schedulerpro.instance.mask('Loading data');
                            let startDate;
                            let endDate;
                            const addStartDate = DateHelper.add(new Date(), 3, 'day');
                            const addEndDate = DateHelper.add(addStartDate, 11, 'day');
                            // setDateRangeSelect((prev) => ({ ...prev, startDate: addStartDate, endDate: addEndDate }));
                            // eslint-disable-next-line prefer-const
                            startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
                            // eslint-disable-next-line prefer-const
                            endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
                            // schedulerpro.instance.setTimeSpan(addStartDate, addDays(addEndDate, 1));
                            // eslint-disable-next-line max-len
                            const myCustomTag = schedulerpro.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
                            myCustomTag.innerText = `${startDate}-${endDate}`;
                            setInitateCall(true);
                          });
                        }
                        if (eventRecord) {
                        // do domething
                        }
                        const targetPrev = element.querySelector('.render-event-prev');
                        if (targetPrev) {
                          targetPrev.addEventListener('click', () => {
                            schedulerpro.instance.mask('Loading data');
                            let startDate;
                            let endDate;
                            const addStartDate = DateHelper.add(new Date(), -3, 'day');
                            const addEndDate = DateHelper.add(addStartDate, -11, 'day');
                            // setDateRangeSelect((prev) => ({ ...prev, startDate: addEndDate, endDate: addStartDate }));
                            // eslint-disable-next-line prefer-const
                            startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
                            // eslint-disable-next-line prefer-const
                            endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
                            // schedulerpro.instance.setTimeSpan(addEndDate, addDays(addStartDate, 1));
                            // eslint-disable-next-line max-len
                            const myCustomTag = schedulerpro.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
                            myCustomTag.innerText = `${startDate}-${endDate}`;
                            setInitateCall(true);
                          });
                        }
                      }
                  }
              
                },
                beforeEventEditShow(props) {
                  const { editor, eventRecord } = props;
                  const { resourceField, shopField } = editor.widgetMap;
                  if (eventRecord.note === 'New Task') {
                    shopField.hidden = true;
                    editor.title = 'Add event';
                  }
                  editor.widgetMap.resourceField.store.filter({
                    filterBy: (resource) => resource.data.slottype,
                  });
                  resourceField.hidden = false;
                },
                eventResizeEnd(props) {
                  setUpdateDragPayload({
                    assignmentId: props.eventRecord.assignmentId,
                    startDate: props.eventRecord.startDate,
                    endDate: props.eventRecord.endDate,
                    slotId: props.eventRecord.resourceId.split('P')[0],
                    id: props.eventRecord.id,
                  });
                  setUpdateDrag(true);
                },
                afterEventDrop(records) {
                  setUpdateDragPayload({
                    assignmentId: records.eventRecords[0].assignmentId,
                    startDate: records.eventRecords[0].startDate,
                    endDate: records.eventRecords[0].endDate,
                    slotId: records.eventRecords[0].resourceId.split('P')[0],
                    id: records.eventRecords[0].id,
                  });
                  setUpdateDrag(true);
                },
                eventEditBeforeSetRecord({ record: eventRecord }) {
                  if (eventRecord.originalData.name === 'Drag Task') {
                    // eventRecord.set('name', 'Puck Name');
                    // eslint-disable-next-line radix
                    eventRecord.set(
                      'endDate',
                      new Date(
                        parseInt(DateHelper.format(eventRecord.startDate, 'YYYY')),
                        parseInt(DateHelper.format(eventRecord.startDate, 'M')) - 1,
                        parseInt(DateHelper.format(eventRecord.startDate, 'D')) + 1,
                        13,
                        40,
                      ),
                    );
                  }
              
                  // Only CEO and CTO roles are allowed to play golf...
                //   editor.widgetMap.resourceField.store.filter({
                //     filterBy: (resource: any) => resource.data.slottype,
                //   });
                },
                beforeEventSave(params) {
                  const { eventRecord, values } = params;
                  if (eventRecord.originalData.name === 'Drag Task') {
                    // eventRecord.actualStartDate = DateHelper.format(new Date(eventRecord.startDate), 'YYYY-MM-DD');
                    eventRecord.actualStartDate = DateHelper.format(values.startDate, 'YYYY-MM-DD');
                    // const formattedDate = DateHelper.format(endDateDragPuck, 'YYYY-MM-DD');
                    const formattedDate = DateHelper.format(values.endDate, 'YYYY-MM-DD');
                    eventRecord.actualEndDate = `${formattedDate}T15:50:54.343Z`;
                  }
                },
                afterEventSave(props) {
                  console.log('ss', props);
                  if (props.eventRecord.originalData.note === 'New Task') {
                    props.eventRecord.originalData.name = '';
                    setPostDragPayload({
                      id: props.eventRecord.id,
                      jobId: `${props.eventRecord.originalData.milestoneWidth}`,
                      slotId: props.eventRecord.resourceId.split('P')[0],
                      startDate: props.eventRecord.startDate,
                      endDate: props.eventRecord.endDate,
                    });
                    setExternalDrag(true);
                  }
                  if (props.eventRecord.originalData.note !== 'New Task') {
                    setUpdateDragPayload({
                      assignmentId: props.eventRecord.assignmentId,
                      startDate: props.eventRecord.startDate,
                      endDate: props.eventRecord.endDate,
                      slotId: props.eventRecord.resourceId.split('P')[0],
                      id: props.eventRecord.id,
                    });
                    setUpdateDrag(true);
                  }
                },
                selectionChange({ mode, selected }) {
                    if (mode === 'row' && selected?.length) {
                        schedulerpro.instance.tbar.widgetMap.resourceCombo.value = selected[0];
                    }
                },
                // afterEventSave: () => {
                //   schedulerpro.instance.eventStore.sort({ field: 'startDate', ascending: true });
                //   const eventsByStartDate = [...schedulerpro.instance.eventStore.records];
                //   schedulerpro.instance.eventStore.clearSorters();
                //   schedulerpro.instance.eventStore.sort({ field: 'endDate', ascending: false });
                //   const eventsByEndDate = [...schedulerpro.instance.eventStore.records];
                //   schedulerpro.instance.eventStore.clearSorters();
                //   if (eventsByStartDate.length) {
                //     // @ts-ignore
                //     // eslint-disable-next-line max-len
                //     schedulerpro.instance.setTimeSpan(eventsByStartDate[0].startDate, eventsByEndDate[0].endDate);
                //   }
                // },
                beforeEventDropFinalize({ context }) {
                  const { newResource } = context;
                  // Don't allow dropping events in the past
                  context.valid = newResource.data.slottype;
                },
              }}
                
        />
    </>
);
}

Best regards,
Márcio


Post Reply