Jump to content
  • 0
LauraGomes

há alguma forma de fazer um calendário em JavaScript destacando datas vindas do banco de dados?

Question

 oi!
Preciso fazer este calendário JavaScript pegar informações provenientes do banco de dados e destacar a data em que um evento acontecerá. sei que isso pode ser feito com ajuda do PHP, mas não tenho idéia de como fazer isso. Alguém pode me ajudar a fazer?


<div class="calendar-wrapper">
  <button id="btnPrev" type="button"> Anterior </button>
	  <button id="btnNext" type="button"> Próximo </button>
  <div id="divCal"></div>
</div>

<script type="text/javascript">
                     var Cal = function(divId) {

                  //guuardando o div id
                  this.divId = divId;

                  // Dias da semana, começando em Domingo
                  this.DaysOfWeek = [
                    'Dom',
                    'Seg',
                    'Ter',
                    'Qua',
                    'Qui',
                    '---',
                    'Sab'
                  ];

                  // Meses, começando em Janeiro
                  this.Months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ];

                  // Seleciona o mês e ano atual
                  var d = new Date();

                  this.currMonth = d.getMonth();
                  this.currYear = d.getFullYear();
                  this.currDay = d.getDate();

                };
                
                // Vai para o próximo mês
                Cal.prototype.nextMonth = function() {
                  if ( this.currMonth == 11 ) {
                    this.currMonth = 0;
                    this.currYear = this.currYear + 1;
                  }
                  else {
                    this.currMonth = this.currMonth + 1;
                  }
                  this.showcurr();
                };

                // Vai para o mês anterior
                Cal.prototype.previousMonth = function() {
                  if ( this.currMonth == 0 ) {
                    this.currMonth = 11;
                    this.currYear = this.currYear - 1;
                  }
                  else {
                    this.currMonth = this.currMonth - 1;
                  }
                  this.showcurr();
                };

                // Mostra o mês atual
                Cal.prototype.showcurr = function() {
                  this.showMonth(this.currYear, this.currMonth);
                };

                // Mostra o mês (ano, mês)
                Cal.prototype.showMonth = function(y, m) {

                  var d = new Date()
                  // Primeiro dia da semana no mês selecionado
                  , firstDayOfMonth = new Date(y, m, 1).getDay()
                  // Ultimo dia do mês selecionado
                  , lastDateOfMonth =  new Date(y, m+1, 0).getDate()
                  // Ultimo dia do mês anterior
                  , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();


                  var html = '<table>';

                  // Mostra o mês e o ano selecionados
                  html += '<thead><tr>';
                  html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
                  html += '</tr></thead>';


                  // "Header" dos dias da semana
                  html += '<tr class="days">';
                  for(var i=0; i < this.DaysOfWeek.length;i++) {
                    html += '<td>' + this.DaysOfWeek[i] + '</td>';
                  }
                  html += '</tr>';

                  //Mostra os dias
                  var i=1;
                  do {

                    var dow = new Date(y, m, i).getDay();

                    // Se for Domingo, começa nova linha
                    if ( dow == 0 ) {
                      html += '<tr>';
                    }
                    // Se não for domingo o primeiro dia do mês
                    // Vai aparecer os ultimos dias do mês anterior
                    else if ( i == 1 ) {
                      html += '<tr>';
                      var k = lastDayOfLastMonth - firstDayOfMonth+1;
                      for(var j=0; j < firstDayOfMonth; j++) {
                        html += '<td class="not-current">' + k + '</td>';
                        k++;
                      }
                    }

                    // Mostra o dia atual no loop
                    var chk = new Date();
                    var chkY = chk.getFullYear();
                    var chkM = chk.getMonth();
                    if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
                      html += '<td class="today">' + i + '</td>';
                    } else {
                      html += '<td class="normal">' + i + '</td>';
                    }
                    // Se for sábado,  a linha acaba
                    //dow = days of week
                    if ( dow == 6 ) {
                      html += '</tr>';
                    }
                    // Se não for sábado o ultimo dia do mês selecionado
                    // vai aparecer os próximos dias a partir do próximo mês
                    else if ( i == lastDateOfMonth ) {
                      var k=1;
                      for(dow; dow < 6; dow++) {
                        html += '<td class="not-current">' + k + '</td>';
                        k++;
                      }
                    }

                    i++;
                  }while(i <= lastDateOfMonth);

                  // fecha a tabela
                  html += '</table>';

                  // Escreve em html para a div
                  document.getElementById(this.divId).innerHTML = html;
                };

                // Quando a pagina carregar
                window.onload = function() {

                  // começa o calendario
                  var c = new Cal("divCal");			
                  c.showcurr();

                  // Ativa o click dos botões próximo e anterior
                  getId('btnNext').onclick = function() {
                    c.nextMonth();
                  };
                  getId('btnPrev').onclick = function() {
                    c.previousMonth();
                  };
                }

                // Get element by id
                function getId(id) {
                  return document.getElementById(id);
                }                                 
 </script> 

 

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Você consegue fazer isso(destacar datas) usando datas estáticas escritas apenas em javascript?
me mostre como e te mostrarei como trazer essas datas dinamicamente do banco de dados, usando php.

Share this post


Link to post
Share on other sites
  • 0
18 horas atrás, tetsuo disse:

Você consegue fazer isso(destacar datas) usando datas estáticas escritas apenas em javascript?
me mostre como e te mostrarei como trazer essas datas dinamicamente do banco de dados, usando php.

Sou iniciante em programação e não sei como fazer isso  :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ArjunKumar
      Hi, I have been using the HTML and javascript for a while in Map. I just realized that after inserting a value with javascript/jquery the answer is not recognized by Map. I have to google it to learn more thinks about the Javascript map and I have found some good results but didn't get the right query about it. I am stuck between the code. Please check it, Is it right?
       
       
      Self : {self}   <script> $(document).ready(function(){ var whatiwant = "this is what I want"; $("#answer714997X7X98").val(whatiwant); }); </script>
    • By Guilherme Scarpatto
      Estou fazendo um website de perguntas e respostas, na qual o usuário adiciona sua pergunta e outros usuários podem respondê-las, basicamente como esse. Eu consegui fazer até a parte que o usuário cadastra a pergunta no banco, agora eu empaquei na parte de mostrar esssas perguntas na tela inicial do site para que outros usuários possam respondê-las. Queria uma ajuda de como posso fazer isso, qualquer coisa posso postar os cógidos aqui depois.
    • By cleriston.melo
      Olá pessoal,
       
      Estou com a seguinte dúvida:
      Preciso impimir as informações de um array criado a partir de uma consulta ao banco de dados, mas preciso imprimir essas informações "quebrada".
      Ex: Nas informações contidas no array, tem cod_exp, controle, serie, cod_prod e quant_prod.
      Eu preciso imprimir as informações por serie.tipo:
       
      Série: 1
      (cod_prod)                     quant_prod
      Produto 1                          10
      Produto 2                          30
      Produto 3                          20
      Produto 4                          50
      ---------------
      Série: 2
      (cod_prod)                     quant_prod
      Produto 1                          10
      Produto 2                          30
      Produto 3                          20
      Produto 4                          50
      ---------------
      etc...
      ----------------------------------------
      O código é esse:
       
      <?php
                      $query_prod_exp = "select * from estoque_expositor where est_exp_cod_exp=$cod_exp and est_exp_ativo='S' order by est_exp_cod_exp";
                      $result_prod_exp = mysqli_query($con, $query_prod_exp) or die(mysqli_error());
                      $row_prod_exp = mysqli_fetch_array($result_prod_exp);
                      
                      $controle = $row_prod_exp['est_exp_controle'];
                      $serie = $row_prod_exp['est_exp_controle'];
                      $cod_prod = $row_prod_exp['est_exp_cod_prod'];
                      $saldo_atual = $row_prod_exp['est_exp_quant_prod'];
                      
                          // ESCREVE UMA LINHA NA TABELA
                          echo "<tr>";
                      
                          // ESCREVE UMA COLUNA NA TABELA E EXIBE O NOME DO PRODUTO
                          echo "<td>";
                          $query_prod = "select * from produtos where prod_id=$cod_prod";
                          $result_prod = mysqli_query($con, $query_prod) or die(mysqli_error());
                          while ($row_prod = mysqli_fetch_array($result_prod)) {
                              $prod = $row_prod['prod_nome'];
                              echo $prod."</td>";
                          }
                          echo "<td>" . $saldo_atual . "</td>";
                          echo "</tr>";
                  ?>
       
      Obrigado a todos pela ajuda...
    • By Ted2370
      Primeiro, eu sou leigo no assunto e estou tentando aprender sobre funções criando um programa básico!
      O problema é que estou tentando fazer uma condição que:
      Ao apertar o botão: Abrir Caixa, a ideia é que apareça um alert na tela dizendo que o caixa foi aberto. até aí tudo bem.
      Mas queria que, ao pressionar o botão novamente, ele fechasse o caixa.
      Pra isso tentei utilizar a própria string do que, quando estivesse escrito 'Caixa Fechado', ele abriria, e quando estivesse 'Caixa Aberto' ele fecharia
      o problema é que eu não sei por que o meu js não ta reconhecendo o que está escrito na string, só reconhece que é uma string. (quando tento o mesmo código no node exec, ele funciona) :(
      ta aí os Códigos:
      <!DOCTYPE html> <html lang="pt-BR"> <head> <link rel="stylesheet" href="estilos.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Caixa</title> </head> <body> <div class="lateral" > <h1 class="" name="txtest" id="estado">Caixa Aberto</h1> <input type="number" name="txtinit" id="txtinit" class="txtinit"> <input type="button" value="Abrir Caixa" onclick="abrir()" class="open" id="abrir"> </div> <script src="./main.js"></script> </body> </html> const { app, BrowserWindow } = require('electron') function createWindow() { let win = new BrowserWindow({ width: 1360, height: 720, fullscreen: false, frame: true, webPreferences: { nodeIntegration: false } }) win.loadFile('index.html') win.removeMenu('index.html') } function abrir() { var estate = window.document.getElementById('estado') if (estate == 'Caixa Aberto') { estate = 'Caixa Aberto' window.alert("O caixa foi Aberto!") } else { estate = 'Caixa Fechado' window.alert("O caixa foi Fechado!") } } app.on('ready', createWindow) body{ background: rgba(231, 223, 206, 0.37); } .word{ background: red; } .txtinit{ font-variant-numeric: tabular-nums; height: 20px; width: 200; background: rgba(231, 223, 206, 0.37); } .open{ height: 60px; width: 200px; margin-top: 500px; } .lateral{ text-align: center; background: rgba(0, 0, 0, 0.74); margin-top: 20px; height: 670px; width: 250px; }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.