Introduction

new SchedulerPro({
    // other configs
    resources : [
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ],

    events : [
        { id : 1, startDate : '2025-01-01', duration : 3, durationUnit : 'd', name : 'Interview' },
        { id : 2, duration : 4, durationUnit : 'd', name : 'Press Conference' }
    ],

    assignments : [
        { event : 1, resource : 1 },
        { event : 2, resource : 2 }
    ],

    dependencies : [
        { fromEvent : 1, toEvent : 2 }
    ]
});

const App = props => {
    const [resource, setResources] = useState([
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ]);
    const [events, setEvents] = useState([
        { id : 1, startDate : '2025-01-01', duration : 3, durationUnit : 'd', name : 'Interview' },
        { id : 2, duration : 4, durationUnit : 'd', name : 'Press Conference' }
    ]);
    const [assignments, setAssignments] = useState([
        { event : 1, resource : 1 },
        { event : 2, resource : 2 }
    ]);
    const [dependencies, setDependencies] = useState([
        { fromEvent : 1, toEvent : 2 }
    ]);

    return <BryntumSchedulerPro resources={resources} events={events} />
}

<bryntum-schedulerpro :resources="resources" :events="events" :assignments="assignments" :dependencies="dependencies" />

<script setup>
{/* other config */}

const
    resources = reactive([
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
      ]),
    events = reactive([
        { id : 1, startDate : '2025-01-01', duration : 3, durationUnit : 'd', name : 'Interview' },
        { id : 2, duration : 4, durationUnit : 'd', name : 'Press Conference' }
    ]),
    assignments = reactive([
        { event : 1, resource : 1 },
        { event : 2, resource : 2 }
    ]),
    dependencies = reactive([
        { fromEvent : 1, toEvent : 2 }
    ])

</setup>

<bryntum-schedulerpro [resources]="resources" [dependencies]="dependencies" [assignments]="assignments" [events]="events"></bryntum-schedulerpro>

@Component()
export class AppComponent {
    resources = [
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ];
    events = [
        { id : 1, startDate : '2025-01-01', duration : 3, durationUnit : 'd', name : 'Interview' },
        { id : 2, duration : 4, durationUnit : 'd', name : 'Press Conference' }
    ];
    assignments = [
        { event : 1, resource : 1 },
        { event : 2, resource : 2 }
    ];
    dependencies = [
        { fromEvent : 1, toEvent : 2 }
    ]
}

new SchedulerPro({
    project : {
        loadUrl  : '/data.php',
        autoLoad : true // auto load on initialization
    }
})

// SchedulerProConfig.tsx
import { BryntumSchedulerProProps } from "@bryntum/schedulerpro-react";

const schedulerproProps: BryntumSchedulerProProps = {
    // other config
    project : {
        transport : {
            loadUrl : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
        },
        autoLoad : true // auto load on initialization
    }

};

export { schedulerproProps };

import { schedulerproProps } from "./schedulerproProps";
// App.tsx
const App = props => {
    return <BryntumSchedulerPro {...schedulerproProps} />
}

<script setup lang="ts">
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-vue-3';
import { schedulerproConfig } from './AppConfig.ts';
</script>

<template>
  <bryntum-schedulerpro v-bind="schedulerproConfig" />
</template>

import { type BryntumSchedulerProProps } from '@bryntum/schedulerpro-vue-3';

export const schedulerproConfig : BryntumSchedulerProProps = {
    // other config
    project : {
        transport : {
            loadUrl : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
        },
        autoLoad : true // auto load on initialization
    }
};

<bryntum-gantt-project-model
    #project
    [startDate]="projectModelProps.startDate!"
    [endDate]="projectModelProps.endDate!"
    [calendar]="projectModelProps.calendar!"
    [loadUrl]="projectModelProps.loadUrl!"
    [autoLoad]="projectModelProps.autoLoad!"
></bryntum-gantt-project-model>
<bryntum-gantt
    #gantt
    [project]="project"
></bryntum-gantt>

// app.config.ts
import {  BryntumGanttProjectModelProps } from '@bryntum/gantt-angular';

export const projectModelProps : BryntumGanttProjectModelProps = {
    loadUrl            : 'data.json', // can be replaced with an API endpoint (e.g. read.php)
    autoLoad           : true,
    autoSetConstraints : true
};

// app.component.ts
import { projectModelProps } from './app.config';

export class AppComponent implements AfterViewInit {
    public projectModelProps = projectModelProps;
}