Timeline Date Repeated

Event calendars & schedulers
1

Using the trial with the following code:

import React from 'react';
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

const AdminBookings = () => {
  const view = React.useMemo(
    () => ({
      timeline: {
        type: 'day',
        size: 7,
        weekNumbers: false,
      },
    }),
    []
  );

  const myEvents = React.useMemo(
    () => [
      {
        start: '2022-07-02T00:00',
        end: '2022-07-05T00:00',
        title: 'Event 1',
        resource: 1,
      },
      {
        start: '2022-07-10T09:00',
        end: '2022-07-15T15:00',
        title: 'Event 2',
        resource: 3,
      },
      {
        start: '2022-07-12T00:00',
        end: '2022-07-14T00:00',
        title: 'Event 3',
        resource: 4,
      },
      {
        start: '2022-07-15T07:00',
        end: '2022-07-20T12:00',
        title: 'Event 4',
        resource: 5,
      },
      {
        start: '2022-07-03T00:00',
        end: '2022-07-10T00:00',
        title: 'Event 5',
        resource: 6,
      },
      {
        start: '2022-07-10T08:00',
        end: '2022-07-11T20:00',
        title: 'Event 6',
        resource: 7,
      },
      {
        start: '2022-07-22T00:00',
        end: '2022-07-28T00:00',
        title: 'Event 7',
        resource: 7,
      },
      {
        start: '2022-07-08T00:00',
        end: '2022-07-13T00:00',
        title: 'Event 8',
        resource: 15,
      },
      {
        start: '2022-07-25T00:00',
        end: '2022-07-27T00:00',
        title: 'Event 9',
        resource: 10,
      },
      {
        start: '2022-07-20T00:00',
        end: '2022-07-23T00:00',
        title: 'Event 10',
        resource: 12,
      },
    ],
    []
  );

  const myResources = React.useMemo(
    () => [
      {
        id: 1,
        name: 'Resource A',
        color: '#e20000',
      },
      {
        id: 2,
        name: 'Resource B',
        color: '#76e083',
      },
      {
        id: 3,
        name: 'Resource C',
        color: '#4981d6',
      },
      {
        id: 4,
        name: 'Resource D',
        color: '#e25dd2',
      },
      {
        id: 5,
        name: 'Resource E',
        color: '#1dab2f',
      },
      {
        id: 6,
        name: 'Resource F',
        color: '#d6d145',
      },
      {
        id: 7,
        name: 'Resource G',
        color: '#34c8e0',
      },
      {
        id: 8,
        name: 'Resource H',
        color: '#9dde46',
      },
      {
        id: 9,
        name: 'Resource I',
        color: '#166f6f',
      },
      {
        id: 10,
        name: 'Resource J',
        color: '#f7961e',
      },
      {
        id: 11,
        name: 'Resource K',
        color: '#34c8e0',
      },
      {
        id: 12,
        name: 'Resource L',
        color: '#af0000',
      },
      {
        id: 13,
        name: 'Resource M',
        color: '#446f1c',
      },
      {
        id: 14,
        name: 'Resource N',
        color: '#073138',
      },
      {
        id: 15,
        name: 'Resource O',
        color: '#4caf00',
      },
    ],
    []
  );

  return (
    <Eventcalendar
      theme="ios"
      themeVariant="light"
      view={view}
      data={myEvents}
      resources={myResources}
    />
  );
};

export default AdminBookings;

Date headers are repeated:

43

3

Double checked install instructions, seems they don’t work:

TypeError: Cannot set properties of undefined (setting 'settings')

./src/App.js

src/App.js:9

```
   6 | import SettingsPage from './pages/Settings.page';   7 | import ProfilePage from './pages/Profile.page';   8 | >  9 | mobiscroll.settings = {  10 |     theme: 'ios' /* set global theme */  11 | }  12 | 
```

View compiled

__webpack_require__

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:784

```
  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;
```

View compiled

fn

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:150

```
  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {
```

View compiled

./src/index.js

http://localhost:3000/static/js/main.chunk.js:295:62

__webpack_require__

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:784

```
  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;
```

View compiled

fn

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:150

```
  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {
```

View compiled

1

http://localhost:3000/static/js/main.chunk.js:1083:18

__webpack_require__

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:784

```
  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;
```

View compiled

checkDeferredModules

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:45

```
  42 | 	}  43 | 	if(fulfilled) {  44 | 		deferredModules.splice(i--, 1);> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  46 | 	}  47 | }  48 | 
```

View compiled

Array.webpackJsonpCallback [as push]

/Users/rickjones/Organisations/surevine/myStarter/webpack/bootstrap:32

```
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);  30 |   31 | 	// run deferred modules when all chunks ready> 32 | 	return checkDeferredModules();     | ^  33 | };  34 | function checkDeferredModules() {  35 | 	var result;
```

View compiled

(anonymous function)

http://localhost:3000/static/js/main.chunk.js:1:79

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
4

Stopped server, removed package-lock.json and node_modules, reran npm install, and npm start. Now I have a blank screen with a message in the inspector telling me to enable JS :man_shrugging:

5

Hi @Rick_Jones,

I’ve just tested the AdminBookings component in a newly create-react-app and the timeline view was working without any problems for me.

Can you please share some details/context around your usage which might help reproduce this problem:

  1. Can you please share which install instructions were you following?
  2. Which version of react are you using? Are you using any framework/js library?

If you could share a working example where I can reproduce and examine this problem, that would help me a lot in tracking down this issue. Thanks!