HexaFlexa Timegrid

HexaFlexa Timegrid is a Web Component that can be used in any web application.
Can be used in vanilla JavaScript, Angular, React and Vue.
It is highly configurable and designed for mobile first.
Supports multiple resources, can show only active days and business hours.
The events can be dragged and resized.
Has swiping and zooming capabilities.

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.

Custom connectors

Connectors for Angular, React and Vue are provided.

• Angular connector: @hexaflexa/timegrid-angular
• React connector: @hexaflexa/timegrid-react
• Vue connector: @hexaflexa/timegrid-vue

Install

Install and register Swiper (optional):

Swiper is a dependency used to handle swiping. The component works fine without Swiper, using the toolbar buttons, but will have no swiping ability. Install Swiper in different ways:

Script tag

• Put a script tag similar to this in the head of your index.html

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>

Node Modules

• Install the package

npm install --save swiper

• Put a script tag similar to this in the head of your index.html

<script type='module' src='node_modules/swiper/timegrid/swiper-element-bundle.min.js'></script>

In an app

• Install the package

npm install --save swiper

• Register Swiper in your app (in main.ts)

import { register } from 'swiper/element/bundle';
register();

Install this component:

Install the HexaFlexa Timegrid component in different ways:

Script tag

• Put a script tag similar to this in the head of your index.html

<script type='module' src='https://unpkg.com/@hexaflexa/timegrid@1/dist/timegrid/timegrid.esm.js'></script>

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Install the package

npm install --save @hexaflexa/timegrid

• Put a script tag similar to this in the head of your index.html

<script type='module' src='node_modules/@hexaflexa/timegrid/dist/timegrid/timegrid.esm.js'></script>

• Use the hf-timegrid custom element anywhere in your template, JSX, html etc

In an app

• Install the package

npm install --save @hexaflexa/timegrid

• Add an import to the npm packages

import { defineCustomElements } from '@hexaflexa/timegrid/loader';
defineCustomElements(window);

• Use the hf-timegrid custom element anywhere in your template, JSX, html etc

Example - usage in an Angular app

This example assumes that the Angular app uses this web component directly, not the Angular connector.

• Install Swiper and Timegrid component

npm install --save swiper
npm install --save @hexaflexa/timegrid

• Add CUSTOM_ELEMENTS_SCHEMA to the modules that use the components (in app.module.ts)

import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
    ...,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

• Register swiper and define the custom elements in your app (in main.ts)

import { register } from 'swiper/element/bundle';
register();

import { defineCustomElements } from '@hexaflexa/timegrid/loader';
defineCustomElements(window);

• 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.