schedulePET.html

<div class="row text-center">
    <span class="glyphicon glyphicon-calendar" id="schedule-icon"></span>
    <h2>Agendar Serviço</h2>    
</div>
<div class="row top-margin-50">
<div class="col-md-9">
    <div class="btn-group">
        <button class="btn btn-primary service-type-selector" value="Todos">Todos</button>
        <button class="btn btn-primary service-type-selector" value="Banho">Banho</button>
        <button class="btn btn-primary service-type-selector" value="Tosa">Tosa</button>
        <button class="btn btn-primary service-type-selector" value="Banho e Tosa">Banho e Tosa</button>
        <button class="btn btn-primary service-type-selector" value="Consulta">Consulta</button>
        </div>
</div>
<div class="col-md-3">
    <input type="date" id="serviceDate" name="" class="form-control"></input>    
</div>
</div>
<div class="table-container top-margin-50">
    <table class="table" id="schedule-service-table" style="table-layout: fixed;">
        <tbody>
            <tr>
                <th >
                    <p data-field="day1">DAY X</p>
                </th>
                <th>
                    <p data-field="day2">DAY X</p>
                </th> 
                <th>
                    <p data-field="day3">DAY X</p>
                </th>
                <th>
                    <p data-field="day4">DAY X</p>
                </th>
            </tr>
            <tr>
                <td>
                    <div id="day1services"> </div>
                </td>
                <td>
                    <div id="day2services"> </div>
                </td> 
                <td>
                    <div id="day3services"> </div>
                </td>
                <td>
                    <div id="day4services"> </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>