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 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! 
    • Por fdesign
      Boa tarde,
      Estou com uma grande duvida e dilema. Como poderei fazer para sincronizar o calendário google, com o meu email profissional? Na vez de usar o email @gmail.com usar @minhaempresa.com
       
      Há alguma forma gratuita? E no android / ios a conta a ser utilizada é a profissional e não a do gmail.
       
      Obrigado amigos
    • Por danipereira
      Oi pessoal.
      Tou com uma dificuldade, será que alguém consegue me ajudar...
      Eu tenho um site de reservas e preciso exportar o calendario de outros sites.
      Uso o full calendar. Como faço?
    • Por Ronaldo De Lélis
      Alguém pode me ajudar com isso aqui: Gostaria de separar a Data do Horário na hora de Cadastrar e mostrar em um Modal usando FullCalendar, igual esse print que encontrei na internet, tentei fazendo assim: mas não consegui... desde já obrigado.

×

Informação importante

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