Implementei calendário e ajustes no HTML, JS e css.

public/css/app.css

@@ -11192,4 +11192,158 @@ p .button_agendar {
 }
 
 
-/* ******* Calendário teste novo ****** */
\ No newline at end of file
+/* ******* Calendário teste novo ****** */
+
+
+/* @main-bg: rgb(40,
+40,
+59);
+@calendar-border: rgb(220,
+220,
+255);
+@calendar-bg: #fff;
+@calendar-standout: rgb(40,
+40,
+59);
+@calendar-color: #444;
+@calendar-fade-color: #c0c0c0;
+@body-color: #444; */
+
+
+/* 
+html,
+body {
+    font-size: 100%;
+    line-height: 1.5;
+    font-family: "Roboto Condensed", sans-serif;
+    background: @main-bg;
+    background-image: linear-gradient(@main-bg 0%, darken(@main-bg, 12%) 100%);
+    color: @body-color;
+} */
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+.group {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: baseline;
+}
+
+a {
+    text-decoration: none;
+}
+
+
+/* .max(@maxWidth;
+@rules) {
+    @media only screen and (max-width: @maxWidth) {
+        @rules();
+    }
+}
+
+.min(@minWidth;
+@rules) {
+    @media only screen and (min-width: @minWidth) {
+        @rules();
+    }
+} */
+
+.calendar-wrapper {
+    width: 90%;
+    margin: .2em auto;
+    padding: 2em;
+    border: .2em solid rgb(236, 191, 92);
+    border-radius: 5px;
+    background: linear-gradient( 174deg, rgb(226, 226, 226) 4%, rgb(221, 221, 221) 100%);
+}
+
+table {
+    clear: both;
+    width: 100%;
+    border: 1px solid;
+    border-radius: 3px;
+    border-collapse: collapse;
+    color: black;
+}
+
+td {
+    height: 48px;
+    text-align: center;
+    vertical-align: middle;
+    border-right: 1px solid border-top: 1px solid;
+    width: 100% / 7;
+}
+
+td.not-current {
+    color: rgb(145, 141, 141);
+    ;
+}
+
+td.normal {}
+
+td.today {
+    font-weight: 700;
+    color: red;
+    font-size: 1.5em;
+}
+
+thead td {
+    border: none;
+    color: black;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 1.5em;
+}
+
+#btnPrev {
+    float: left;
+    margin-bottom: 20px;
+    &:before {
+        content: '\f104';
+        font-family: FontAwesome;
+        padding-right: 4px;
+    }
+}
+
+#btnNext {
+    float: right;
+    margin-bottom: 20px;
+    &:after {
+        content: '\f105';
+        font-family: FontAwesome;
+        padding-left: 4px;
+    }
+}
+
+#btnPrev,
+#btnNext {
+    background: transparent;
+    border: none;
+    outline: none;
+    font-size: 1em;
+    color: rgb(58, 49, 49);
+    cursor: pointer;
+    font-family: "Roboto Condensed", sans-serif;
+    text-transform: uppercase;
+    transition: all 0.3s ease;
+}
+
+#btnPrev:hover {
+    color: rgb(96, 238, 96);
+}
+
+#btnNext:hover {
+    color: rgb(96, 238, 96);
+}
\ No newline at end of file

resources/views/admin/agendamentos/agendamentoTituloSede.blade.php

@@ -15,15 +15,178 @@
     <fieldset class="fieldAgendar">
         <p id="agendar">Agendar data</p>
     </fieldset>
-
     <fieldset class="calendario">
-    
-        <input type="date" id="data" name="dataAgendamento">
-         
-        <br>
+    <div class="calendar-wrapper">
+            <button id="btnPrev" type="button"><< Voltar</button>
+            <button id="btnNext" type="button">Proximo >></button>
+        <div id="divCal"></div>
+    </div>
+    </fieldset>
+    <fieldset class="calendario">
         <button class="enviarbtn" onclick="window.location = '{{ route('agendamentoTituloHora') }}'">@lang('agendamento.next')</button>
     </fieldset>
-   
+
+    <script>
+            var Cal = function(divId) {
+
+        //Store div id
+        this.divId = divId;
+
+        // Dias da semana, começando no domingo
+        this.DaysOfWeek = [
+        'Dom',
+        'Seg',
+        'Ter',
+        'Qua',
+        'Qui',
+        'Sex',
+        'Sab'
+        ];
+
+        // Meses, informando em janeiro
+        this.Months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ];
+
+        // Define o mês atual, ano
+        var d = new Date();
+
+        this.currMonth = d.getMonth();
+        this.currYear = d.getFullYear();
+        this.currDay = d.getDate();
+
+        };
+
+        // Vai para o próximo mês
+        Cal.prototype.nextMonth = function() {
+        if ( this.currMonth == 11 ) {
+        this.currMonth = 0;
+        this.currYear = this.currYear + 1;
+        }
+        else {
+        this.currMonth = this.currMonth + 1;
+        }
+        this.showcurr();
+        };
+
+        // Vai para o mês anterior
+        Cal.prototype.previousMonth = function() {
+        if ( this.currMonth == 0 ) {
+        this.currMonth = 11;
+        this.currYear = this.currYear - 1;
+        }
+        else {
+        this.currMonth = this.currMonth - 1;
+        }
+        this.showcurr();
+        };
+
+        // Mostrar o mês atual
+        Cal.prototype.showcurr = function() {
+        this.showMonth(this.currYear, this.currMonth);
+        };
+
+        // Mostrar mês (ano, mês)
+        Cal.prototype.showMonth = function(y, m) {
+
+        var d = new Date()
+        // Primeiro dia da semana no mês selecionado
+        , firstDayOfMonth = new Date(y, m, 1).getDay()
+        // Último dia do mês selecionado
+        , lastDateOfMonth =  new Date(y, m+1, 0).getDate()
+        // Último dia do mês anterior
+        , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();
+
+
+        var html = '<table>';
+
+        // Escreve o mês e ano selecionados
+        html += '<thead><tr>';
+        html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
+        html += '</tr></thead>';
+
+
+        // Escreve o cabeçalho dos dias da semana
+        html += '<tr class="days">';
+        for(var i=0; i < this.DaysOfWeek.length;i++) {
+        html += '<td>' + this.DaysOfWeek[i] + '</td>';
+        }
+        html += '</tr>';
+
+        // Escreve os dias
+        var i=1;
+        do {
+
+        var dow = new Date(y, m, i).getDay();
+
+        // Se for domingo, comece uma nova linha
+        if ( dow == 0 ) {
+            html += '<tr>';
+        }
+        // Se não for domingo, mas primeiro dia do mês
+        // vai escrever os últimos dias do mês anterior
+        else if ( i == 1 ) {
+            html += '<tr>';
+            var k = lastDayOfLastMonth - firstDayOfMonth+1;
+            for(var j=0; j < firstDayOfMonth; j++) {
+            html += '<td class="not-current">' + k + '</td>';
+            k++;
+            }
+        }
+
+        // Escreve o dia atual no loop
+        var chk = new Date();
+        var chkY = chk.getFullYear();
+        var chkM = chk.getMonth();
+        if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
+            html += '<td class="today">' + i + '</td>';
+        } else {
+            html += '<td class="normal">' + i + '</td>';
+        }
+        // Se for sábado, fecha a linha
+        if ( dow == 6 ) {
+            html += '</tr>';
+        }
+        // Se não for sábado, mas último dia do mês selecionado
+        // vai escrever nos próximos dias a partir do próximo mês
+        else if ( i == lastDateOfMonth ) {
+            var k=1;
+            for(dow; dow < 6; dow++) {
+            html += '<td class="not-current">' + k + '</td>';
+            k++;
+            }
+        }
+
+        i++;
+        }while(i <= lastDateOfMonth);
+
+        // Fecha table
+        html += '</table>';
+
+        // Escreva HTML para o div
+        document.getElementById(this.divId).innerHTML = html;
+        };
+
+        // No carregamento da window
+        window.onload = function() {
+
+        // Inicia calendar
+        var c = new Cal("divCal");			
+        c.showcurr();
+
+        // Vincular os cliques do botão seguinte e anterior
+        getId('btnNext').onclick = function() {
+        c.nextMonth();
+        };
+        getId('btnPrev').onclick = function() {
+        c.previousMonth();
+        };
+        }
+
+        // Obter elemento por id
+        function getId(id) {
+        return document.getElementById(id);
+        }
+    </script>
+
     @endform
 
     @endpage
@@ -34,3 +197,12 @@
 
 
 
+<!-- <fieldset class="fieldAgendar">
+        <p id="agendar">Agendar data</p>
+    </fieldset>
+
+    <fieldset class="calendario">
+        <input type="date" id="data" name="dataAgendamento">
+        <br>
+        <button class="enviarbtn" onclick="window.location = '{{ route('agendamentoTituloHora') }}'">@lang('agendamento.next')</button>
+    </fieldset> -->
\ No newline at end of file