Ir para conteúdo
Alysson Abech

Como listar eventos com link no Jquery UI datepicker

Recommended Posts

Gostaria de saber como posso listar os eventos setados no datepicker, que quando ao passar o mouse em cima dos mesmos , eles mudassem o hover ou algo assim diretamente no calendário.

 

Código atual:

codepen.io/abech/pen/VrWOLR

 

Imagem de exemplo do código atual

 

Capturar.PNG

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 danipereira
      Faço uma manipulação simples no css: *apenas um exemplo.
      $("p").css({"background-color": "#ff0000", "font-size": "30px"}); Mais quando atualizo a página não está alterado.
      Preciso manter a alteração. Como?
    • Por PeeWee
      Estou tendo problemas com o envio do valor de uma variavel javascript para outra pagina, obs: manjo muito pouco de javascript.
      No primeiro script um datapicker permite o usuario selecionar o dia, o ID do usuário nesse momento ja está armazenado em uma variavel PHP, pois veio de uma seleção anterior. Os dois scripts devem enviar as respectivas informações (dia e ID) para a função.js através do onclick. 
      No onclick está dessa forma:
      var dados = "id_cate="+document.getElementById('client').value;
          dados = dados+"&nome="+document.getElementById('datepicker').value;
      porém o valor do ID do cliente nao está chegando até aqui, exibindo undefined na url. 
      O que estária errado?? 




    • Por evertongouveia
      Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código:
       
      <!DOCTYPE html> <head> <title>Conveniados</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/colors/main.css" id="colors"> <script> $(document).ready(function(e) {          $("form[ajax=true]").submit(function(e) {                  e.preventDefault();                  var form_data = $(this).serialize();         var form_url = $(this).attr("action");         var form_method = $(this).attr("method").toUpperCase();                  $("#loadingimg").show();                  $.ajax({             url: form_url,              type: form_method,                   data: form_data,                  cache: false,             success: function(returnhtml){                                           $("#result").html(returnhtml);                  $("#loadingimg").hide();                                 }                    });                  });      }); </script> </head> <body> <?php     $conveniados = array();     $destaques = array();     $servicos = array();     $locais = array();     $especialidades = array();          $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado'));     foreach($convs as $conv){         $info = array();         $info["nome"] = $conv->nmConveniado;         $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade;         $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade;         $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro;         $info["bairro"] = $conv->listaEndereco[0]->nmBairro;         $info["cidade"] = $conv->listaEndereco[0]->nmCidade;         $info["telefone"] = $conv->dsTelefone1;         $locais[] = $conv->listaEndereco[0]->nmCidade;         $info["estado"] = $conv->listaEndereco[0]->sgEstado;         $servicos_str = '';         $k=0;         foreach($conv->listaServico as $serv_str){             $k++;             $servicos[] = $serv_str->nmServico;             if($k==count($conv->listaServico)){                 $servicos_str .= $serv_str->nmServico;             } else {                 $servicos_str .= $serv_str->nmServico.', ';             }         }         $info["servicos"] = $servicos_str;         $info["imagem"] = $conv->listaImagem[0]->nmArquivo;         $conveniados[] = $info;         if($conv->flDestaqueSite){             $destaques[] = $info;         }     }     $_especialidades = array_unique($especialidades);     $_servicos = array_unique($servicos);     $_locais = array_unique($locais);     asort($_especialidades);     asort($_servicos);     asort($_locais);     ?> <!-- Wrapper --> <div id="wrapper"> <!-- Header Container ================================================== --> <header id="header-container">     <!-- Header -->     <div id="header">         <div class="container">                          <!-- Left Side Content -->             <div class="left-side">                                  <!-- Logo -->                 <div id="logo">                     <a href="index.html"><script type="text/javascript"> //<![CDATA[ window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"}; //]]> </script> <script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script> <img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a>                 </div>                 <!-- Mobile Navigation -->                 <div class="mmenu-trigger">                     <button class="hamburger hamburger--collapse" type="button">                         <span class="hamburger-box">                             <span class="hamburger-inner"></span>                         </span>                     </button>                 </div>                                               </div>             <div class="right-side">                 <div class="header-widget">                     <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a>                 </div>             </div>                      </div>     </div> </header> <div class="clearfix"></div> <div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");">     <div class="main-search-inner">         <div class="container">             <div class="row">                 <div class="col-md-12">                     <h2 class="text-center">Conveniados Anjo da Guarda</h2>                     <h4 class="text-center">Localize o conveniado desejado</h4> <form method="post" ajax="true" action="">                     <div class="main-search-input">                                              <div class="main-search-input-item">                             <input type="text" placeholder="Nome do conveniado" id="searchQuery" value="">                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Cidade" class="chosen-select" style="display: none;">                                 <?php foreach($_locais as $local){ ?>                     <?php if(trim($local)!=''){ ?>                     <option value="<?php echo $local; ?>"><?php echo $local; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Categoria" class="chosen-select" style="display: none;">                                 <option>Categoria</option>                                 </select>                         </div>                                                  <div class="main-search-input-item">                             <select data-placeholder="Especialidade" class="chosen-select" style="display: none;">                                 <?php foreach($_especialidades as $especialidade){ ?>                     <?php if(trim($especialidade)!=''){ ?>                     <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Serviço" class="chosen-select" style="display: none;">                                 <option value>Serviços</option>                 <?php foreach($_servicos as $servico){ ?>                     <?php if(trim(servico)!=''){ ?>                     <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <input type="submit" class="button" value="Buscar" />                                               </div>                     </form>                 </div>             </div>         </div>     </div> </div> <div class="container ">     <div class="row">         <div class="col-md-12 margin-top-40">             <div class="row">                 <!-- Lista -->                 <?php $d=0; ?>             <?php shuffle($destaques); ?>             <?php foreach($destaques as $destaque){ ?>                 <?php                  $d++;                  if($d<=2){                  ?> <div class="col-lg-12 col-md-12">                     <div class="listing-item-container list-layout">                         <a href="#" class="listing-item">                                                          <!-- Imagem -->                             <div class="listing-item-image">                                 <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript>                                 <span class="tag"><?php echo $destaque["categoria"]; ?></span>                             </div>                                                          <!-- Conteúdo -->                             <div class="listing-item-content">                                 <div class="listing-badge anunciante">Anunciante</div>                                 <div class="listing-item-inner">                                     <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3>                                     <span><?php echo $destaque["telefone"]; ?></span></br>                                     <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span>                                 </div>                             </div>                         </a>                     </div>                 </div>                 <?php } ?>             <?php } ?>                 <!-- Lista / Fim -->                 <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center>                 <!-- Lista -->                 <?php $d=0; ?>                                  <?php foreach($conveniados as $conveniado){ ?>                 <?php                  $d++;                  if($d<=5){                  ?>                 <div class="col-lg-12 col-md-12"                 especialidade="<?php echo $conveniado["categoria"]; ?>"                 local="<?php echo $conveniado["cidade"]; ?>"                 nome="<?php echo $conveniado["nome"]; ?>"                 servicos="<?php echo $conveniado["servicos"]; ?>">                     <div class="listing-item-container list-layout">                         <a href="#" class="listing-item">                                                          <!-- Imagem -->                             <div class="listing-item-image">                             <?php if($conveniado["imagem"] != ''){ ?>                                 <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript>                             <?php } else { ?>                                 <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript>                             <?php } ?>                                 <span class="tag"><?php echo $conveniado["categoria"]; ?></span>                             </div>                                                          <!-- Conteúdo -->                             <div class="listing-item-content">                                 <div class="listing-item-inner">                                     <h3><?php echo $conveniado["nome"]; ?></h3>                                     <span><?php echo $conveniado["telefone"]; ?></span></br>                                     <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span>                                 </div>                             </div>                         </a>                     </div>                 </div>                 <?php } ?>                 <?php } ?>                              </div>             <!-- Paginação -->             <div class="clearfix"></div>             <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>             <div class="row">                 <div class="col-md-12">                     <!-- Paginação -->                     <div class="pagination-container margin-top-20 margin-bottom-40">                         <nav class="pagination">                             <ul>                                 <li><a href="#" class="current-page">1</a></li>                                 <li><a href="#">2</a></li>                                 <li><a href="#">3</a></li>                                 <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li>                             </ul>                         </nav>                     </div>                 </div>             </div>             <!-- Paginação / Fim -->         </div>     </div> </div> <!-- Footer ================================================== --> <div id="footer" class="margin-top-15">     <!-- Main -->     <div class="container">                  <!-- Copyright -->         <div class="row">             <div class="col-md-12">                 <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div>             </div>         </div>     </div> </div> <!-- Footer / End --> <!-- Back To Top Button --> <div id="backtotop"><a href="#"></a></div> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <!-- Google Autocomplete --> <script>   function initAutocomplete() {     var input = document.getElementById('autocomplete-input');     var autocomplete = new google.maps.places.Autocomplete(input);     autocomplete.addListener('place_changed', function() {       var place = autocomplete.getPlace();       if (!place.geometry) {         window.alert("No details available for input: '" + place.name + "'");         return;       }     });     if ($('.main-search-input-item')[0]) {         setTimeout(function(){              $(".pac-container").prependTo("#autocomplete-container");         }, 300);     } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script> </body> </html>  
    • Por Cesar Masserati Procopio
      Pessoal, boa Tarde!
      Pode me Ajudar com um probleminha que estou tendo hehehe...
      Fiz essa paginação via AJAX completa está tudo funcionando blz, porém quando tiver muitos registros está desconfigurando. 
      Gostaria de fazer, conforme pode ver nas imagens abaixo, a Imagem Original ficar igual a Imagem Modificada!
      Alguma Dica ou sugestão?


      function filtroProc(){ $('.pagination').html(''); var filtro = $('input[name=filtro]:checked').val(); filtros.setFiltro(filtro); var offset = getPaginacao.getOffsetAtual(); var maximo = getPaginacao.getMaximo(); var links = getPaginacao.getLink(); $.ajax({ url:'nav/conf/con_lis_pro_ajax.php', type:'POST', dataType:'json', data:{offset:offset, maximo:maximo, filtro:filtro}, success:function(json){ filtros.setTotalFiltro(json.totalFil); getPaginacao.setTotal(json.totalItem); var totalFiltros = filtros.getTotalFiltro(); var totalItens = getPaginacao.getTotal(); $('.tabela tbody').empty(); $(".contagem").html(totalFiltros); $(".total").html(totalItens); var verif = 0; if(verif === json){ var html = '<tr>'; html += '<td colspan=5><div class="msg_no">Não existe cadastro de Processos de Emissão!</div></td>'; html += '</tr>'; $('.tabela tbody').append(html); }else{ for(var i in json.lista){ var html = '<tr>'; html += '<td align="center">'+json.lista[i].id+'</td>'; if(json.lista[i].status === 'a'){ html += '<td align="center"><img src="../image/semaforo/verde.png" data-id="'+json.lista[i].id+'" data-name="i" onclick="atualizaStatus(this)"/></td>'; }else{ html += '<td align="center"><img src="../image/semaforo/vermelho.png" data-id="'+json.lista[i].id+'" data-name="a" onclick="atualizaStatus(this)" /></td>'; } html += '<td align="center">'+json.lista[i].identificador+'</td>'; html += '<td>'+json.lista[i].descricao+'</td>'; html += '<td><a class="lista_bt2" href="#" data-id="'+json.lista[i].id+'" onclick="editarPro(this)"></a></td>'; html += '</tr>'; $('.tabela tbody').append(html); } } // ---- PAGINAÇÃO ------ // var maximo = getPaginacao.getMaximo(); var totalPaginas = Math.ceil((totalFiltros / maximo)); htmlPag = '<a href=\"#" data-id="1" onclick="dispara(this);">Primeira Página</a>&nbsp;&nbsp;&nbsp;'; for (var i = 1; i <= totalPaginas; i++){ htmlPag += '<a href="#" data-id="'+i+'" onclick="dispara(this)" class="">'+i+'</a>&nbsp;&nbsp;&nbsp;'; } htmlPag += '<a href=\"#" data-id="'+totalPaginas+'" onclick="dispara(this);">Ultima Página</a>&nbsp;&nbsp;&nbsp;'; $('.pagination').append(htmlPag); $('.pagination').find('.active_pag').removeClass('active_pag'); $('.pagination').find('a[data-id='+getPaginacao.getPagAtual()+']').addClass('active_pag'); } }); }  
    • Por ronaldosdb
      Pessoal, bom dia
       
      Recentemente consegui nesse resultado com a ajuda de colegas desse forum.
       
      https://jsbin.com/mocexidebu/edit?html,js,output
       
      A grande duvida agora é como fazermos com que 4 ou mais combos possam ser comparados para que a opcao escolhida em um não possa ser escolhida nos demais.
       
      E se alguma opcao for alterada que a regra se mantenha (atualize)
       
      Exemplo:
       
      Combo 1 (A,B,C,D)
      Combo 2 (A,B,C,D)
      Combo 3 (A,B,C,D)
      Combo 4 (A,B,C,D)
       
       
      Caso A seja escolhida no combo 1 ela some dos cobos 2, 3 e 4

      Assim por diante, fazendo com que não sejam escolhidas opcoes iguais.
       
      Agradeco qqer ajuda
×

Informação importante

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