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