The following screenshot shows the topmost portion of the c-raceCalendar component:

When the user clicks on a race, the selected race is highlighted and a component event is fired. This event will later be received by the c-raceResults component (described in the next chapter). This event pattern was covered in an earlier section, Inter-component events.

The following component markup uses an HTML unordered list, <ul>. The list is styled using the SLDS, where each item uses the c-race component (highlighted in the Child component events section) to show each race as its own tile:

<template>
    <lightning-card title="Race Calendar" 
           icon-name="standard:campaign">
        <template if:true={calendar.data}>
            <div class="slds-p-around_medium lgc-bg">
                <template for:each={calendar.data} for:item="race">
                    <ul class="slds-has-dividers_bottom-space" 
                           key={race.Id}>
                        <c-race
                            race-id={race.Id}
                            name={race.Name} 
                            race-date={race.RaceDate}
                            completed={race.Completed} 
                            location={race.Location} 
                            selected={race.Selected}
                            onselect={handleSelect}>
                        </c-race>
                    </ul>
                </template>
            </div>
        </template>
    </lightning-card>
</template>

Other new and notable aspects of this component are listed here:

• It uses another custom Lightning Web Component, c-race, included in this chapter's source code and highlighted in the Child component events section. It is responsible for displaying race details such as the name and date, highlighting a race, and sending a select event when the user clicks on it.
• The onselect attribute on the c-race component wires up an event handler that calls the handleSelect method:

import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { fireEvent } from 'c/pubsub';
import getRaceCalendar from '@salesforce/apex/RaceCalendarComponentController.getRaceCalendar';

export default class RaceCalendar extends LightningElement {

    @wire(CurrentPageReference)
    pageRef;
    @wire(getRaceCalendar)
    calendar;
    currentlySelectedRate;

    handleSelect(event) {
        // Determine selected Race details
        const raceId = event.detail;
        const selectedRace = 
           this.calendar.data.find(race => race.Id === raceId);
        const raceName = selectedRace.Name;
        // Toggle selected Race
        if(this.currentlySelectedRate!=null) {
            this.currentlySelectedRate.selected = false;
        }
        this.currentlySelectedRate = event.currentTarget;
        this.currentlySelectedRate.selected = true;
        // Send raceSelected component event 
        fireEvent(this.pageRef, 'raceSelected', 
           { raceId: raceId, raceName: raceName });
    }
} 

• The Apex controller method (not shown) to load the race calendar splits and correctly orders the races into two lists (based on whether or not the race has been completed already), which are then sent to the component. This reduces the amount of JavaScript needed in the controller and helper files.