Ready. Click and drag to toggle cells. Each cell represents one hour.
This component works best with a mouse. Touch interactions may be limited.
// Simple setup
const grid = document.querySelector('data-grid');
grid.data = Array(31).fill(null).map(() => Array(24).fill(false));
grid.rowLabels = Array.from({length: 31}, (_, i) => 'Day ' + (i + 1));
grid.colLabels = Array.from({length: 24}, (_, i) => i + 'h');
// Listen for changes
grid.addEventListener('dataChange', (e) => {
console.log('Data changed:', e.detail);
});<data-grid
rows="7"
cols="24"
title="Weekly Schedule">
</data-grid>
<script>
const grid = document.querySelector('data-grid');
grid.addEventListener('dataChange', (e) => {
console.log('Data changed:', e.detail);
});
</script>// Get/set grid data
grid.data = booleanArray;
const data = grid.data;
// Get/set row labels
grid.rowLabels = ['Row 1', 'Row 2', ...];
const rowLabels = grid.rowLabels;
// Get/set column labels
grid.colLabels = ['Col 1', 'Col 2', ...];
const colLabels = grid.colLabels;
// Reset to empty grid
grid.reset();
// Update theme
grid.updateTheme();data-grid {
--grid-primary: #3b82f6;
--grid-bg: #ffffff;
--grid-cell-bg: #f8fafc;
--grid-text: #1f2937;
--grid-text-muted: #64748b;
--grid-header-bg: #f1f5f9;
--grid-cell-size: 30px;
--grid-header-width: 80px;
--grid-hover-bg: #f1f5f9;
--grid-selection-bg: rgba(59, 130, 246, 0.25);
--grid-selection-active-bg: rgba(59, 130, 246, 0.7);
}