Our pure JavaScript Scheduler component


Post by geekhenno »

when I installed and followed the documentation of the Bryntum Scheduler there is no style on the components, just rendering the data.

I attached an image of the problem.

https://ibb.co/JpHNTpj


Post by mats »

Can you please include the test case so we can see what you did? Definitely the CSS is not loaded


Post by geekhenno »

import React, {
    Fragment,
    FunctionComponent,
    useEffect,
    useState,
    useRef,
    useCallback
} from 'react';
import {
    BryntumDemoHeader,
    BryntumThemeCombo,
    BryntumScheduler,
    BryntumNumberField,
    BryntumButton
} from '@bryntum/scheduler-react';
import { Toast, EventModel } from '@bryntum/scheduler/scheduler.umd.js';
import axios from 'axios';
import { schedulerConfig } from './AppConfig';
import './App.scss';
const App: FunctionComponent = () => {
    const schedulerRef = useRef<typeof BryntumScheduler | null>(null);
    const [events, setEvents] = useState([]);
    const [resources, setResources] = useState([]);
    const [timeRanges, setTimeRanges] = useState([]);
    const [barMargin, setBarMargin] = useState(5);
    const [selectedEvent, setSelectedEvent] = useState<EventModel | null>(null);
    // load and set data
    useEffect(function () {
        axios
            .get('data/data.json')
            .then(response => {
                const { data } = response;
                setResources(data.resources.rows);
                setEvents(data.events.rows);
                setTimeRanges(data.timeRanges.rows);
            })
            .catch(error => {
                Toast.show(String(error));
                console.warn(error);
            });
    }, []);
    // event selection change handler
    const onEventSelectionChange = useCallback(({ selected }: { selected: EventModel[] }) => {
        setSelectedEvent(selected.length ? selected[0] : null);
    }, []);
    // add event handler
    const addEvent = useCallback(() => {
        const scheduler = schedulerRef.current.instance;
        const startDate = new Date(scheduler.startDate.getTime());
        const endDate = new Date(startDate.getTime());
        const resource = scheduler.resourceStore.first;
        if (!resource) {
            Toast.show('There is no resource available');
            return;
        }
        endDate.setHours(endDate.getHours() + 2);
        scheduler.eventStore.add({
            resourceId: resource.id,
            startDate: startDate,
            endDate: endDate,
            name: 'New task',
            eventType: 'Meeting'
        });
    }, []);
    // remove event handler
    const removeEvent = useCallback(() => {
        selectedEvent?.remove();
        setSelectedEvent(null);
    }, [selectedEvent]);
    return (
        <Fragment>
            <BryntumDemoHeader
                title="React + TypeScript basic demo"
                href="../../../../../#example-frameworks-react-typescript-basic"
                children={<BryntumThemeCombo />}
            />
            <div className="demo-toolbar align-right">
                {(() => {
                    return selectedEvent ? (
                        <div className="selected-event">
                            <label>Selected event: </label>
                            <span>{selectedEvent.name}</span>
                        </div>
                    ) : (
                        ''
                    );
                })()}
                <BryntumNumberField
                    label="Bar margin"
                    min={0}
                    max={15}
                    value={barMargin}
                    onChange={({ value }: { value: number }) => setBarMargin(value)}
                />
                <BryntumButton icon="b-fa-plus" cls="b-green" onClick={addEvent} />
                <BryntumButton
                    icon="b-fa-trash"
                    cls="b-red"
                    onClick={removeEvent}
                    disabled={!selectedEvent}
                />
            </div>
            <BryntumScheduler
                ref={schedulerRef}
                {...schedulerConfig}
                events={events}
                resources={resources}
                timeRanges={timeRanges}
                barMargin={barMargin}
                onEventSelectionChange={onEventSelectionChange}
            />
        </Fragment>
    );
};
export default App;

Post by mats »

I meant, can you zip it all up (excl node_modules) so we can run it locally and see what's up?


Post by Mohammed9909 »

same if I render this the screen is well by white

      <BryntumDemoHeader
                                title="React + TypeScript basic demo"
                                href="../../../../../#example-frameworks-react-typescript-basic"
                                children={<BryntumThemeCombo />}
                            />
Last edited by Mohammed9909 on Thu May 06, 2021 10:33 pm, edited 1 time in total.

Post by geekhenno »


Post by saki »

Scheduler CSS file is missing. See please https://bryntum.com/docs/scheduler/#guides/integration/react.md#include%2Fimport-css

There are 2 options:

  1. If you do not need/want to switch themes then import it in App.scss as:
    @import '~@bryntum/scheduler/scheduler.stockholm.css';
  2. If you do want theme switching then load it in public/index.html the same way as in our examples. You will need to copy themes to public/themes for the switching to work in React. Study please our examples.

Post Reply