HexaFlexa Timegrid React Wrapper

This is the React wrapper for the HexaFlexa Timegrid web component (@hexaflexa/timegrid).

Installation

• Install the Timegrid React Wrapper component

npm install --save @hexaflexa/timegrid-react

• Import the Timegrid React Wrapper component and define the custom elements (in App.tsx)

import { HfTimegrid, defineCustomElements } from '@hexaflexa/timegrid-react';
defineCustomElements();

Usage

• Declare the timegrid configuration and the start date, according to your needs (in your component, i.e. app.component.ts)

import { HfTimegridConfig } from '@hexaflexa/timegrid';

const startDate: string = '2024-02-15';
const timegridConfig: TimegridConfig = {
    daysConfig: {
        daysCount: 3,
    },
    resources: [
        { id: '1', title: 'Resource 1' },
        { id: '2', title: 'Resource 2' },
    ],
    events: [
        {
            id: '1',
            resources: ['1'],
            title: 'Event 1',
            start: '2024-02-15 09:00',
            end: '2024-02-15 10:00',
        },
        {
            id: '2',
            resources: ['2'],
            title: 'Event 2',
            start: '2024-02-15 10:00',
            end: '2024-02-15 11:00',
        },
    ],
};

function onStartDateChanged(event: any) {
    console.log('onStartDateChanged', event);
}

function onEventNew(event: any) {
    console.log('onEventNew', event);
    const newEvent = event.detail;
    newEvent.id = timegridConfig.events!.length * 100 + '';
    newEvent.title = 'New Event ' + newEvent.id;
    timegridConfig.events!.push(newEvent);
    timegridConfig = { ...timegridConfig };
    timegridRef.current!.config = timegridConfig;
}

let timegridRef: RefObject<HTMLHfTimegridElement> = React.createRef();

• Style the timegrid component (in your component, i.e. App.css)

hf-timegrid {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #ddd;
    border-radius: 10px;
}

• Use the custom hf-timegrid element anywhere in your template:

<HfTimegrid startDate={startDate} config={timegridConfig}
    onStartDateChanged={(event) => onStartDateChanged(event)}
    onEventNew={(event) => onEventNew(event)}
    ref={timegridRef}
/>

Documentation

• Demos and documentation can be found on the HexaFlexa Timegrid page.

• API documentation for the hf-timegrid custom element can be found in the hf-timegrid documentation page.

License (see LICENSE)

Non-Commercial Use Only License

Free for Non-Commercial Use: Non-exclusive, worldwide, royalty-free license to use the Component for non-commercial purposes only.

Commercial Use Restricted: You may not use the Component for any commercial purposes without obtaining a separate commercial license.

© 2024-2026 HexaFlexa. All rights reserved.