⚠️ This project is used to track any Issues with the HexaFlexa Timegrid component. ⚠️
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.
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.
Connectors for Angular, React and Vue are provided.
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 src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
npm install --save swiper
<script type='module' src='node_modules/swiper/timegrid/swiper-element-bundle.min.js'></script>
npm install --save swiper
import { register } from 'swiper/element/bundle';
register();
Install the HexaFlexa Timegrid component in different ways:
<script type='module' src='https://unpkg.com/@hexaflexa/timegrid@1/dist/timegrid/timegrid.esm.js'></script>
npm install --save @hexaflexa/timegrid
<script type='module' src='node_modules/@hexaflexa/timegrid/dist/timegrid/timegrid.esm.js'></script>
hf-timegrid
custom element anywhere in your template, JSX, html etcnpm install --save @hexaflexa/timegrid
import { defineCustomElements } from '@hexaflexa/timegrid/loader';
defineCustomElements(window);
hf-timegrid
custom element anywhere in your template, JSX, html etcThis example assumes that the Angular app uses this web component directly, not the Angular connector.
npm install --save swiper
npm install --save @hexaflexa/timegrid
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);
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',
},
],
};
}
}
hf-timegrid {
display: block;
width: 100%;
height: 100%;
border: 2px solid #ddd;
border-radius: 10px;
}
hf-timegrid
element anywhere in your template:<hf-timegrid [startDate]="startDate" [config]="timegridConfig"></hf-timegrid>
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. You must ensure that the "Powered by HexaFlexa" mention is prominently displayed in the bottom-right corner of the Timegrid. If you wish to hide this mention, you must obtain a paid license for non-commercial use.
Commercial Use Restricted: You may not use the Component for any commercial purposes without obtaining a separate commercial license.
© 2024 HexaFlexa. All rights reserved.