REACT Timeline errors

[Hirn]

I noticed 2 errors when using Timeline
1. When using the year/month view, some months are displayed in the weekend style
2. The end date is not displayed correctly for some events. This error is also tracked in version 12.1

Version SNAPSHOT_v13.1d_2024-04-06/Pro

class App extends Component {
  constructor(param) {
    super(param);
  };
  licenses = [
    {
      "@id": "1",
      "client": "masterframework",
      "type": "test license",
      "title": "Testlicense",
      "count": "10",
      "beginning": "2019.12.01",
      "expire": "2021.02.10",
      "description": "test"
    },
    {
      "@id": "2",
      "client": "vwag2020",
      "type": "zzzz",
      "title": "zzz",
      "count": "4",
      "beginning": "2020.04.01",
      "expire": "2021.04.26",
      "description": "zzzz"
    },
    {
      "@id": "3",
      "client": "masterframework",
      "type": "zzzz",
      "title": "Test 2",
      "count": "10",
      "beginning": "2020.04.30",
      "expire": "2021.02.24",
      "description": "test 2222222"
    },
    {
      "@id": "4",
      "client": "howto",
      "type": "T1",
      "title": "T1",
      "count": "4",
      "beginning": "2019.11.20",
      "expire": "2020.11.25",
      "description": "T1"
    },
    {
      "@id": "6",
      "client": "howto",
      "type": "TESTLIZT4",
      "title": "TESTLIZT4",
      "count": "3",
      "beginning": "2020.04.01",
      "expire": "2013.06.30",
      "description": "TESTLIZT4 comment"
    },
    {
      "@id": "7",
      "client": "howto",
      "type": "TESTLIZT5",
      "title": "TESTLIZT5",
      "count": "2",
      "beginning": "2020.04.01",
      "expire": "2013.06.30",
      "description": "ztrztr"
    },
    {
      "@id": "8",
      "client": "howto",
      "type": "fdsfds",
      "title": "fdsfds",
      "count": "3",
      "beginning": "2020.04.01",
      "expire": "2013.09.30",
      "description": ""
    },
    {
      "@id": "9",
      "client": "howto",
      "type": "fdsfds",
      "title": "rew",
      "count": "4",
      "beginning": "2020.04.01",
      "expire": "2023.06.20",
      "description": "gffdgfdgfdgfdgfdgfdgfdgfdgfdfgdfgfgfgfg"
    },
    {
      "@id": "10",
      "client": "howto",
      "type": "11",
      "title": "11",
      "count": "1",
      "beginning": "2020.04.01",
      "expire": "2021.04.01",
      "description": "11"
    },
    {
      "@id": "11",
      "client": "howto",
      "type": "fd",
      "title": "fd",
      "count": "1",
      "beginning": "2020.04.01",
      "expire": "2021.04.01",
      "description": "fd"
    }
  ];
  types = [
    {name: 'test license'},
    {name: 'zzzz'},
    {name: 'T1'},
    {name: 'TESTLIZT4'},
    {name: 'TESTLIZT5'},
    {name: 'fdsfds'},
    {name: '11'},
    {name: 'fd'}
  ];
  getDate(record, value, field, fieldName) {
    let ret = value;
    if (window.isc.isA.String(value)) {
      ret = new Date(value);
    }
    return ret;
  }

  render() {
    var _calStart = new Date();
    var _calEnd = _calStart.duplicate();
    _calEnd.setDate(_calEnd.getDate() + 730);
    return (
      <>
        <DataSource ID="licensesDS" clientOnly="true" testData={this.licenses}>
          <fields>
            <DSField name="@id" type="text" primaryKey="true" />
            <DSField name="title" type="text" />
            <DSField name="client" type="text" />
            <DSField name="type" type="text" />
            <DSField name="description" type="text" />
            <DSField name="beginning" type="date" getFieldValue={this.getDate}/>
            <DSField name="expire" type="date" getFieldValue={this.getDate} />
          </fields>
        </DataSource>
        <Timeline ID="licensesGrid" dataSource="licensesDS" autoFetchData="true" width="100%" height="100%"
          showCellHovers="true" showQuickEventDialog="false" showEventDescriptions="false" hideUnusedLanes="false"
          startDate={_calStart} endDate={_calEnd} timelineGranularity="month"
          nameField="title" startDateField="beginning" endDateField="expire" laneNameField="type"
          lanes={this.types} canEditLane="false" laneEventPadding="2">
          <headerLevels>
            <unit>year</unit>
          </headerLevels>
          <headerLevels>
            <unit>month</unit>
          </headerLevels>
          <laneFields>
            <name>name</name>
            <title>Licenses</title>
            <minWidth>120</minWidth>
            <autoFitWidth>true</autoFitWidth>
          </laneFields>
        </Timeline>
      </>
    );
  }
}
export default App;

[Isomorphic]

Some annotations on the screenshot might clarify your issues #1 and #2. Looks like for #1, the zzzz event is drawn as ending in May, but the text shows it ending in April. For #2, you're referring to the columns for some months being darker than others? Is that a correct summary?

[Hirn]

1. Yes, some columns have a dark background (weekend background)
2. The zzz event ends in April, but the Timeline shows that it ends in May. The hint for the event is correct

    { "@id": "2",
       "client": "vwag2020",
       "type": "zzzz",
       "title": "zzz",
       "count": "4",
       "beginning": "2020.04.01",
       "expire": "2021.04.26",
       "description": "zzzz" },

[Isomorphic]

Thanks for the report - both issues have been addressed back to 12.1 and you can try out the fixes in tomorrow's builds, dated April 13 or later.

[Hirn]

I have updated to the version "2024-05-02" but the error is still showing up

[Isomorphic]

Which issue do you see still showing up?

We're seeing both issues addressed in the Showcase JS samples, where you can live-edit the source, and in React with local changes (live-editing is not yet added for React samples in the Showcase).

[Hirn]

everything really works. Apparently I updated the smart client incorrectly.

By the way, a question about updates... I already have 18 modules from smartclient to react and I have to update each module manually. Do you have any thoughts on how to update once for all modules at once?

[Isomorphic]

We're not sure why you say you have to update each module in your package.json separately. As documented here, if you run "npm update" in the directory with your package.json, all your dependencies should be updated to the latest version consistent with how they're declared in the package.json. (I.e., if you've specified the version as "^1.2.3", then it won't update to version 2.x.x from "npm update."

In the case of SmartClient, our published NPM modules are actually just installers because the framework is large - that's why updating them to the latest doesn't update the installed framework version. We document here how to install and configure them, and it's also documented on each module's npm web page. Once you install a SmartClient npm module, you'll notice that you have an isc-config.json in your project directory, similar to package.json. This file stores details about the current framework version you have installed, and your preferences, such as whether you always want to install the latest framework when updating.

To update the installed SmartClient framework, go to the location the SmartClient module is installed (e.g. ~/myapp/node_modules/smartclient-lgpl), and then run an appropriate update command. If your isc-config.json already specifies to use the "latest" date, then you can simply run

npm run update

To update to the latest framework. Note that this is "npm run update" and not "npm update". If your isc-config.json specifies the wrong date or branch, you can pass the correct values on the command line as per the referenced documentation

npm run update --branch=13.1 --date=latest