(Squarespace) How to add Event Type dropdown to top of Event Page

[tuanphan]

To add Event Type dropdown to top of Event Page, like this.

#1. First, use this code to Custom CSS

/* Event dropdown */
.event-filter-container {
    margin-bottom: 20px;
    padding: 15px 0;
}
.event-filter-dropdown {
    background: #fff;
    border: 1px solid #000;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    min-width: 200px;
    transition: all 0.3s ease;
}
.event-filter-dropdown option:first-child {
    color: #666;
    font-style: italic;
}
.event-filter-dropdown option {
    padding: 8px;
    color: #333;
}

#2. Next, use this code to Code Injection > Footer (or Event Page Header Injection)

You can also use Event Calendar free widget so you can add dropdown filter to event page easier without using complex code.

<script>
function initEventFilter() {
    const eventList = document.querySelector('.eventlist');
    if (!eventList) return;

    const filterContainer = document.createElement('div');
    filterContainer.className = 'event-filter-container';
    
    const dropdown = document.createElement('select');
    dropdown.id = 'eventTypeFilter';
    dropdown.className = 'event-filter-dropdown';
    

    
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = 'EVENT TYPE';
    defaultOption.disabled = true;
    defaultOption.selected = true;
    defaultOption.hidden = true;
    dropdown.appendChild(defaultOption);
    
    filterContainer.appendChild(dropdown);
    eventList.parentNode.insertBefore(filterContainer, eventList);
    
    const allTags = new Set();
    const eventItems = document.querySelectorAll('.eventlist-event');
    
    eventItems.forEach(event => {
        const tagElements = event.querySelectorAll('.eventlist-cats a');
        const tags = [];
        
        tagElements.forEach(tagEl => {
            const tagText = tagEl.textContent.trim();
            tags.push(tagText);
            allTags.add(tagText);
        });
        
        event.setAttribute('data-tags', tags.join(','));
    });
    
    allTags.forEach(tag => {
        const option = document.createElement('option');
        option.value = tag;
        option.textContent = tag;
        dropdown.appendChild(option);
    });
    
    dropdown.addEventListener('change', function() {
        const selectedTag = this.value;
        
        eventItems.forEach(event => {
            const eventTags = event.getAttribute('data-tags') || '';
            
            if (!selectedTag || eventTags.includes(selectedTag)) {
                event.style.display = '';
            } else {
                event.style.display = 'none';
            }
        });
    });
}

document.addEventListener('DOMContentLoaded', initEventFilter);
</script>

#3. Note: Dropdown will get option from Event Tags.