@hexaflexa/timegrid-angular

HexaFlexa Timegrid Angular Wrapper

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

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.

Installation

• Install the Timegrid Angular Wrapper component

npm install --save @hexaflexa/timegrid-angular

• Import the Timegrid Angular Wrapper module (in app.module.ts)

import { TimegridAngularModule } from '@hexaflexa/timegrid-angular';
@NgModule({
  ...
  imports: [
    ...
    TimegridAngularModule
  ],
})
export class AppModule {}

Usage

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
    startDate: string;
    timegridConfig: TimegridConfig;
    
    constructor() {
        this.startDate = '2024-02-15';
        this.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',
                },
            ],
        };
    }
}

• Style the timegrid component (in your component, i.e. app.component.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:

<hf-timegrid [startDate]="startDate" [config]="timegridConfig"></hf-timegrid>

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-2025 HexaFlexa. All rights reserved.