@hexaflexa/timegrid-react NPM

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.