Criar um calendário de reservas de eventos com o servidor de dados Jquery [fechado]

Question

Criar um calendário de reservas de eventos com o servidor de dados Jquery [fechado]

é possível criar um calendário de reserva de eventos com o jQuery datepciker ? Ver a figura do calendário abaixo

por exemplo, quando reservei um dia inteiro para um evento em um lugar , a data será vermelha, por apenas dia será amarelo e por apenas noite será verde na célula de data.Quando eu clicar em uma data, ele pegar a data e trazer o formulário de reserva e reservado para Dia/Dia/Noite, etc.Dá-me uma ideia.

1

php javascript jquery datepicker

Author: jonm, 2017-08-07

Source

1 answers

score 2 · Accepted Answer

Se você só quiser mostrar algumas cores em algumas datas particulares do datepicker jQuery...

Pode usar o beforeShowDay e uma função para verificar se a data está numa determinada matriz...
Então, com base em qual array é encontrado, adicione uma classe à data.
E você pode decidir desativar a data (não pode ser selecionada).

$(document).ready(function(){
  var red = ["2017-08-02","2017-08-04","2017-08-06"];
  var yellow = ["2017-08-09"];
  var green = ["2017-08-10","2017-08-11"];

  $("#calendar").datepicker({
    defaultDate: '08/07/2017',      // Just for this demo longevity on SO ;)
    
    beforeShowDay: function(date){
      var dateISO = $.datepicker.formatDate('yy-mm-dd', date);
      //console.log(dateISO);

      if(red.indexOf(dateISO)>-1){
        return [true,"red"]        // Enabled, class
      }
      if(yellow.indexOf(dateISO)>-1){
        return [true,"yellow"]
      }
      if(green.indexOf(dateISO)>-1){
        return [true,"green"]
      }
      return [true]  // If not found, must at least return the enabled boolean.
    }
  });
});

.red a{
  background-color: red !important;
  border-radius: 20px;
}
.yellow a{
  background-color: yellow !important;
  border-radius: 20px;
}
.green a{
  background-color: green !important;
  border-radius: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="calendar"></div>