Autor Tópico: UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO  (Lida 19121 vezes)

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Online: Dezembro 12, 2013, 12:28:53 am »

Prezados, segue um exemplo bem detalhado de uma alternativa, ao meu ver, ao uso das apps tipo calendário do SC.

Utilizo a mesma biblioteca(fullcalendar), porém utilizando uma app do tipo blank, da seguinte forma:


http://wennys.com.br/sistemas/modelos/fullcalendar/


Observem que dá para personalizar cores, eventos, formato das horas , títulos, limitar horários, desabilitar arrastar e soltar etc...


Postarei em seguida o passo a passo de como fazer e o código completo das aplicações.


Espero que ajude aos colegas.


Wennys Carlos
Wennys Carlos

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #1 Online: Dezembro 12, 2013, 07:37:53 am »
Segue código comentado da app blank:

echo "<script>
   
   var sc_pathToTB = '" . $this->Ini->path_prod . "/third/jquery_plugin/thickbox/'; /*VAR. NECESSARIA PARA O SC ENCONTRAR O PATH DO thickbox*/
   
     </script>";

echo "<link href='" . $this->Ini->path_prod . "/third/jquery_plugin/fullcalendar/fullcalendar.css' rel='stylesheet' />";

echo "<link href='" . $this->Ini->path_prod . "/third/jquery_plugin/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />";

echo "<link href='" . $this->Ini->path_prod . "/third/jquery_plugin/thickbox/thickbox.css' rel='stylesheet' media='screen' />";

echo "<script type='text/javascript' src='" . $this->Ini->path_prod . "/third/jquery/js/jquery.js'></script>";

echo "<script type='text/javascript' src='" . $this->Ini->path_prod . "/third/jquery/js/jquery-ui.js'></script>"; //drag and drop

echo "<script type='text/javascript' src='" . $this->Ini->path_prod . "/third/jquery_plugin/fullcalendar/fullcalendar.min.js'></script>";

echo "<script type='text/javascript' src='" . $this->Ini->path_prod . "/third/jquery_plugin/thickbox/thickbox-compressed.js'></script>";
?>

<style>

   body {
      margin-top: 40px;
      text-align: center;
      font-size: 14px;
      font-family: Helvetica,Arial,Verdana,sans-serif;
      }

   #calendar {
      width: 1000px;
      margin: 0 auto;
      }

</style>
<script>

   $(document).ready(function() {
   
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();
      
      $('#calendar').fullCalendar({
         header: {
            left: 'month,agendaWeek,agendaDay' ,
            center: 'title',
            right: 'prev,next today'
         },
         
         buttonText: {
                 prev: '&lt;' , /*Botão Previous*/
                 next: '&gt;' , /*Botão Next*/
             today: 'Hoje', /*Botão Today*/
            month: 'Mês' , /*Botão Month*/
            week:  'Semana' , /*Botão Month*/
            day: 'Dia' /*Botão Day*/
          },
         
         /*TRADUÇÃO DOS MESES E DIAS*/
         monthNames: ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro" ],
         
         monthNamesShort: ["Jan","Fev","Mar","Abr","Mai","Jun","Jul", "Ago", "Set", "Out", "Nov", "Dez" ],

         dayNames: [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
         
         dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'] ,
         /*************************/
         
         timeFormat: 'H:mm', /*FORMATO DA HORA*/
         
         columnFormat: {
                
                week: 'dddd dd/M', /*Ex: Segunda 09/12*/
                   day: 'dddd'  /*Ex: Segunda*/
         },
         
         titleFormat: {
            //month: '',
            week: "MMM dd[ yyyy]{ '—'[ MMM] dd, yyyy}", /*FORMATO DO TITULO NO MODO AGENDA SEMANAL*/
            day: 'dddd, d/M/yyyy' /*FORMATO DO TÍTULO NO MODO DIA*/
         },
         
         editable: false , /*SE false, não permite arrastar e soltar os eventos*/
         
         /*EXEMPLOS DE ALGUMAS CONFIGURAÇÕES PARA O MODO AGENDA SEMANAL*/
         axisFormat: 'HH:mm' , /*FORMATO DA HORA MOSTRADA DO LADO ESQUERDO*/
         
         minTime: 8 , /*LIMITA O INICIO DO HORARIO A SER MOTRADO A 08:00 (0 a 23)*/
         
         maxTime: 21 , /*LIMITA O FIM DO HORARIO A SER MOTRADO A 20:00  (0 a 23)*/
         
         events: '../json/json.php' , /*AQUI É CHAMADO O ARQUIVO QUE FARÁ O PROCESSAMENTO PHP*/
         
         dayClick: function(date, allDay, jsEvent, view) {

            var diaClicado = $.fullCalendar.formatDate( date , 'yyyy-MM-dd' );
            
            var dia = $.fullCalendar.formatDate( date , 'dd/MM/yyyy' );
            
            tb_show('', '../form_evento/form_evento.php?diaClicado='+diaClicado+'&sc_cal_click_date=&nmgp_outra_jan=true&nmgp_url_saida=modal&TB_iframe=false&modal=false&height=400&width=600', '');
            //TAMBEM PODE SER ASSIM:   
            //window.open('../form_evento/form_evento.php?diaClicado='+diaClicado , '_blank' ,  'width=600,height=500');
         
          },
         
         height: 600, /*ALTURA DO CALENDARIO*/
         
         eventClick: function(calEvent, jsEvent, view) {
            
            var idevento   = calEvent.id;
            
            tb_show('', '../form_evento/form_evento.php?idevento='+idevento+'&sc_cal_click_date=&nmgp_outra_jan=true&nmgp_url_saida=modal&TB_iframe=false&modal=false&height=400&width=600', '');
            //TAMBEM PODE SER ASSIM:
            //window.open('../form_evento/form_evento.php?idevento='+idevento , 'JANELA' ,  'width=600,height=500');
            
         },
         
      });
      
   });

</script>
<div id='calendar'></div>
<?php
Wennys Carlos

paulomarcelo

  • Expert
  • *****
  • Mensagens: 638
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #2 Online: Dezembro 12, 2013, 07:39:33 am »
Wennys, o resultado ficou muito bom mesmo vou testar o código. Muito obrigado e parabéns.

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #3 Online: Dezembro 12, 2013, 07:44:42 am »
Obrigado, Paulo.

A ideia é ajudar.

Tô comentando o código do arquivo que retorna o json para publicar.


Wennys
Wennys Carlos

paulomarcelo

  • Expert
  • *****
  • Mensagens: 638
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #4 Online: Dezembro 12, 2013, 07:45:42 am »
Wennys, o json.php
 é mais ou menos assim em uma blank ou você usa as macros do scriptcase para a consulta:
<?php

 $json = array();

 $requete = "SELECT * FROM eventos ORDER BY id";

 // connection to the database
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', 'root');
 } catch(Exception $e) {
  exit('Unable to connect to database.');
 }
 // Execute the query
 $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

 // sending the encoded result to success page
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));

?>

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #5 Online: Dezembro 12, 2013, 07:48:26 am »
//CÓDIGO DO ARQUIVO QUE GERA O JSON:
//APP DO TIPO BLANK:

sc_lookup(ds , "SELECT idevento , descricao , data , horainicio , horafim , status FROM evento");


for($i = 0 ; $i < count({ds}) ; $i++){

   $idevento = {ds[$i][0]};
      
   $descricao = {ds[$i][1]};
      
   $data = {ds[$i][2]};
      
   $horainicio = {ds[$i][3]};
      
   $horafim = {ds[$i][4]};
      
   $status = {ds[$i][5]};
      
   switch($status){
      
      case 'confirmado': $color = 'green';
      
      break;
   
      case 'aguardando' : $color = 'blue';
   
      break;
      
      case 'cancelado': $color = 'red';
      
      break;
   
   }      
   
   $resultado[] = array(
                  'id'     => $idevento ,
                  'title'  => utf8_encode($descricao) ,
                  'start'  => $data . " " . $horainicio ,
                  'end'    => $data . " " . $horafim,
                  'allDay' => false,
                  'color'  => $color
               );
   
      
}

echo json_encode( $resultado);
Wennys Carlos

paulomarcelo

  • Expert
  • *****
  • Mensagens: 638
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #6 Online: Dezembro 12, 2013, 07:48:55 am »
Beleza vou esperar o seu código do arquivo json. O form_eventos é um form normal né? Ai a variável diaClicado você pega no form_evento como variável global de entrada?

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #7 Online: Dezembro 12, 2013, 07:52:13 am »
Exato, Paulo.

form_evento é uma app do tipo form onde recebe [diaClicado].

Fiz apenas umas personalizações nela pra poder dar o efeito de atualizar o calendário embaixo qdo um evento é criado ou editado.

Wennys
Wennys Carlos

George Carvalho

  • Expert
  • *****
  • Mensagens: 1371
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #8 Online: Dezembro 12, 2013, 08:06:45 am »
Parabéns pela colaboração,

Tem 5 eventos cadastrados no Domingo 1/12 e só 4 são exibidos, como faço para corrigir?
George Carvalho
Porto de Galinhas/PE

George Carvalho

  • Expert
  • *****
  • Mensagens: 1371
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #9 Online: Dezembro 12, 2013, 08:09:30 am »
Desculpa, esta correto, eu que não recarreguei a página.
George Carvalho
Porto de Galinhas/PE

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #10 Online: Dezembro 12, 2013, 08:14:44 am »
Olá, George.

É que, para efeito de demonstração, restringi o horário do calendário no modo SEMANA para os horários entre 08:00 e 20:00.

Por isso não aparecia o 4º evento do dia, que era 21;00.

Agora coloquei de 08:00 as 22:00 e aparece normalmente.

minTime: 8 , /*LIMITA O INICIO DO HORARIO A SER MOTRADO A 08:00 (0 a 23)*/
         
maxTime: 23 , /*LIMITA O FIM DO HORARIO A SER MOTRADO A 20:00  (0 a 23)*/


Wennys
Wennys Carlos

George Carvalho

  • Expert
  • *****
  • Mensagens: 1371
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #11 Online: Dezembro 12, 2013, 08:18:17 am »
Parabéns, perfeito.
George Carvalho
Porto de Galinhas/PE

George Carvalho

  • Expert
  • *****
  • Mensagens: 1371
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #12 Online: Dezembro 12, 2013, 08:21:09 am »
Obrigado, pode apagar o meu teste.
George Carvalho
Porto de Galinhas/PE

George Carvalho

  • Expert
  • *****
  • Mensagens: 1371
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #13 Online: Dezembro 12, 2013, 08:24:39 am »
Wennys,

Estou cancelando o evento TESTE e não acontece nada, verifica aí por favor.
George Carvalho
Porto de Galinhas/PE

Wennys Carlos

  • Avançado
  • ****
  • Mensagens: 254
    • Email
Re:UMA ALTERNATIVA AO USO DAS APPS CALENDÁRIO
« Responder #14 Online: Dezembro 12, 2013, 08:51:43 am »
Corrigido, George.

Havia realmente um pequeno bug.

Wennys
Wennys Carlos