Custom Theme Configuration

Customize the visual appearance of your seatmap with this theming demonstration for the SeatmapBookingRenderer.

The example showcases how to configure custom background color, grid step, price colors, and seat styles for different states. The interface provides three control buttons: standard zoom controls (+ and -) for navigation, and a highlight button (h) that triggers sector highlighting, demonstrating how theme settings affect interactive elements.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '78c6e0d2-347e-424d-9d7a-ac092655bf56';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  theme: {
12    bgColor: '#ccc',
13    gridStep: 10,
14    priceColors: [['#067BC2']],
15
16    seatStyles: {
17      default: {
18        size: 30,
19        color: '#2198C0',
20      },
21      unavailable: {
22        size: 30,
23        color: '#999',
24      },
25      hovered: {
26        size: 30,
27        color: '#f00',
28      },
29      selected: {
30        size: 30,
31        color: '#0f0',
32      },
33    },
34  },
35
36  disableZoomToEmptySpace: true,
37};
38
39const el = document.getElementById('root');
40
41if (el) {
42  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
43
44  renderer.loadEvent(eventId).then(() => {
45    window.highlightSector = () => {
46      renderer.highlightSector(338146);
47    };
48  });
49}

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5  <div class="ZoomButton" onclick="highlightSector()">h</div>
6</div>