Our pure JavaScript Scheduler component


Post by peaguilar »

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
Screen Shot 2023-01-31 at 1.15.53 PM.png (243.85 KiB) Viewed 153 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' });

Post by peaguilar »

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,
          },
        ]}
      />

Post by alex.l »

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");

All the best,
Alex


Post by peaguilar »

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
Screen Shot 2023-02-01 at 9.51.05 AM.png (50.38 KiB) Viewed 128 times
Screen Shot 2023-02-01 at 9.51.16 AM.png
Screen Shot 2023-02-01 at 9.51.16 AM.png (62.69 KiB) Viewed 128 times
Screen Shot 2023-02-01 at 9.52.02 AM.png
Screen Shot 2023-02-01 at 9.52.02 AM.png (306.84 KiB) Viewed 128 times

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


Post by marcio »

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?

Attachments
inline-data.zip
(2.1 MiB) Downloaded 17 times

Best regards,
Márcio


Post by peaguilar »

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.


Post by marcio »

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.

Attachments
basic.zip
(2.25 MiB) Downloaded 15 times

Best regards,
Márcio


Post by peaguilar »

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;

Post by marcio »

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;

Best regards,
Márcio


Post by peaguilar »

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.


Post Reply