Example Event Availability Table

The Event Availability Table Add-On is a way to display all the events of specific location in easy to read table. You can also choose to limit the table to show only events in a location for a specific year.

Below is an example of what a table will look like when styled with the provided default CSS styling. Event's will show their event divisions in a separate row, with one exception. Events that have only 2 divisions and one is Male and the other division is Female will have a unique output to show the divisions next to each other in the same row. This display is entirely controlled by CSS on your own website. The below example has been created to show an example of what is possible, along with the CSS used to create the display. We can help you cusotmize your CSS so that your Add-on matches the design of your website.

Event Table Standard Example

Event Name
April 10 - Apr 12
Event Division Toddler Co-Ed $130 Open
Event Division Child Co-Ed $130 Open
Event Division Adult/Teen Co-Ed $170 Open

Event Table Boy/Girl Example

Event Name Session 1
May 31 - Jun 6
Female$1005Nearly Full
Male$1005Nearly Full
Event Name Session 2
June 7 - Jun 13
Female$1105Open
Male$1105Open
Event Name Session 3
June 14 - Jun 20
Female$1105Open
Male$1105Open
Event Name Session 4
July 7 - Jul 13
Female$1075Full
Male$1075Nearly Full
Event Name Session 5
July 14 - Jul 20
Female$1075Full
Male$1075Full

The CSS used to create the examples:

The Add-on generates the dynamic event information, and you must style it with CSS to fit your website. The below CSS is an example, and is the CSS used to create the above display. We recommend using the below CSS as a starting point for customizing your own look.

.ctaddonsCom .tableBody{align-items:top;display:grid;grid-row-gap:1rem;grid-template-columns:1fr;margin:0 auto;}
.ctaddonsCom .tableRow{border:1px solid #f0f0f0;display:grid;grid-column:1fr;grid-template-columns:1fr 1fr 1fr;}
.ctaddonsCom .tableCell{text-align:left;}
.ctaddonsCom .tableCell.tableColumnName{background:#F4F2EB;border:1px solid #f0f0f0;font-size:medium;font-weight:700;grid-column:1 / span all;padding:.75rem;text-align:center;}
.ctaddonsCom .tableCell.tableColumnDate{background:#eaeaea;border-bottom:none;border-right:0;display:inline-grid;font-size:small;font-weight:700;grid-column:1 / span all;padding:.35rem 0;text-align:center;text-transform:uppercase;}
.ctaddonsCom .tableCell.tableColumnDivisions{grid-column:1 / span all;}
.ctaddonsCom .divisionsBoyGirl .tableCell.tableColumnDivisions{display:grid;grid-template-columns:1fr 1fr;}
.ctaddonsCom .divisionsDefault .tableCell.tableColumnDivision{display:grid;grid-column:1 / span all;text-align:left;}
.ctaddonsCom .divisionsBoyGirl .tableCell.tableColumnDivision{display:grid;grid-template-columns:50% 50%;padding:5% 10% 0;text-align:center;}
.ctaddonsCom .divisionsDefault .tableCell.tableColumnDivision{align-items:center;grid-template-columns:minmax(64%,max-content) repeat(3,minmax(12%,1fr));padding:.5rem 1rem;}
.ctaddonsCom .divisionsDefault .tableColumnDivision:nth-child(even){background:#f0f0f0;}
.ctaddonsCom .tableCell.tableColumnEnroll{grid-column:1 / span all;margin-bottom:.4rem;text-align:center;}
.ctaddonsCom .tableCell.tableColumnEnroll a{background:grey;color:#fff;display:inline-block;font-size:small;font-weight:700;letter-spacing:.08em;margin:.4rem auto 0;max-width:150px;padding:.2rem .5rem;text-decoration:none;text-transform:uppercase;width:90%;}
.ctaddonsCom .edat-divisionName{text-align:left;}
.ctaddonsCom .edat-eventDate{white-space:#6c6c6c;}
.ctaddonsCom .edat-availability{color:#6c6c6c;margin:0 auto;text-align:center;width:100%;}
.ctaddonsCom .divisionsBoyGirl .edat-availability{grid-column:1 / span all;}
.ctaddonsCom .divisionsBoyGirl .edat-gender{grid-column:1;text-align:center;}
.ctaddonsCom .divisionsBoyGirl .edat-price{grid-column:2;text-align:center;}
.ctaddonsCom .divisionsDefault .edat-gender{font-size:x-small;text-align:center;text-transform:uppercase;}
.ctaddonsCom .divisionsDefault .edat-price{text-align:center;}
.ctaddonsCom.eda-full,.ctaddonsCom .edat-full{border-top:4px solid #d74e6c;}
.ctaddonsCom.eda-nearlyfull,.ctaddonsCom .edat-nearlyfull{border-top:4px solid #ffe748;}
.ctaddonsCom.eda-open,.ctaddonsCom .edat-open{border-top:4px solid #62b056;}
@media only screen and (max-width:960px) and (min-width:768px) {
.ctaddonsCom .tableBody{font-size:12px;}
.ctaddonsCom .tableCell.tableColumnName{font-size:inherit;}
.ctaddonsCom .tableCell.tableColumnDate{font-size:inherit;text-align:right;}
.ctaddonsCom .tableCell.tableColumnEnroll a{font-size:10px;}
}
@media only screen and (min-width:768px) {
.ctaddonsCom .tableBody{grid-row-gap:0;}
.ctaddonsCom .divisionsDefault{margin-bottom:2rem;}
.ctaddonsCom .divisionsDefaul.tableRow{display:grid;grid-template-columns:2fr 1fr 1fr minmax(100px,auto) 1fr;}
.ctaddonsCom .divisionsDefault .tableCell.tableColumnName{background:#f0f0f0;font-weight:700;grid-column:1 / span 2;}
.ctaddonsCom .divisionsDefault .tableCell.tableColumnDate{align-items:center;background:#f0f0f0;display:inline-grid;grid-column:3 / span 3;padding:0;text-align:center;}
.ctaddonsCom .divisionsDefault .tableColumnDivision{border-right:1px solid #f0f0f0;margin-right:.35rem;}
.ctaddonsCom .divisionsDefault .tableColumnDivision:nth-child(even){background:none;border:1px solid #f0f0f0;}
.ctaddonsCom .divisionsBoyGirl.tableRow{border:1px solid #f0f0f0;display:grid;grid-template-columns:2fr 1fr 1fr minmax(100px,auto);}
.ctaddonsCom .divisionsBoyGirl.tableRow:nth-child(odd){background:#f0f0f0;}
.ctaddonsCom .tableCell.tableColumnName{align-items:center;background:none;border:none;display:flex;font-weight:400;grid-column:1;padding:.35rem 1rem;text-align:left;}
.ctaddonsCom .tableCell.tableColumnDate{align-items:center;background:none;font-weight:400;grid-column:2;}
.ctaddonsCom .divisionsBoyGirl .tableCell.tableColumnDivisions{display:grid;grid-column:3 / span 2;grid-template-columns:1fr 1fr;}
.ctaddonsCom .tableCell.tableColumnEnroll{align-items:center;display:flex;grid-column:5;padding-right:.35rem;}
.ctaddonsCom .tableCell.tableColumnEnroll a{max-width:min-content;}
}