@hexaflexa/timegrid-angular
TypeScript icon, indicating that this package has built-in type declarations

1.6.2 • Public • Published

HexaFlexa Timegrid Angular Wrapper

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

Documentation

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

Package Sidebar

Install

npm i @hexaflexa/timegrid-angular

Weekly Downloads

2

Version

1.6.2

License

SEE LICENSE IN LICENSE

Unpacked Size

93.9 kB

Total Files

17

Last publish

Collaborators

  • codluca