Our pure JavaScript Scheduler component


Post by filipirafael »

Hello everyone, everything good?

I have a small problem with the css library. Now I can't move the Gantts and when I click on any one I get a console error. Would you know what that is?

The error started to be generated after I added my array of dependencies, but it does not generate any script or redundancy errors. Here is an example of a part of the Array.

{ id: 1, from: 122, to: 123, type: 2 },
{ id: 2, from: 123, to: 124, type: 2 },
{ id: 3, from: 124, to: 125, type: 2 },

Errors on console:
schedulerpro.umd.js:53 Uncaught TypeError: Cannot read properties of null (reading 'outgoingDeps')
schedulerpro.umd.js:53 Uncaught TypeError: Cannot read properties of null (reading 'meta')

Thank you very much if you can help me.


Post by filipirafael »

And when the errors are printed, the scheduler does not work anymore.


Post by alex.l »

Hi filipirafael,

We need more context. How to reproduce this? Try to apply minimal changes to our example https://bryntum.com/products/scheduler/examples/dependencies/ (you can find the source code in examples/dependencies/ folder of source code you downloaded)
Or attach you full application, we will debug it and confirm a bug or provide a solution for this problem.

All the best,
Alex


Post by filipirafael »

Hi Alex, follow the video with better desmonstration and follow code:

https://www.loom.com/share/3a6b4a4898cf467da472444006efa171

const scheduler = new bryntum.schedulerpro.SchedulerPro({
        useInitialAnimation: 'slide-from-left',
        multiEventSelect: true,
        createEventOnDblClick: false,
        highlightSuccessors: true,
        highlightPredecessors: true,
        features: {
            stripe: true,
            nonWorkingTime: true,
            scheduleContextMenu: false,
            headerContextMenu: false,
            contextMenu: false,
            taskContextMenu: false,
            scheduleMenu: false,
            eventDragCreate: false,
            dependencies: true,
            // dependencyEdit: false,
            // tree: true,
            resourceTimeRanges: true,
            timeRanges: {
                showCurrentTimeLine: false,
                showHeaderElements: true,
                enableResizing: false,
            },
            columnLines: false,
            // cellEdit: false,
            taskEdit: false,
            simpleEventEdit: false,
            eventBuffer: true,
            dependencies: {
                highlightDependenciesOnEventHover: true,
                // allowCreate: false,
                // allowDropOnEventBar: false,
                // creationTooltip: false,
                // creationTooltipTemplate: false,
                // showCreationTooltip: false,
                // terminalCls: false,
                // terminalSides: false,
                markerDef: 'M 2,3 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0',
                radius: 5,
            },
            eventMenu: {
                items: {
                    deleteEvent: false,
                    unassignEvent: false,
                    editEvent: false,
                    copyEvent: false,
                    cutEvent: false,
                    splitEvent: false,
                    renameSegment: false,
                }
            },

        eventTooltip: {
            template: data => `
                <div class="b-sch-event-tooltip scheduler-event-tooltip">
                    <strong>
                        Job details:
                    </strong>
                    <span>
                        <strong>
                            Start Date:
                        </strong>
                        ${new Date(data.startText).toLocaleDateString("en-AU")}
                    </span>
                    <span>
                        <strong>
                            End Date:
                        </strong>
                        ${new Date(data.endText).toLocaleDateString("en-AU")}
                    </span>
                    <span>
                        <strong>
                            Duration:
                        </strong>
                        ${data.eventRecord.originalData.duration} days
                    </span >
                    <span>
                        <strong>
                            Supplier:  
                        </strong>
                        ${data.eventRecord.originalData.supplierTradingName || "Undefined Supplier"}
                    </span>
                    <span>
                        <strong>
                            Progress:
                        </strong>
                        0-100%
                    </span>
                </div >
    `
        }
    },

    project: {
        resourcesData: resourcesData,
        eventsData: eventsData,
        dependenciesData: dependenciesData,
    },

    timeRanges: [
        { id: 1, startDate: project_planner.qry_project_info[0].project_start_date, name: "Project Start Date" },
        { id: 2, startDate: project_planner.qry_project_info[0].project_end_date, name: "Project End Date" },
        { id: 3, startDate: currentDate, name: "Current Date", cls: 'current-date-timeline' },
    ],

    appendTo: 'scheduler',
    autoHeight: true,
    rowHeight: 60,
    startDate: project_planner.qry_project_info[0].project_start_date,
    endDate: project_planner.qry_project_info[0].project_end_date,
    // endDate: "2022-12-10",
    barMargin: 12,
    eventStore: {
        syncDataOnLoad: true,
        data: []
    },

    columns: [
        // {
        //     type: 'tree',
        //     field: 'name',
        //     text: 'Jobs',
        //     showEventCount: false,
        //     width: 270,
        //     editor: false,
        //     align: "left"
        // },
        {
            type: 'template',
            text: 'Jobs',
            width: 270,
            field: 'name',
            align: 'left',
            editor: false,
            template: ({ record }) => {
                return `<div style="display: flex; align-items: center; justify-content: center; background-color:#64B5F6; width: 36px; height: 36px; border-radius: 50%; margin-left: 1rem;"><i style="color:#fff;  font-size: 1.2rem;" class="b-icon b-fa-building"></i></div><div style="margin-left: 1rem"><h4 style="font-size:1rem; font-weight: bold;">${record.name}<h4><h4 style="font-size:1rem">${record.originalData.jobType}<h4></div>`
            }
        },
        // {
        //     type: 'tree',
        //     text: 'Jobs',
        //     width: 285,
        //     field: 'name',
        //     align: 'left',
        //     editor: false,
        //     template: ({ record }) => {
        //         if (!record.originalData.jobType) {
        //             return `<div style="display: flex; align-items: center; justify-content: space-evenly;"><i class="b-icon b-fa-building" style="color:#64B5F6; font-size: 1.2rem; margin-left: 1rem;"></i> <h4 style="font-size: 1rem; font-weight: bold; margin: 0 0 0 1rem;">${record.name}</h4></div>`
        //         } else {
        //             return `<i style="margin-left: 2rem; font-size: 1.2rem;" class="b-icon b-fa-sharp b-fa-solid b-fa-screwdriver-wrench"></i> <div style="margin-left: 1rem"><h4 style="font-size:1rem; font-weight: bold;">${record.name}<h4><h4 style="font-size:1rem">${record.originalData.jobType}<h4></div>`
        //         }
        //     }
        // },
        {
            type: 'number',
            text: 'Days',
            width: 50,
            // field: '',
            align: "center",
            min: 0,
            editor: true,
            // renderer: ({ record }) => record.originalData.durationDays,
            renderer: ({ record }) => {
                // console.log(record.originalData.dependencyId);
                return {
                    class: 'recordDaysColumn',
                    children: [
                        {
                            tag: 'span',
                            class: `${record.originalData.dependencyId} ${record.originalData.projectId}`,
                            html: record.originalData.durationDays
                        }
                    ]
                };
            }
        },
    ],
});

Post by filipirafael »

Do you need more information or code example?


Post by marcio »

Hey filipirafael,

I tried to use your code sample, but there are a few points that I would like to clarify.

  • There is a duplicate dependencies key inside features

    dependencies        : true,

    and

    dependencies    : {
                highlightDependenciesOnEventHover : true,
                // allowCreate: false,
                // allowDropOnEventBar: false,
                // creationTooltip: false,
                // creationTooltipTemplate: false,
                // showCreationTooltip: false,
                // terminalCls: false,
                // terminalSides: false,
                markerDef                         : 'M 2,3 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0',
                radius                            : 5
            }

    which one is the correct one?

  • Also, there are some missing pieces, like resourcesData, eventsData, dependenciesData, project_planner, and currentDate, and the data in your case looks relevant, so, would be nice to have that also filled, even with a sample of data that looks like the data that you're using.

Best regards,
Márcio


Post Reply