jQuery UI Widgets Forums Scheduler problem jqxscheduler with reactJS

This topic contains 1 reply, has 1 voice, and was last updated by  vatit 7 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • problem jqxscheduler with reactJS #100499

    vatit
    Participant

    Hi ,

    I added jqxscheduler in may reactApp, but has a probleam. this may code:

    html file:
    <link rel=”stylesheet” href=”./jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”bootstrap.min.css” type=”text/css” />
    <script type=”text/javascript” src=”./jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxdate.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxdata.export.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxtooltip.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/globalization/globalize.culture.de-DE.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxGrid.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.aggregates.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxdropdownbutton.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxcolorpicker.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxtooltip.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxribbon.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxWindow.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/JqxValidator.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/JqxInput.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/JqxTextArea.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxnotification.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/JqxScheduler.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxscheduler.api.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxradiobutton.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxnumberinput.js”></script>

    file js:
    import React, { Component } from ‘react’;
    import ReactDOM from ‘react-dom’;
    import Request from ‘superagent’;
    import JqxScheduler from ‘./jqwidgets-react/react_jqxscheduler’;

    export default class Scheduler extends React.Component {
    componentDidMount()
    {

    }

    componentWillMount()
    {

    }

    constructor()
    {
    super();

    let source =
    {
    dataType: ‘array’,
    dataFields: [
    { name: ‘id’, type: ‘string’ },
    { name: ‘description’, type: ‘string’ },
    { name: ‘location’, type: ‘string’ },
    { name: ‘subject’, type: ‘string’ },
    { name: ‘calendar’, type: ‘string’ },
    { name: ‘start’, type: ‘date’ },
    { name: ‘end’, type: ‘date’ }
    ],
    id: ‘id’,
    localData: []
    };

    this.state = {
    source: source
    }
    }

    render() {
    let resources =
    {
    colorScheme: ‘scheme05’,
    dataField: ‘calendar’,
    source: new window.jqx.dataAdapter(this.state.source)
    };

    let appointmentDataFields =
    {
    from: ‘start’,
    to: ‘end’,
    id: ‘id’,
    description: ‘description’,
    location: ‘location’,
    subject: ‘subject’,
    resourceId: ‘calendar’
    };
    let views =
    [
    ‘dayView’,
    ‘weekView’,
    ‘monthView’
    ];

    let dataAdapter = new window.jqx.dataAdapter(this.state.source);
    return (
    <div>
    <JqxScheduler ref=’myScheduler’
    width={1000} height={600} source={dataAdapter}
    date={new Date()} showLegend={true}
    view={‘weekView’} resources={resources} views={views}
    appointmentDataFields={appointmentDataFields}
    />
    </div>
    );
    }
    }

    and error:

    b.(anonymous function).getVisibleDate
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:24841
    b.(anonymous function).getViewStart
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:23923
    b.(anonymous function)._renderrows
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:192839
    b.(anonymous function)._render
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:65370
    i
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:45516
    a.jqx.scheduler.dataView.resourcesDataView.update
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:49957
    k
    http://localhost:3000/jqwidgets/jqxscheduler.api.js:7:97413
    a.jqx.scheduler.dataView.databind
    http://localhost:3000/jqwidgets/jqxscheduler.api.js:7:97432
    b.(anonymous function).databind
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:50081
    b.(anonymous function).render
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:63167
    b.(anonymous function).createInstance
    http://localhost:3000/jqwidgets/JqxScheduler.js:7:21004
    a.jqx.applyWidget
    http://localhost:3000/jqwidgets/jqxcore.js:14:63088
    HTMLDivElement.<anonymous>
    http://localhost:3000/jqwidgets/jqxcore.js:14:67516
    Function.each
    http://localhost:3000/jqwidgets/jqxcore.js:7:6099
    init.each
    http://localhost:3000/jqwidgets/jqxcore.js:7:2367
    init.a.fn.(anonymous function) [as jqxScheduler]
    http://localhost:3000/jqwidgets/jqxcore.js:14:67439
    JqxScheduler.createComponent
    D:/Project/puma3.0/Source/React App/vatreact/src/jqwidgets-react/react_jqxscheduler.js:49
    46 | if(!this.template) {
    47 | JQXLite(this.componentSelector).html(this.props.template);
    48 | }
    > 49 | JQXLite(this.componentSelector).jqxScheduler(options);
    50 | };
    51 | setOptions(options) {
    52 | JQXLite(this.componentSelector).jqxScheduler(‘setOptions’, options);
    View compiled
    JqxScheduler.componentDidMount
    D:/Project/puma3.0/Source/React App/vatreact/src/jqwidgets-react/react_jqxscheduler.js:16
    13 | export default class JqxScheduler extends React.Component {
    14 | componentDidMount() {
    15 | let options = this.manageAttributes();
    > 16 | this.createComponent(options);
    17 | };
    18 | manageAttributes() {
    19 | let properties = [‘appointmentOpacity’,’appointmentsMinHeight’,’appointmentDataFields’,’appointmentTooltips’,’columnsHeight’,’contextMenu’,’contextMenuOpen’,’contextMenuClose’,’contextMenuItemClick’,’contextMenuCreate’,’changedAppointments’,’disabled’,’date’,’dayNameFormat’,’enableHover’,’editDialog’,’editDialogDateTimeFormatString’,’editDialogDateFormatString’,’editDialogOpen’,’editDialogCreate’,’editDialogKeyDown’,’editDialogClose’,’exportSettings’,’height’,’legendPosition’,’legendHeight’,’localization’,’min’,’max’,’ready’,’renderAppointment’,’rendering’,’rendered’,’rtl’,’resources’,’rowsHeight’,’showToolbar’,’showLegend’,’scrollBarSize’,’source’,’statuses’,’touchRowsHeight’,’theme’,’touchAppointmentsMinHeight’,’touchScrollBarSize’,’timeZone’,’touchDayNameFormat’,’toolBarRangeFormat’,’toolBarRangeFormatAbbr’,’toolbarHeight’,’views’,’view’,’width’];
    View compiled
    commitLifeCycles
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:14248
    14245 | startPhaseTimer(finishedWork, ‘componentDidMount’);
    14246 | instance.props = finishedWork.memoizedProps;
    14247 | instance.state = finishedWork.memoizedState;
    > 14248 | instance.componentDidMount();
    14249 | stopPhaseTimer();
    14250 | } else {
    14251 | var prevProps = current.memoizedProps;
    View compiled
    commitAllLifeCycles
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:15342
    15339 | if (effectTag & (Update | Callback)) {
    15340 | recordEffect();
    15341 | var current = nextEffect.alternate;
    > 15342 | commitLifeCycles(finishedRoot, current, nextEffect, currentTime, committedExpirationTime);
    15343 | }
    15344 |
    15345 | if (effectTag & Ref) {
    View compiled
    HTMLUnknownElement.callCallback
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:100
    97 | // nested call would trigger the fake event handlers of any call higher
    98 | // in the stack.
    99 | fakeNode.removeEventListener(evtType, callCallback, false);
    > 100 | func.apply(context, funcArgs);
    101 | didError = false;
    102 | }
    103 |
    View compiled
    invokeGuardedCallbackDev
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:138
    135 | // Synchronously dispatch our fake event. If the user-provided function
    136 | // errors, it will trigger our global error handler.
    137 | evt.initEvent(evtType, false, false);
    > 138 | fakeNode.dispatchEvent(evt);
    139 |
    140 | if (didError) {
    141 | if (!didSetError) {
    View compiled
    invokeGuardedCallback
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:187
    184 | * @param {…*} args Arguments for function
    185 | */
    186 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
    > 187 | invokeGuardedCallback$1.apply(ReactErrorUtils, arguments);
    188 | },
    189 |
    190 | /**
    View compiled
    commitRoot
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:15481
    15478 | var _didError2 = false;
    15479 | var _error2 = void 0;
    15480 | {
    > 15481 | invokeGuardedCallback$2(null, commitAllLifeCycles, null, root, currentTime, committedExpirationTime);
    15482 | if (hasCaughtError()) {
    15483 | _didError2 = true;
    15484 | _error2 = clearCaughtError();
    View compiled
    completeRoot
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16496
    16493 |
    16494 | // Commit the root.
    16495 | root.finishedWork = null;
    > 16496 | root.remainingExpirationTime = commitRoot(finishedWork);
    16497 | }
    16498 |
    16499 | // When working on async work, the reconciler asks the renderer if it should
    View compiled
    performWorkOnRoot
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16440
    16437 | finishedWork = renderRoot(root, expirationTime, false);
    16438 | if (finishedWork !== null) {
    16439 | // We’ve completed the root. Commit it.
    > 16440 | completeRoot(root, finishedWork, expirationTime);
    16441 | }
    16442 | }
    16443 | } else {
    View compiled
    performWork
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16358
    16355 | }
    16356 | } else {
    16357 | while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
    > 16358 | performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false);
    16359 | findHighestPriorityRoot();
    16360 | }
    16361 | }
    View compiled
    performSyncWork
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16330
    16327 | }
    16328 |
    16329 | function performSyncWork() {
    > 16330 | performWork(Sync, false, null);
    16331 | }
    16332 |
    16333 | function performWork(minExpirationTime, isAsync, dl) {
    View compiled
    requestWork
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16230
    16227 |
    16228 | // TODO: Get rid of Sync and use current time?
    16229 | if (expirationTime === Sync) {
    > 16230 | performSyncWork();
    16231 | } else {
    16232 | scheduleCallbackWithExpiration(expirationTime);
    16233 | }
    View compiled
    scheduleWork$1
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16096
    16093 | !isWorking || isCommitting$1 ||
    16094 | // …unless this is a different root than the one we’re rendering.
    16095 | nextRoot !== root) {
    > 16096 | requestWork(root, nextExpirationTimeToWorkOn);
    16097 | }
    16098 | if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
    16099 | invariant(false, ‘Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.’);
    View compiled
    scheduleRootUpdate
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16663
    16660 | }
    16661 | enqueueUpdate(current, update, expirationTime);
    16662 |
    > 16663 | scheduleWork$1(current, expirationTime);
    16664 | return expirationTime;
    16665 | }
    16666 |
    View compiled
    updateContainerAtExpirationTime
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16690
    16687 | container.pendingContext = context;
    16688 | }
    16689 |
    > 16690 | return scheduleRootUpdate(current, element, expirationTime, callback);
    16691 | }
    16692 |
    16693 | function findHostInstance(component) {
    View compiled
    updateContainer
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16717
    16714 | var current = container.current;
    16715 | var currentTime = recalculateCurrentTime();
    16716 | var expirationTime = computeExpirationForFiber(currentTime, current);
    > 16717 | return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
    16718 | }
    16719 |
    16720 | function getPublicRootInstance(container) {
    View compiled
    ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17000
    16997 | if (callback !== null) {
    16998 | work.then(callback);
    16999 | }
    > 17000 | updateContainer(children, root, null, work._onCommit);
    17001 | return work;
    17002 | };
    17003 | ReactRoot.prototype.unmount = function (callback) {
    View compiled
    (anonymous function)
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17140
    17137 | if (parentComponent != null) {
    17138 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
    17139 | } else {
    > 17140 | root.render(children, callback);
    17141 | }
    17142 | });
    17143 | } else {
    View compiled
    unbatchedUpdates
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:16557
    16554 | isUnbatchingUpdates = false;
    16555 | }
    16556 | }
    > 16557 | return fn(a);
    16558 | }
    16559 |
    16560 | // TODO: Batching should be implemented at the renderer level, not within
    View compiled
    legacyRenderSubtreeIntoContainer
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17136
    17133 | };
    17134 | }
    17135 | // Initial mount should not be batched.
    > 17136 | unbatchedUpdates(function () {
    17137 | if (parentComponent != null) {
    17138 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
    17139 | } else {
    View compiled
    render
    D:/Project/puma3.0/Source/React App/vatreact/node_modules/react-dom/cjs/react-dom.development.js:17195
    17192 | return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
    17193 | },
    17194 | render: function (element, container, callback) {
    > 17195 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
    17196 | },
    17197 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
    17198 | !(parentComponent != null && has(parentComponent)) ? invariant(false, ‘parentComponent must be a valid React Component’) : void 0;
    View compiled
    ./src/index.js
    D:/Project/puma3.0/Source/React App/vatreact/src/index.js:7
    4 | import App from ‘./App’;
    5 | import registerServiceWorker from ‘./registerServiceWorker’;
    6 |
    > 7 | ReactDOM.render(<App/>, document.getElementById(‘root’));
    8 | registerServiceWorker();
    9 |
    10 |
    View compiled
    __webpack_require__
    D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:678
    675 | };
    676 |
    677 | // Execute the module function
    > 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
    679 |
    680 | // Flag the module as loaded
    681 | module.l = true;
    View compiled
    fn
    D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:88
    85 | console.warn(“[HMR] unexpected require(” + request + “) from disposed module ” + moduleId);
    86 | hotCurrentParents = [];
    87 | }
    > 88 | return __webpack_require__(request);
    89 | };
    90 | var ObjectFactory = function ObjectFactory(name) {
    91 | return {
    View compiled
    0
    http://localhost:3000/static/js/bundle.js:48961:18
    __webpack_require__
    D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:678
    675 | };
    676 |
    677 | // Execute the module function
    > 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
    679 |
    680 | // Flag the module as loaded
    681 | module.l = true;
    View compiled
    ./node_modules/ansi-regex/index.js.module.exports
    D:/Project/puma3.0/Source/React App/vatreact/webpack/bootstrap f1a765776e4c12d9fd7e:724
    721 | __webpack_require__.h = function() { return hotCurrentHash; };
    722 |
    723 | // Load entry module and return exports
    > 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
    725 |
    726 |
    727 |
    View compiled
    (anonymous function)
    http://localhost:3000/static/js/bundle.js:728:10

    Pls help me resolve this problem.

    Thank you.

    problem jqxscheduler with reactJS #100500

    vatit
    Participant

    I resolved this problem.

    Thank you.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.