Ir para conteúdo
  • 0
LauraGomes

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

Pergunta

 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> 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

3 respostas a esta questão

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.

Compartilhar este post


Link para o post
Compartilhar em outros 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  :(

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por violin101
      Caros amigos
       
      Gostaria de tirar uma dúvida com os amigos.
       
      No Codeiginter tem como visualizar um arquivo .PDF dentro do sistema ?
       
      Por exemplo:
             o usuário realizou um download do arquivo --> DadosEmpresa.pdf
       
      Quando clicar em cima do arquivo, tem como visualizar em uma página o arquivo ?   E como faria ?
       
      Grato,
       
      Cesar
    • Por Kelven
      Olá pessoal tudo bem?
       
      Então eu quero colocar um formulário de newsletter em um servidor q não tem suporte para php, o negócio é q depois que a pessoa clica em se cadastrar eu quero que ela seja redirecionada para outro site, então gostaria de saber como posso estar fazendo isso usando apenas javascript, jquery ou ajax com o API do Mailchimp? Porque já procurei muito e não achei, só achei em php.
    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Ivana_Silva
      Olá a todos que estão lendo!
       
      Preciso de uma função PHP que filtre 2 padrões de campos a partir do caractere barra(|), preservando a linha.
       
      Em uma caixa de texto vou colar valores assim:
      0001|qwerty
      0002|091234
      0003|09164867
      0004|ab12312
      ...
      A caixa de texto:
      <form id="form" name="form" method="post" action=""> <textarea name="lista" type="text" id="lista" cols="48" rows="5" size="600" /></textarea> <br /> <br /> <button type="submit">Separar</button> </form> <?php ?> Quando eu clicar no botão Separar, preciso que o código filtre e mostre apenas as linhas que, após barra " | " possuam números inteiros de 6 e 8 dígitos(sem letras, símbolos ou pontos).
       
      Exemplo:
      Dados colados na caixa de texto:
      0001|qwerty
      0002|091234
      0003|09164867
      0004|ab12312
       
      Dados filtrados após clicar no botão Separar:
      0002|091234
      0003|09164867
       
      Filtrou apenas os campos que após a barra "|" possuem 6 e 8 dígitos(Nem mais nem menos), não é pra filtrar campos com letras ou números e letras, se tiver letra após a barra já descarta... É pra Filtrar e mostrar apenas as linhas que possuem 6 e 8 dígitos após a barra.
      Agradecida se alguém puder ajudar!
       
    • Por RSN
      Boa Noite, 
      Gostaria de saber se existe a possibilidade de gravar além do id do option value outra variavel, para enviar via post.
      <div class="form-group"> <label class="col-md-4 control-label" for="txtgrupo">Tipo de Pagamento : </label> <div class="col-md-4"> <select id="" class="selectpicker" data-live-search="true" name="tipo_pagamento" > <?php $query = mysql_query("SELECT * FROM tipo_pagamento ORDER BY id ASC"); while($result = mysql_fetch_array($query)) { echo '<option value="'.$result["id"].'">'.$result["nome_tipo"].'</option>'; } ?> </select> </div> </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.