vue3-timetable

Vue 3 Timetable

A versatile, configurable and responsive timetable component for Vue 3. Ideal for showing the agenda for locations on a specific date.

Changes in version 1.1

• Items can contain a cancelled property
• Increased test coverage
• Items starting before or ending after the timetable scope show an indicator
• Increased configurability of the timetable style and its locations and items
• The current time indicator can be hidden
• Fixed the horizontal scrollbar which was hidden, so mouse-only users couldn't scroll horizontally
• The display format of the dates is now configurable
• Selectable dates can be predefined using the dates option
• Timetable data can be loaded asynchronously using onDateChange

Installation

npm i vue3-timetable

Usage example

<script lang="ts">
import { defineComponent } from 'vue';
import { TimeTable, type TimeTableItem, type TimeTableLocation } from 'vue3-timetable';

export default defineComponent({
    name: 'App',
    components: { TimeTable },
    setup() {
      const items: TimeTableItem[] = [
        {
          id: "e3",
          locationId: 2,
          startDate: `2024-07-09T14:00:00`,
          endDate: `2024-07-09T16:00:00`,
          name: "Surprise Event",
        }
      ];

      const locations: TimeTableLocation[] = [
        {
            id: 1,
            name: "Mainstage",
            items: [
              {
                id: "e1",
                startDate: `2024-07-09T08:00:00`,
                endDate: `2024-07-09T11:00:00`,
                name: "Main Event",
                info: "Don't miss it!",
                style: {
                  backgroundColor: "#999",
                  color: "#000",
                },
              },
            ],
          },
          {
            id: 2,
            name: "Playground",
            items: [
              {
                id: "e2",
                startDate: `2024-07-09T12:00:00`,
                endDate: `2024-07-09T17:00:00`,
                name: "Fun Time",
                cancelled: true,
              },
            ],
          }
      ];

      return {
        items,
        locations,
      };
    },
  });
</script>

<template>
  <div class="timetable">
    <TimeTable variant="horizontal" :items="items" :locations="locations" />
  </div>
</template>

API Reference

TimeTable

Options

TimeTableLocation

Options

TimeTableItem

Options

TimeTableStyles

Options

CustomCSSProperties

Options