Take only the time in Fullcalendar

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

Title, event Color, Date, Time, description

In the database, it is being registered as follows:

insert the description of the image here

Only when I edit, it appears with the wrong time, see:

insert the description of the image here

See how the code is in the time Part, I tried put id = "hour" , but it looks like it doesn't 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 of picking up only the time?

Author: Fox.11, 2018-06-05

3 answers

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'));
 1
Author: Fox.11, 2018-06-05 15:06:52

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

 0
Author: The Lélis Designer, 2018-06-30 00:26:55

Hello, the Lélis Designer, forgive me the delay, just now that I went to see your answer. Follows 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
 }
}
});
 0
Author: Fox.11, 2018-10-10 14:02:32