HexaFlexa Timegrid Vue Wrapper

This is the Vue 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 Vue Wrapper component

npm install --save @hexaflexa/timegrid-vue

• Import and register the custom element wrapper in your app (in main.ts)

import { TimegridVue } from '@hexaflexa/timegrid-vue';
createApp(App).use(TimegridVue).mount('#app')

• Inform Vue that the elements with a hyphen are custom elements (in vite.config.ts)

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a hyphen as custom elements
          isCustomElement: (tag) => tag.includes('-'),
        },
      },
    }),
  ],
  ...
})

Usage

In your component, i.e. TimegridTest.vue

• Declare the timegrid configuration and the start date, according to your needs

export default {
  data() {
    const startDate: string = '2024-02-15';
    let timegridConfig: HfTimegridConfig = {
      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',
        },
      ],
    };
    return {
      startDate: startDate,
      timegridConfig: timegridConfig,
    };
  },
  methods: {
    onStartDateChanged(event: any) {
      console.log('onStartDateChanged', event);
    },
    onEventNew(event: any) {
      console.log('onEventNew', event);
      const newEvent = event.detail;
      newEvent.id = this.timegridConfig.events!.length * 100 + '';
      newEvent.title = 'New Event ' + newEvent.id;
      this.timegridConfig.events!.push(newEvent);
      this.timegridConfig = { ...this.timegridConfig };
    },
  },
};

• Style the timegrid component

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"
    @startDateChanged="onStartDateChanged($event)"
    @eventNew="onEventNew($event)"
/>

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.