Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • Conteúdo Similar

    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • Por fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
    • Por renan mafra
      Olá pessoal,
      Estou aprendendo JS há alguns meses. Como todo processo de aprendizagem aparecem certas lacunas, dúvidas....
      A minha é a seguinte: Estou tendo dificuldade em atrelar elementos do tipo (arrays/listas/vetores) retornados pelos
      métodos do DOM e atrelá-los a eventos. Nesse código abaixo eu queria transformar cada dia de um calendário em
      um objeto clicável e estou tendo dificuldade em manipular os vetores retornados e atrelá-los A CADA DIA.,
      alguém pode dar essa luz ??
       
      segue o código:
       
      <script> window.onload = function(){ var msg = document.getElementById("msg"); var el = document.getElementById("mes"); var elemento = el.getElementsByClassName("dia"); /* elemento[0].onclick = function(){ elemento[0].style.backgroundColor = "#ccc"; } */ elemento[1].onclick = function(){ elemento[1].style.backgroundColor = "#ccc"; } elemento[2].onclick = function(){ elemento[2].style.backgroundColor = "#ccc"; } elemento[3].onclick = function(){ elemento[3].style.backgroundColor = "#ccc"; } } </script> </head> <body> <table id="mes"> <tr> <td class="dia">1</td><td class="dia">2</td><td class="dia">3</td><td class="dia">4</td><td class="dia">5</td><td class="dia">6</td><td class="dia">7</td> </tr> <tr> <td class="dia">8</td><td class="dia">9</td><td class="dia">10</td><td class="dia">11</td><td class="dia">12</td><td class="dia">13</td><td class="dia">14</td> </tr> <tr> <td class="dia">15</td><td class="dia">16</td><td class="dia">17</td><td class="dia">18</td><td class="dia">19</td><td class="dia">20</td><td class="dia">21</td> </tr> <tr> <td class="dia">22</td><td class="dia">23</td><td class="dia">24</td><td class="dia">25</td><td class="dia">26</td><td class="dia">27</td><td class="dia">28</td> </tr> <tr> <td class="dia">29</td><td class="dia">30</td><td class="dia">31</td> </tr> </table> </body> </html> Já usei função fora do onLoad, já usei loop for mas to quebrando a cabeça aqui.
       
      Eu gostaria que um único botão (o dia clicado) em uma função conseguisse fazer o trabalho, tipo assim:
            
             elemento[x].onclick =  function(){
                       elemento[x].style.backgroundColor = "#ccc";
              }
       
      qual a forma correta de fazer isso ????
       
      agradeço a ajuda.
       
    • Por Simioni
      Olá, estou com um dificuldade, estou bolando um calendário de reserva, eu tenho as datas fixas, por exemplo, 07/09/2019, 14/09/2019, 15/09/2019 e cada dia tem 30 vagas disponíveis, o que estou apanhado é em mostrar somente um vez no calendário.
      Eu tenho as tabelas:
      beneficios_calendario

       
      e a beneficios_reserva:

       
      Meu model:
       
      public function vagas_disponiveis() { $this->db->select('*'); $this->db->from('beneficios_calendario'); $query = $this->db->get(); $dias = $query->result_array(); $this->db->select('count(*) as cnt, data_reserva'); $this->db->from('beneficios_reserva'); $this->db->group_by('data_reserva'); $query = $this->db->get(); $reservas = $query->result_array(); $data = array(); foreach ($dias as $dia) { foreach ($reservas as $reserva) { if ($reserva['data_reserva'] == $dia['start']) { $vagas = $dia['title'] - $reserva['cnt']; $data[] = array( 'title' => $vagas, 'start' => $dia['start'], 'color' => $dia['color'], ); } } $data[] = array( 'title' => $dia['title'], 'start' => $dia['start'], 'color' => $dia['color'], ); } echo json_encode($data); }
       
       
      Obrigado.
×

Informação importante

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