Pick only the time in Fullcalendar

Question

How do I pick only the time in Fullcalendar? I’m using Fullcalendar to register events. The fields are:

Title, Event Color, Date, Time, Description

In the database, it is being registered as follows:

Only when I edit it, it shows up at the wrong time, look:

Look at the code on the schedule, I tried to put id="hour", but it doesn’t seem to exist in Fullcalendar:

HTML

<div class="md-input-wrapper">
      <input type="text" id="hour" name="Hora" data-mask="99:99" class="md-form-control md-static hour" placeholder="Coloque o horário inicial do evento" value="<?php echo date("H:i"); ?>" required>
      <label id="tipoEnvio">Hora:</label>
</div>

Jquery

<script src="fullcalendar/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>
<script src='fullcalendar/locale/pt-br.js'></script>

<script>
  $(document).ready(function() {

   var calendar = $('#calendar').fullCalendar({
     validRange: {
         start: '<?php echo date("Y-m-d"); ?>'
     },
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'month,agendaWeek,agendaDay'
     },
     defaultDate: Date(),
     navLinks: true,
     editable: true,
     eventLimit: true,
     eventClick: function(event) {
       $('#visualizar #id').text(event.id);
       $('#visualizar #id').val(event.id);
       $('#visualizar #title').text(event.title);
       $('#visualizar #title').val(event.title);
       $('#visualizar #start').text(event.start.format('DD/MM/YYYY HH:mm:ss'));
       $('#visualizar #start').val(event.start.format('DD/MM/YYYY HH:mm:ss'));
       $('#visualizar #color').val(event.color);
       $('#visualizar #description').val(event.description);
       $('#visualizar').modal('show');
       calendar.fullCalendar('refetchEvents');
       return false;
     }
....

PHP

$data = array();
....
while($listar = mysqli_fetch_array($sqlVisualizar)) {
       list($dia,$mes,$ano) = explode("/",$listar["DataAgenda"]);
      $dataEvento = $ano."-".$mes."-".$dia;
      $linhas['id'] = $listar["IdAgenda"];
      $linhas['title'] = $listar["Titulo"];
      $linhas['start'] = $listar["DataAgenda"];
      $linhas['color'] = $listar["CorAgendamento"];
      $linhas['description'] = $listar["Conteudo"];
      array_push($data,$linhas);
}
   return json_encode($data,JSON_UNESCAPED_SLASHES);

Is there any variable in Fullcalendar or some way to get only the time?

Answer 1

I managed to solve. I included these two lines:

 $('#visualizar #hour').text(event.start.format('HH:mm:ss'));
 $('#visualizar #hour').val(event.start.format('HH:mm:ss'));

Answer 2

@Fox.11 Friend, how did you separate the date from the time? and display so in this Modal? and also add that content field, can you help me do in my calendar too? thanks in advance.

Answer 3

Hello, The Lélis Designer, forgive the delay, just now I went to see your answer. Below:

HTML

<div class="visualizar">
    <input type="text" id="start" name="Data" class="form-control" readonly style="font-weight: bold">
    <input type="text" id="hour" name="Data" class="form-control" readonly style="font-weight: bold">
</div>

Jquery

   $('#visualizar #start').val(event.start.format('DD/MM/YYYY'));
     $('#visualizar #hour').text(event.start.format('HH:mm'));

$.ajax({
url:"suapagina.php",
type:"POST",
dataType: 'JSON',
data:{start:start,id:id},

success:function(sucesso){

if(sucesso.hasEvent == false){
   $('#confirmar').modal('show');  // Modal bootstrap  
    calendar.fullCalendar('refetchEvents');
 }else{
  $('#erro').modal('show'); // Modal bootstrap
 }
}
});