Ir para conteúdo
ggbelgamo

[Resolvido] fullCalendar não exibe eventos retornados em Json

Recommended Posts

Pessoal estou tentando exibir os eventos no meu calendário, porém não estou tendo sucesso. Sou iniciante em Jquery e após pesquisar em vários sites e consultar vários exemplos não consegui exibir os eventos. O calendário é exibido, os eventos não!

 

Minha controller (ASP MVC):

 var listCalender = new List<object>();

            var dal = new DAL.PosVendasParticipantesDAL();
            var calender = dal.Todos();


            if (calender.Rows.Count > 0)
            {
                
                foreach (DataRow dr in calender.Rows)
                {
                    var entity = new Modelos.PosVendasParticipantesModelo();
                    entity.ID = Convert.ToInt32(dr["ID"]);
                    entity.ProximaLigacao = Convert.ToDateTime(dr["PROXIMA_LIGACAO"]);
                    listCalender.Add(new
                    {
                        title = entity.ID,
                        start = entity.ProximaLigacao,
                    });
                }

            }

            return Json(listCalender, JsonRequestBehavior.AllowGet);

 

Após o retorno Json, obtenho os seguintes dados:

[{"title":1,"start":"\/Date(1469725020000)\/"},{"title":2,"start":"\/Date(1469725020000)\/"},{"title":3,"start":"\/Date(1470674040000)\/"}

É exatamente os parâmetros que o fullCalendar exige pra exibir eventos, acho que estou sabendo interpretar o Json retornado!

 

Jquery:

<script>
     $(document).ready(function() {

        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
          },
          defaultDate: '2018-03-12',
          navLinks: true, // can click day/week names to navigate views
          editable: true,
          eventLimit: true, // allow "more" link when too many events
            events: $(function (start, end, timezone, callback) {
                $.ajax({
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/Home/GetEvents",
                    success: function (dados) {
                        alert('foi');
                        $(dados).each(function (i) {
                            //document.writeln("<p>ID: " + dados[i].id + " | Data: " + dados[i].Start + "</p>")
                            events.push({
                                title: $(this).attr('title'),
                                start: $(this).attr('start')
                            });
                        });
                    }
                });
            })
        });

      });

    </script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

dá uma olhada na documentação

 

https://fullcalendar.io/docs/events-function

 

você tem que invocar o callback passando o array de eventos.

Compartilhar este post


Link para o post
Compartilhar em outros sites
 return Json(listCalender.ToArray(), JsonRequestBehavior.AllowGet);

Dessa forma eu converto o listCalender para array, correto? Eu já havia lido praticamente toda a documentação, porém nos docs da FullCalendar não há nenhum exemplo de como fazer em C#, poderia me ajudar nessa parte de invocar a call back? Meu código c# está correto?

Compartilhar este post


Link para o post
Compartilhar em outros sites

cara, não manjo de C#, mas para saber se está correto, faça o POST para a sua url e veja se retorna um JSON.

 

POST /Home/GetEvents

 

No JavaScript, faltou você fazer isso aqui:


 

success: function (dados) {
  var events = []; //não tinha declarado o Array.

    $(dados).each(function (i) {
        events.push({
            title: $(this).attr('title'),
            start: $(this).attr('start')
        });
    });
   callback(events); //não estava invocando o callback
}

 Acompanhe pelo console do browser Ctrl + Shift + J  se aparece algum erro de Javascript ou da chamada ajax pro C#.

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 vazzoler
      Boa noite! Estou com a seguinte dúvida na utilização de FullCalendar: ele permite clicar e arrastar os eventos dentro do calendário. Gostaria de saber como eu faço para gravar essa alteração no banco de dados quando o evento for arrastado para outro dia? Já tenho um script que salva as alterações (porém é quando clica no evento e abre a popup).
    • Por vazzoler
      Boa tarde a todos! Estou criando um gerenciador de tarefas no FullCalendar e me surgiram algumas dúvidas: a primeira é que, quando cadastro o start com a data exemplo de 22/11/2018 00:00:00 e o end com data e hora 23/11/2018 09:00:00, ele marca no calendário o evento para os 2 dias, 22 e 23/11. Porém, se cadastro com o start com a data exemplo de 22/11/2018 00:00:00 e o end com data e hora 23/11/2018 08:00:00, ele marca no calendário apenas para o dia 22/11. Alguém sabe me dizer o porque ocorre isso?
    • Por Pedro S.
      Conheço pouco de PHP e, de ultima hora, estou tendo que fazer um sistema de agendamento para barbearias como projeto. O sistema teria um calendário com os dias, meses e ano, onde o usuário poderia clicar no dia que desejasse, se disponível, e escolher o horário que desejasse, também se disponível. Todo o resto do site já foi feito, essa é única parte que não tenho noção de como fazer. 
    • Por Eduardo M
      Olá galera, tudo bem? 
      Estou precisando de uma ajuda de vocês acontece, que eu estou criando um calendário, porem esse calendário não passa o ano quando eu aperto as setas pro lado!
      Vou disponibilizar os códigos para  alguém me ajudar pois estou precisando muito deste calendário!
       
      calendario.php
      <?php function num($num){ return ($num < 10) ? '0'.$num : $num; } function montaEventos($info){ global $pdo; //tabela, data, titulo $tabela = $info['tabela']; $data = $info['data']; $titulo = $info['titulo']; $link = $info['link']; $vagas = $info['vagas']; $eventos = $pdo->prepare("SELECT * FROM `".$tabela."` WHERE `".$data."` "); $eventos->execute(); $retorno = array(); while($row = $eventos->fetchObject()){ $dataArr = date('Y-m-d', strtotime($row->{$data})); $retorno[$dataArr] = array( 'titulo' => $row->{$titulo}, 'link' => $row->{$link}, 'vagas' => $row->{$vagas} ); } return $retorno; } function diasMeses(){ $retorno = array(); for($i = 1; $i<=12;$i++){ $retorno[$i] = cal_days_in_month(CAL_GREGORIAN, $i, date('Y')); } return $retorno; } function montaCalendario($eventos = array()){ $daysWeek = array( 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ); $diasSemana = array( 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', '---', 'Sab' ); $arrayMes = array( 1 => 'Janeiro', 2 => 'Fevereiro', 3 => 'Março', 4 => 'Abril', 5 => 'Maio', 6 => 'Junho', 7 => 'Julho', 8 => 'Agosto', 9 => 'Setembro', 10 => 'Outubro', 11 => 'Novembro', 12 => 'Dezembro' ); If($_GET['mes'] and $_GET['ano']) { $mes = $_GET['mes']; $ano = $_GET['ano']; } Else { $mes = date("m"); $ano = date("Y"); } $t_mes = date("t", mktime(0, 0, 0, $mes, 1, $ano)); $mes_ant = date("m", mktime(0, 0, 0, $mes, 0, $ano)); $ano_ant = date("Y", mktime(0, 0, 0, $mes, 0, $ano)); $mes_post = date("m", mktime(0, 0, 0, $mes, $t_mes+1, $ano)); $ano_post = date("Y", mktime(0, 0, 0, $mes, $t_mes+1, $ano)); $diasMeses = diasMeses(); $arrayRetorno = array(); for($i =1; $i <= 12; $i++){ $arrayRetorno[$i] = array(); for($n=1; $n<= $diasMeses[$i]; $n++){ $dayMonth = gregoriantojd($i, $n, date('Y')); $weekMonth = substr(jddayofweek($dayMonth, 1),0,3); if($weekMonth == 'Mun') $weekMonth = 'Mon'; $arrayRetorno[$i][$n] = $weekMonth; } } echo '<a href="#" id="volta">&laquo;</a><a href="#" id="vai">&raquo;</a>'; echo '<table border="0" width="100%">'; foreach($arrayMes as $num => $mes){ echo '<tbody id="mes_'.$num.'" class="mes">'; echo '<tr class="mes_title"><td colspan="7">'.$mes.' - '.date('Y').'</td></tr>'; echo '<tr class="dias_title">'; foreach($diasSemana as $i => $day){ echo '<td>'.$day.'</td>'; } echo '</tr><tr>'; $y = 0; foreach($arrayRetorno[$num] as $numero => $dia){ $y++; if($numero == 1){ $qtd = array_search($dia, $daysWeek); for($i=1; $i<=$qtd; $i++){ echo '<td></td>'; $y+=1; } } if(count($eventos) > 0){ $month = num($num); $dayNow = num($numero); $date = date('Y').'-'.$month.'-'.$dayNow; if(in_array($date, array_keys($eventos))){ $evento = $eventos[$date]; if($evento['vagas'] <> 0){ echo '<td class="evento2"><a class="dcontexto" href="'.$evento['link'].'" target="_parent">'.$numero.'<span>Vagas '.$evento['vagas'].'</span></a></td>'; }else{ echo '<td class="evento1"><a class="dcontexto" target="_parent">'.$numero.'<span> Não há mais Vagas</span></a></td>';} }else{ echo '<td class="dia_'.$numero.'" ><a href="../../agenda.php?data='.$numero.'-'.$mes.'" class="numeros" target="_parent">'.$numero.'</a></td>'; } }else{ echo '<td class="dia_'.$numero.'">'.$numero.'</td>'; } if($y == 7){ $y=0; echo '</tr><tr>'; } } echo '</tr></tbody>'; } echo '</table>'; } ?> e na minha duvida e no JS
       
      js/functions.js
      $(function(){ var data = new Date(); var mesAtual = data.getMonth()+1; var diaAtual = data.getDate(); var anoAtual = data.getFullYear(); var dataAtual = diaAtual+'/'+mesAtual+'/'+anoAtual; var contCalendario = 0; $('#mes_'+mesAtual).show().find('.dia_'+diaAtual).addClass('atual'); function hideShow(){ if(mesAtual > 12){ mesAtual = 1; anoAtual = +1; }else if(mesAtual < 1){ mesAtual = 12; anoAtual = -1; } $('.mes').hide(); $('#mes_'+mesAtual).show(); } $('#vai').on('click', function(e){ e.preventDefault(); mesAtual++; hideShow(); return false; }); $('#volta').on('click', function(e){ e.preventDefault(); mesAtual--; if(mesAtual < 1){ anoAual - -1;} hideShow(); return false; }); }); eu acho que estou errando no JAVASCRIPT
       
      para quem for me ajudar vou deixar o link do calendário.
      http://www.nebbclean.com.br/calendario.rar
       
      Agradeço!

      Att,
      Eduardo Moura
    • Por MachineMan
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="navbar-fixed-top.css" rel="stylesheet"> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> .navbar-esquerda{ margin-left:1550px; position: absolute; bottom: 1px; width: 100%; } .navbar-esquerda1{ margin-left:1260px; position: absolute; bottom: 1px; width: 100%; } .navbar-esquerda2{ margin-left:280px; position: absolute; bottom: 1px; width: 100%; } .img-responsive{ margin-left:770px; height:300px; } .jumbotron-fluid { background-image: url(pao.jpg); background-size: cover; height: 150%;} body{ background-image: url(pao.jpg); background-size: 100% 100%; } .text{ margin-left:687px; font-size: 100px; margin-bottom: 100px; } .expositor{ margin-left:200px; } .cafe{ margin-left: 160px; height:400px; widht:400px; } .line{ margin-left:800px; position: absolute; bottom: 1px; margin-top: 80px; } .Menulinha{ margin-left:600px; bottom:500px; position: relative; height:150%; } .Menulinha1{ margin-left:600px; bottom:200px; position: relative; height:150%; } .login{ margin-left:800px; margin-top:-500px; } .pergunta{ margin-left:1450px; margin-top:-400px; } .aceito{ margin-left:1550px; margin-top:80px; color: red; </style> </head> <body> <div class="sticky-top"> <div class="container-fluid"> <div class="jumbotron jumbotron-fluid bg-white my-0 py-0"> <img class="img-responsive" src="logocerto.png"> </div> </div> </div> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="col-md-2"> <!-- alterando esses números consegue aumentar e diminuir cada campo --> <nav class="navbar navbar-expand-md navbar-light bg-light mb-3"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Cardapio </a> </nav> </div> <div class="col-md-2"> <div class="navbar-esquerda2"> <nav class="navbar navbar-expand-md navbar-light bg-light mb-3"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Adotar Animal </a> </nav> </div> </div> </div> <div class="col-md-2"> <!-- ESSE É O ESPAÇO EM BRANCO --> </div> <div class="col-md-2"> <div class="navbar-esquerda1"> <nav class="navbar navbar-expand-md navbar-light bg-light mb-3"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Fale Conosco </a> </nav> </div> </div> </div> <div class="col-md-2"> <div class="navbar-esquerda"> <nav class="navbar navbar-expand-md navbar-light bg-light mb-3"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Animais Expostos </a> </nav> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="text-div"> <h1 class="text"> Bem Vindo </h1> </div> </div> <div class="container-fluid"> <h1 class="expositor"> Oferta da Semana </h1> </div> <div class="container-fluid"> <div class="cafe1"> <img class="cafe" src="cafe.png"> </div> </div> <div class="linha1"> <img class="line" src="linha.png"> </div> </div> <div class="container-fluid"> <div class="Menulinha"> <img class="img-responsive" src="Menulinha.png" width="518"> <img class="img-responsive" src="Menulinha1.png" width="518"> <div class="login"> <div class="col-lg-10"> <p>Login: <input type="login" class="form-control" id="inputEmail" placeholder="E-mail ou Nome" > </p> <p>Senha: <input type="password" class="form-control" id="inputPassword" placeholder="Senha"> </p> </div> </div> </div> </div> </div> <h2 class="pergunta"> Caso queira cadastrar-se: </h2> <div="container"> <div class="aceito"> <button class="btn btn-danger navbar-btn">CLIQUE AQUI:</button> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> </body> </html> Quero fazer a div "Menulinha" aparecer e sumir, aparecer quando o usuário entrar com o mouse dentro da área do elemento e sumir quando sair.
      Infelizmente meus conhecimentos em javascript são quase nulos, estou estudando essa parte ainda. Obrigado! 
×

Informação importante

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