Listar Eventos FullCalendar
22/10/2019
0
Olá , Não consigo carregar os dados de uma coluna que não é padrão do fullcalendar,
Exemplo existem as colunas padrões (id,title,start,end) inclui mais uma (descricao) e não consigo trazer ela no modal
segue o arquivo js
O ARQUIVO PHP
e por fim a exibição no HTML
Preciso que os dados da coluna descricao apareceça tambem no modal.
Exemplo existem as colunas padrões (id,title,start,end) inclui mais uma (descricao) e não consigo trazer ela no modal
segue o arquivo js
document.addEventListener(''''DOMContentLoaded'''', function () {
var calendarEl = document.getElementById(''''calendar'''');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: ''''pt-br'''',
plugins: [''''interaction'''', ''''dayGrid''''],
//defaultDate: ''''2019-04-12'''',
editable: true,
eventLimit: true,
events: ''''list_eventos.php'''',
extraParams: function () {
return {
cachebuster: new Date().valueOf()
};
},
eventClick: function (info) {
info.jsEvent.preventDefault(); // don''''t let the browser navigate
$(''''#visualizar #id'''').text(info.event.id);
$(''''#visualizar #title'''').text(info.event.title);
$(''''#visualizar #descricao'''').text(info.event.descricao);
$(''''#visualizar #start'''').text(info.event.start.toLocaleString());
$(''''#visualizar #end'''').text(info.event.end);
$(''''#visualizar'''').modal(''''show'''');
},
selectable: true,
select: function (info) {
//alert(''''Início do evento: '''' + info.start.toLocaleString());
$(''''#cadastrar #start'''').val(info.start.toLocaleString());
//$(''''#cadastrar #end'''').val(info.end.toLocaleString());
$(''''#cadastrar'''').modal(''''show'''');
}
});
calendar.render();
});
var calendarEl = document.getElementById(''''calendar'''');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: ''''pt-br'''',
plugins: [''''interaction'''', ''''dayGrid''''],
//defaultDate: ''''2019-04-12'''',
editable: true,
eventLimit: true,
events: ''''list_eventos.php'''',
extraParams: function () {
return {
cachebuster: new Date().valueOf()
};
},
eventClick: function (info) {
info.jsEvent.preventDefault(); // don''''t let the browser navigate
$(''''#visualizar #id'''').text(info.event.id);
$(''''#visualizar #title'''').text(info.event.title);
$(''''#visualizar #descricao'''').text(info.event.descricao);
$(''''#visualizar #start'''').text(info.event.start.toLocaleString());
$(''''#visualizar #end'''').text(info.event.end);
$(''''#visualizar'''').modal(''''show'''');
},
selectable: true,
select: function (info) {
//alert(''''Início do evento: '''' + info.start.toLocaleString());
$(''''#cadastrar #start'''').val(info.start.toLocaleString());
//$(''''#cadastrar #end'''').val(info.end.toLocaleString());
$(''''#cadastrar'''').modal(''''show'''');
}
});
calendar.render();
});
O ARQUIVO PHP
include ''''conexaocalendario.php'''';
$query_events = "SELECT id, title, color, start, end, descricao FROM registros";
$resultado_events = $conn->prepare($query_events);
$resultado_events->execute();
$eventos = [];
while($row_events = $resultado_events->fetch(PDO::FETCH_ASSOC)){
$id = $row_events[''''id''''];
$title = $row_events[''''title''''];
$color = $row_events[''''color''''];
$start = $row_events[''''start''''];
$end = $row_events[''''end''''];
$descricao = $row_events[''''descricao''''];
$eventos[] = [
''''id'''' => $id,
''''title'''' => $title,
''''color'''' => $color,
''''start'''' => $start,
''''end'''' => $end,
''''descricao'''' => $descricao,
];
}
echo json_encode($eventos);e por fim a exibição no HTML
<div class="modal fade" id="visualizar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Detalhes do Evento</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dl class="row">
<dt class="col-sm-3">ID do evento</dt>
<dd class="col-sm-9" id="id"></dd>
<dt class="col-sm-3">Título do evento</dt>
<dd class="col-sm-9" id="title"></dd>
<dt class="col-sm-3">Início do evento</dt>
<dd class="col-sm-9" id="start"></dd>
<dt class="col-sm-3">Fim do evento</dt>
<dd class="col-sm-9" id="end"></dd>
<dt class="col-sm-3">Descricao</dt>
<dd class="col-sm-9" id="descricao"></dd>
</dl>
</div>
</div>
</div>
</div>Preciso que os dados da coluna descricao apareceça tambem no modal.
Edney Araujo
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)
