Our pure JavaScript Scheduler component


Post by R4tm4n »

Im using in my project webpack with uglifyjs-webpack-plugin and when i build my project it dosnt work, ow can i resolve tis proble or maybe you can give advice which plugin can compress Bryntum Scheduler without errors?


Post by Maxim Gorkovsky »

Hello.

when i build my project it dosnt work

Could you please be more specific? What doesn't work exactly? Are there any exceptions?


Post by R4tm4n »

When im using uglifyjs-webpack-plugin for my webpack build and try to run te app, i get error like "cant get instance of undefined". I think its comes from scheduler.current.instance, but anyway if i build my app without uglifyjs-webpack-plugin its works, so problem happend when uglifyjs-webpack-plugin try to compress Bryntum Scheduler plugin.


Post by Maxim Gorkovsky »

Normally, there shouldn't be any problems. If you run uglify on some of our demos, do they keep working? Are you extending any of our classes? Do you have weird CSS classes in the DOM? Like b-0xdfac18?


Post by R4tm4n »

Yes, im using Styled Component and i have css classes like "sc-fznKkj", and yes im extending from RecurringTimeSpan and RecurringTimeSpansMixin, and i didnt run uglify on any of your demo because all React demo dont have source code button that is why i cant put your react demo code im my project


Post by Maxim Gorkovsky »

We're only interested in CSS classes with b- prefix. If you have classes like this, some functionality might be broken.

Hard to tell what's going on without a runnable test case, could you please provide one? Like a config which breaks one of our demos if you run uglify plugin on it


Post by R4tm4n »

import React, { useState, useRef, useEffect } from 'react';
import { BryntumScheduler } from '@bryntum/scheduler-react';
import { format } from 'date-fns'
import { DragHelper, PresetManager, Toast, EventModel, LocaleManager, DateHelper, StringHelper, ResourceTimeRangeModel, RecurringTimeSpan, RecurringTimeSpansMixin, ResourceTimeRangeStore } from '@bryntum/scheduler/scheduler.umd.js'
import "@bryntum/scheduler/scheduler.classic-light.css";

const Scheduler = () => {
const roundDate = (date) => {
  const newMin = Math.round(date.getMinutes() / 10) * 10;
  return new Date(date).setMinutes(newMin);
}
  const scheduler = useRef();
  const resources = [
      { id: 'r1', name: 'Mike' },
      { id: 'r2', name: 'Linda' },
      { id: 'r3', name: 'Don' },
      { id: 'r4', name: 'Karen' },
      { id: 'r5', name: 'Doug' },
      { id: 'r6', name: 'Peter' },
      { id: 'r7', name: 'Sam' },
      { id: 'r8', name: 'Melissa' },
      { id: 'r9', name: 'John' },
      { id: 'r10', name: 'Ellen' },
    ];
  const events = [
    {
      "id": 1,
      "resourceId": "r1",
      "startDate": new Date("2018-08-24T10:00:00"),
      "endDate": new Date("2018-08-24T19:00:00"),
      "name": "Meeting 1",
      "eventColor": "blue",
      "resizable": false,
      "agenda": [
        {
          "name": "",
          color: "green",
          "startOffset": 0,
          "endOffset": 4*60*60*1000,
        },
        {
          "name": "",
          color: "blue",
          "startOffset": 4*60*60*1000,
          "endOffset": 5*60*60*1000
        },
        {
          "name": "",
          color: "red",
          "startOffset": 5*60*60*1000,
          "endOffset": 9*60*60*1000
        }
      ]
    },
    {
      "id": "r2",
      "isMain": true,
      "resourceId": 811655651 ,
      "startDate": new Date(new Date("2018-09-24T10:00:00").getTime() + 3600000),
      "endDate": new Date(new Date("2018-09-24T19:00:00").getTime() + 3600000),
      "name": "Meeting",
      "eventColor": "blue",
      "draggable": false,
      "resizable": false,
      "agenda": [
        {
          "name": "",
          color: "yellow",
          "startOffset": 0,
          "endOffset": 4*60*60*1000,
        },
        {
          "name": "",
          color: "blue",
          "startOffset": 4*60*60*1000,
          "endOffset": 5*60*60*1000
        },
        {
          "name": "",
          color: "yellow",
          "startOffset": 5*60*60*1000,
          "endOffset": 9*60*60*1000
        }
      ]
    },
    {
      "id": "r3",
      "resizable": false,
      "resourceId": 811655651,
      "startDate": new Date("2018-09-24T10:00:00"),
      "endDate": new Date("2018-09-24T19:00:00"),
      "name": "Meeting 2",
      "eventColor": "blue",
      "agenda": [
        {
          "name": "",
          color: "yellow",
          "startOffset": 0,
          "endOffset": 4*60*60*1000,
        },
        {
          "name": "",
          color: "blue",
          "startOffset": 4*60*60*1000,
          "endOffset": 5*60*60*1000
        },
        {
          "name": "",
          color: "red",
          "startOffset": 5*60*60*1000,
          "endOffset": 9*60*60*1000
        }
      ]
    },
  ];
  return (
    <div>
      <div>
        <BryntumScheduler
          ref={scheduler}
          resources={resources}
          events={events}
          minHeight='70vh'
          maxHeight='70vh'
          eventBodyTemplate={values => values.map((value, index, arr) => {
            const isCurrent = value.isCurrent;
            return `
                <div class="nested" data-ms="${value.msInPx}" data-start="${value.start}" data-end="${value.end}" data-index="${index}" data-id="${value.id}" style=";left: ${value.left}px;width: ${value.width}px;background-color: ${value.color}; z-index: ${index * -1}">
                    ${StringHelper.encodeHtml(value.name)}
                    ${index === 0 ? `<div class="resizer left main"></div><div style="opacity: ${isCurrent ? 1 : 0}" class="timer left">${format(roundDate(new Date(value.startDate)), "HH:mm")}</div>` : ""}
                    <div class="resizer ${index === arr.length - 1 ? "main" : ""}"></div>
                    ${index === arr.length - 1
              ? `<div style="opacity: ${isCurrent ? 1 : 0}" class="timer">${format(roundDate(new Date(value.endDate)), "HH:mm")}</div>`
              : `<div style="opacity: ${isCurrent ? 1 : 0}" class="timer">${format(roundDate(new Date(new Date(value.startDate).getTime() + value.end)), "HH:mm")}</div>`
            }
                </div>
              `
          }).join('')}
          eventRenderer={function({ eventRecord, renderData }) {
            const msInPx = (new Date(scheduler.current.instance.endDate).getTime() - new Date(scheduler.current.instance.startDate).getTime()) / scheduler.current.instance.getTimeSpanDistance(new Date(scheduler.current.instance.startDate), new Date(scheduler.current.instance.endDate));
            renderData.wrapperCls[`event${eventRecord.id}`] = true;
            if(eventRecord.hasCollision){
              renderData.wrapperCls.collision = true;
            }
            if(eventRecord.data.isMain){
              renderData.wrapperCls.main = true;
              renderData.height = 15;
            }
            let prevWidth = 0;
            return (eventRecord.agenda || [eventRecord]).map((nestedEvent, index, arr) => {
              const width = (nestedEvent.endOffset - nestedEvent.startOffset) / msInPx;
              const obj = {
                left  : prevWidth,
                width,
                id: eventRecord.id,
                name  : nestedEvent.name,
                color: nestedEvent.color,
                isLast: index === arr.length - 1,
                start: nestedEvent.startOffset,
                end: nestedEvent.endOffset,
                isMain: eventRecord.data.isMain,
                startDate: eventRecord.startProxy || eventRecord.startDate,
                endDate: eventRecord.endProxy || eventRecord.endDate,
                isCurrent: eventRecord.isCurrent,
                msInPx,
              }
              prevWidth += width
              return obj;
            });
          }}
          startDate={new Date(2017, 0, 1, 6)}
          endDate={new Date(2017, 0, 1, 20)}
          columns={[{ text: 'Name', field: 'name', width: 130 }]}
        />
      </div>
    </div>
  );
}

export default Scheduler;

Example like tis is okay?


Post by alex.l »

Hi R4tm4n,

We should be able to run a test case and reproduce the issue. So, please, delete node_modules and zip the entire app. The app should be as simple as it possible to replicate the problem. The easiest way is to apply required changes to one of our examples and attach it here.

All the best,
Alex


Post by R4tm4n »

im trying to cut all what i can to do app as simple as possible, but when i cut like 70% of my app, i get "Cannot read property 'getRootNode' of null" error in console, what can it be?


Post by sergey.maltsev »

Hi, R4tm4n!

Please make sure if you extend any of Bryntum widgets in your code you have static $name getter for the class.
This is mandatory for minification or uglification.
https://www.bryntum.com/docs/scheduler/#Core/widget/Widget#property-$name-static

Something like this:

class MyNewClass extends Widget {
    static get $name() {
       return 'MyNewClass';
    }
}

Talking of the error you have it is really hard to say without having of the code.
Please try to debug the code at the line where you get this error.

Or may be you could take one of our simple demos from distribution zip and config it with your webpack setup then attach it here so we can see the problem.


Post Reply