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

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],
})

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.