Boa noite gente,
Estou há um tempo buscando uma alternativa de calendário que monte um um schedule timeline. O Fullcalendar tem esse plugin, porém é pago ou pode ser usado em projetos opensources, que acredito não se aplica a um projeto feito no SC. No SC o fullcalendar que vem é apenas o que cria a aplicação calendário convencional.
Estou montando um sistema de hotel e esses sistemas necessitam demais de um calendário em formato Schedule timeline (uma espécie de cronograma).
Depois de tanto pesquisar, finalmente encontrei uma alternativa através de uma biblioteca JQuery vis.js (http://visjs.org/). Ela está bem documentada até.
A minha dificuldade está em manipular as ações realizadas no calendário e executá-las no banco. Por exemplo: Ao mover um determinado evento (no meu caso, reserva/ocupação no hotel), as datas de início e fim mudaram, então, elas precisam ser alteradas no banco de dados (UPDATE).
Eu estou estudando ainda JQuery e pelo que eu entendi, tenho que passar através de um evento Ajax no JQuery o que desejo para ser processado no PHP. Mas eu ainda não consegui fazer isso. Se alguém, puder de uma forma didática e educada contribuir para sanar minha dúvida, eu agradeço imensamente.
Como forma de provocar uma contribuição coletiva e por saber que existem pessoas aqui que também estão necessitando de um calendário schedule (conforme já li em alguns posts), vou compartilhar o que já fiz.
Fiz o código em uma blank:
?>
<!DOCTYPE html>
<html>
<head>
<title>Schedule Timeline com o Vis.js</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
<style type="text/css">
body, html {
font-family: sans-serif;
}
/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: #FFFACD;
}
</style>
</head>
<body>
<h1 align="center">Mapa de Ocupação - Hotel</h1>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
<?php
//Realizando o select para preencher os quartos
sc_set_fetchmode(0);
sc_select(meus_dados, "SELECT id, nome_exibicao FROM tb_apartamentos ap WHERE id_hotel = '1'");
?>
var groups = new vis.DataSet ([
<?php
//Loop para escrever os nomes dos apartamentos dentro do dataset do Vis.js
//UH = Unidade Habitacional (Apto, Quarto, Auditório, etc)
while (!$meus_dados->EOF){
$id_uh = $meus_dados->fields['id'];
$uh = $meus_dados->fields['nome_exibicao'];
?>
{
id: <? echo $id_uh; ?>,
content: <? echo $uh ?>
},
<?php
$meus_dados->MoveNext();
}
$meus_dados->Close();
?>
]);
<?php
//Selecionando estadias
sc_set_fetchmode(0);
sc_select(meus_dados, "SELECT id, empresa, agencia, quarto, dt_checkin, dt_checkout, status
FROM tb_estadia
WHERE id_hotel = '1'");
?>
var items = new vis.DataSet ([
<?php
//Loop para preencher as estadias que estão no banco de dados
//quarto = UH
while(!$meus_dados->EOF) {
$id_estadia = $meus_dados->fields['id'];
$empresa = $meus_dados->fields['empresa'];
$agencia = $meus_dados->fields['agencia'];
$quarto = $meus_dados->fields['quarto'];
$dt_checkin = $meus_dados->fields['dt_checkin'];
$dt_checkout = $meus_dados->fields['dt_checkout'];
$status = $meus_dados->fields['status'];
//Criando um timestamp com a data vinda do banco de dados
$ts_checkin = strtotime($dt_checkin);
$ts_checkout = strtotime($dt_checkout);
?>
{
id: <? echo $id_estadia; ?>,
group: <? echo $quarto; ?>,
content: 'Reserva/Ocupado',
start: new Date(<? echo date('Y', $ts_checkin); ?>, <? echo date('m', $ts_checkin); ?>, <? echo date('d', $ts_checkin); ?>),
end: new Date(<? echo date('Y', $ts_checkout); ?>, <? echo date('m', $ts_checkout); ?>, <? echo date('d', $ts_checkout); ?>)
},
<?php
$meus_dados->MoveNext();
}
$meus_dados->Close();
?>
]);
var options = {
editable: {
add: true, // Pertmite adicionar novo item com um clique duplo
updateTime: true, // Permie mover horizontalmente
updateGroup: true, // Permite mover verticalmente
remove: true, // Permite deletar um item
overrideItems: true // allow these options to override item.editable
},
timeAxis: {scale: 'day', step: 1},
type: 'range',
orientation: 'both',
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>
<?phpA documentação do vis.js timeline está em: http://visjs.org/docs/timeline. Nela existem functions que tratam o que eu preciso, mas como ainda estou começando em JQuery, confesso que estou meio perdido.
O código que eu já tenho na blank está funcionando perfeitamente, ou seja, lista as ocupações cadastradas no banco de dados perfeitamente. Se eu não precisasse executar ações direto no calendário (adicionar uma reserva/ocupação, mover, etc) já estaria ok.
Desde já agradeço a atenção de todos.