Bryntum Support Forums

Posted: **Tue Jan 31, 2023 8:17 pm**

Im using 5.1.2. I tried upgrading to 5.2.9, but I am using

 StateProvider({ storage: 'local' })

in my implementation, and with the update it seems this is not supported. When updating it gives me the following error.

: Screen Shot 2023-01-31 at 1.15.53 PM.png (243.85 KiB) Viewed 211 times

I do see this in the diff table, but seems local is still supported, but not sure if something more needs to be done.

Below is how we have it configured.

const stateProvider = new StateProvider({ storage: 'local' });

Posted: **Tue Jan 31, 2023 8:19 pm**

As for configuration this is what we have.

in a config file for defaults we have this,

import { SchedulerConfigCore } from '../lib/scheduler/scheduler';

type BasicConfig = SchedulerConfigCore & {
  timeRangesFeature?: {
    narrowThreshold?: number;
    showCurrentTimeLine?: boolean;
  };
};

export const getDefaultSpan = (): { startDate: string; endDate: string } => {
  const today = new Date();
  today.setHours(1);
  const yesterday = new Date(today);
  const nextWeek = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  nextWeek.setDate(yesterday.getDate() + 7);

  return {
    startDate: String(yesterday),
    endDate: String(nextWeek),
  };
};

/**
 * Provides basic app configuration for bryntum scheduler
 */
export const basicConfig: BasicConfig = {
  /**
   * Base path to fetch images for resources.
   * You can opt to use abosulte URLs for resource images, in that case {@see https://www.bryntum.com/docs/scheduler-pro/api/Scheduler/view/mixin/SchedulerEventRendering#functions}
   */
  /**
   * Default set of presets available at {@see https://www.bryntum.com/docs/scheduler-pro/api/Scheduler/preset/PresetManager}
   */
  features: {
    nonWorkingTime: false,
    resourceTimeRanges: false,
    stripe: true,
    eventMenu: {
      items: {
        copyEvent: false,
        cutEvent: false,
        deleteEvent: false,
      },
    },
    timeRanges: {
      showCurrentTimeLine: false,
    },
  },
  /**
   * Describes the columns for resources
   */
  columns: [
    {
      type: 'resourceInfo',
      text: 'Resource',
      showImage: true,
      showRole: true,
      showEventCount: false,
      width: 200,
    },
    {
      text: 'Team',
      field: 'team',
      width: 150,
    },
  ],
};

export function getBasicConfig() {
  return {
    ...basicConfig,
  };
}

then on the scheduler we have some more that are added.

<BryntumSchedulerPro
        ref={scheduler}
        id="scheduler"
        stateProvider={stateProvider}
        startDate={schedulerDates?.startDate}
        endDate={schedulerDates?.endDate}
        onScroll={handlePaging}
        appendTo="schedule"
        config={{
          ...configToUse,
          columns: [
            {
              type: 'resourceInfo',
              text: 'Resource',
              showImage: true,
              showRole: true,
              showEventCount: false,
              width: 200,
            },
            {
              text: 'Team',
              field: 'team',
              width: 150,
            },
          ],
          features: {
            eventBuffer: {
              tooltipTemplate: ({ duration }: { duration: string }) =>
                classTo.length < 1 ? `Travel Time: ${duration}` : undefined,
            },
            dependencies: false,
            nonWorkingTime: true,
            resourceNonWorkingTime: true,
            taskEdit: {
              items: {
                generalTab: {
                  // Renamed "General" tab
                  title: 'Blocked Time',
                  items: {
                    percentDoneField: false,
                  },
                },
                notesTab: false,
                predecessorsTab: false,
                successorsTab: false,
                advancedTab: false,
              },
              editorConfig: {
                bbar: {
                  // Remove delete button
                  items: {
                    deleteButton: false,
                  },
                },
              },
              eventNonWorkingTime: true,
            },
            eventDrag: {
              disabled: !hasPermissions,
            },
            eventResize: {
              disabled: !hasPermissions,
            },
            eventMenu: {
              disabled: !hasPermissions,
            },
            scheduleMenu: {
              disabled: !hasPermissions,
            },
            timeSpanHighlight: true,
          },
        }}
        allowOverlap={false}
        // in place for now to prevent id collisions. This should be fixed with api validation when the work is complete.
        events={events}
        resources={scheduleResources || []}
        calendars={timeRanges}
        onBeforeEventEdit={eventEditHandler}
        onAfterTaskSave={taskSaveHandler}
        onEventResizeEnd={afterResizeHandler}
        onAfterEventDrop={afterEventDropHandler}
        onBeforeEventEditShow={beforeEventEditShow}
        onEventClick={renderEventClick}
        listeners={{
          cellClick: onResourceClick,
        }}
        tbar={[
          '->',
          {
            type: 'combo',
            editable: false,
            items: [
              ['America/New_York', 'Eastern Time Zone'],
              ['America/Chicago', 'Central Time Zone'],
              ['America/Denver', 'Mountain Time Zone'],
              ['America/Los_Angeles', 'Pacific Time Zone'],
              ['America/Anchorage', 'Alaska Time Zone'],
              ['Pacific/Honolulu', 'Hawaii - Aleutain Time Zone'],
            ],
            value: timeZone,
            onChange: ({ value }: { value: string }) => {
              setTimeZone?.(value);
              setViewState?.({
                showMap: viewState?.showMap || false,
                view: 'scheduler',
              });
              restoreScrollPosition();
            },
          },
          {
            type: 'buttongroup',
            items: schedulerButtons,
          },
        ]}
      />

Posted: **Wed Feb 01, 2023 11:48 am**

Please check docs https://bryntum.com/products/gantt/docs/api/Core/state/StateProvider#using-local-storage
Valid code should be:

import { StateProvider } from "@bryntum/gantt";
//...
const stateProvider = StateProvider.setup("local");

Posted: **Wed Feb 01, 2023 4:52 pm**

I updated my code to what you have above, and still have the same issue.

: Screen Shot 2023-02-01 at 9.51.05 AM.png (50.38 KiB) Viewed 186 times

: Screen Shot 2023-02-01 at 9.51.16 AM.png (62.69 KiB) Viewed 186 times

: Screen Shot 2023-02-01 at 9.52.02 AM.png (306.84 KiB) Viewed 186 times

I am using scheduler pro. Any idea why I would still be getting this error?

Posted: **Wed Feb 01, 2023 9:43 pm**

Hey,

I'm sharing a demo application with the latest version of SchedulerPro and with that configuration that Alex shared and it's working correctly, perhaps you could adapt this demo with your configuration to check what is causing that error to be triggered?

Posted: **Wed Feb 01, 2023 11:21 pm**

Looking at your implementation I don't see anything that pokes out at me, and I even used your config in place of mine. I do notice that you guys are using js, and not typescript. Not sure if that would be something that would cause an issue. It wont let me build your app to convert it to TS to check. So the closest I have is to take your config file, and its still giving me the same error. Also, one thing that I notice is that even if I just declare a variable const stateProvider = StateProvider.setup('local'), and don't use it it still crashes the app, so I am not sure that this is an issue with the configuration of the app.

Posted: **Wed Feb 01, 2023 11:39 pm**

Hey, I'm sharing a Typescript project with the state provider, please notice the version of the libs, but this one is also working without that error that you mentioned.

If this doesn't work out, we would like to ask you to share a sample project with that error happening on your side for us to check.

Posted: **Thu Feb 02, 2023 5:10 pm**

Hey maybe I am missing something, but I dont see state provider being used in this example.

/**
 * Application
 */
import React, { Fragment, FunctionComponent, useRef, useEffect } from 'react';

import { BryntumDemoHeader, BryntumThemeCombo, BryntumSchedulerPro } from '@bryntum/schedulerpro-react';
import { SchedulerPro } from '@bryntum/schedulerpro';
import { schedulerProConfig } from './AppConfig';
import './App.scss';

const App: FunctionComponent = () => {
    const schedulerProRef = useRef<BryntumSchedulerPro>(null);
    const schedulerProInstance = () => schedulerProRef.current?.instance as SchedulerPro;

useEffect(() => {
    // This shows loading data
    // To load data automatically configure project with `autoLoad : true`
    schedulerProInstance().project.load();
});

return (
    <Fragment>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children={<BryntumThemeCombo />}
        />
        <BryntumSchedulerPro
            ref={schedulerProRef}
            {...schedulerProConfig}
        />
    </Fragment>
);
};

export default App;

Posted: **Thu Feb 02, 2023 5:15 pm**

Hey peaguilar,

Sorry, I shared the wrong file version, you can use this one instead

/**
 * Application
 */
import React, { Fragment, FunctionComponent, useRef, useEffect } from 'react';

import { BryntumDemoHeader, BryntumThemeCombo, BryntumSchedulerPro } from '@bryntum/schedulerpro-react';
import { SchedulerPro, StateProvider } from '@bryntum/schedulerpro';
import { schedulerProConfig } from './AppConfig';
import './App.scss';


const stateProvider = StateProvider.setup("local");

const App: FunctionComponent = () => {
    const schedulerProRef = useRef<BryntumSchedulerPro>(null);
    const schedulerProInstance = () => schedulerProRef.current?.instance as SchedulerPro;

useEffect(() => {
    // This shows loading data
    // To load data automatically configure project with `autoLoad : true`
    schedulerProInstance().project.load();
});

return (
    <Fragment>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children={<BryntumThemeCombo />}
        />
        <BryntumSchedulerPro
            ref={schedulerProRef}
            stateProvider={stateProvider}
            {...schedulerProConfig}
        />
    </Fragment>
);
};

export default App;

Posted: **Thu Feb 02, 2023 5:22 pm**

And if you run this you don't see that error? I am unable to run this app. It doesn't allow me to install the dependencies to do so.

Bryntum Support Forums

[REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal

Re: [REACT] Is there a way to disable error modal