Autor Tópico: Ajuda com calendário Schedule  (Lida 1442 vezes)

gutoribeiro

  • Intermediário
  • ***
  • Mensagens: 202
    • Email
Ajuda com calendário Schedule
« Online: Outubro 11, 2017, 01:15:25 am »
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:

Código: [Selecionar]
?>
<!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>
<?php

A 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.

Paulo (ClickInformatica)

  • Intermediário
  • ***
  • Mensagens: 135
    • Email
Re:Ajuda com calendário Schedule
« Responder #1 Online: Outubro 12, 2017, 06:00:34 pm »
Guto,

Copiei o codigo que voce disponibilizou, coloque as minhas tabelas, mas so mostra o titulo
Mapa de Ocupação - Hotel

e mas nada, preciso fazer alguma coisa??

Agradeço a ajuda.

Paulo

gutoribeiro

  • Intermediário
  • ***
  • Mensagens: 202
    • Email
Re:Ajuda com calendário Schedule
« Responder #2 Online: Outubro 12, 2017, 11:13:34 pm »
Guto,

Copiei o codigo que voce disponibilizou, coloque as minhas tabelas, mas so mostra o titulo
Mapa de Ocupação - Hotel

e mas nada, preciso fazer alguma coisa??

Agradeço a ajuda.

Paulo

Aqui no meu está funcionando. Primeiro tens que verificar as tabelas, pq o que eu postei está com as minhas tabelas. Com certeza, meu banco de dados não está igual ao seu. Quando carregar, pede pra ver o código fonte da página pra ver se ele executou os dois laços direitinho (o primeiro preenche os quartos, o segundo as estadias).