Olá desenvolvedores, no tutorial de hoje iremos trabalhar com calendar jQuery. Um calendário comum onde poderemos inserir compromissos. Assim, na página JSP – JavaServer Pages, index.jsp, insira mais uma linha na tabela com um link apontando para a página onde implementaremos o calendário.

E na sequência dentro da subpasta pages crie a página calendar.jsp. Para a implementação do calendário nos basearemos nas orientações da página oficial FullCalendar utilizando o JSON e jQuery.

Na raiz da pasta WebContent crie uma subpasta (scripts), e dentro desta subpasta crie um arquivo de CSS – “fullcalendar.min.css”, o qual conterá a estilização do calendário cujo modelo implementaremos. Novamente, clique com o botão direito do mouse na subpasta scripts para criar um segundo arquivo de CSS – “fullcalendar.print.min.css”.

Ainda dentro da pasta scripts crie também mais três arquivos Javascript “moment.min.js”,  “jquery.min.js” e por fim o arquivo “fullcalendar.min.js”. Clicando aqui você terá acesso aos links de todas as bibliotecas necessárias para esta implementação. E clicando em cada um dos links você terá acesso aos respectivos arquivos.

Então declararemos todos estes cinco arquivos dentro da tag head (cabeçalho) da página calendário.jsp.

FULLCALENDAR

Clicando novamente neste link que mostra o código fonte da implementação do calendário, copie e cole na sua página JSP o script referente a pelo menos dois eventos do código JSON. Bem como, todo o style e o cole depois do script JSON e do mesmo modo proceda com o conteúdo da tag body.

<div id=’calendar’></div>

O que fizemos até o momento, não foi nada além do que um copiar e colar, e se você não cometeu nenhum erro, o seu calendário será exibido corretamente. Assim, inicie o seu servidor e acesse a página para ver a mágica acontecendo.

O nosso próximo passo é a implementação de uma requisição Ajax para recuperar do banco de dados as datas e os eventos do calendário. Desse modo quando o fullCalendar for executa, uma função Ajax/jQuery deverá ser executada em conjunto.

E isso implica buscar os dados no banco de dados para tê-los disponíveis na tela, para então fazer com que o calendário receba estes valores. Esta função Ajax ficará dentro do JSON. Os dados virão da servlet buscaCalendarioDatas e o parâmetro da função é a resposta. Todo o código JSON deverá estar envolvido dentro deste GET.

Então primeiro é preciso executar o Ajax para que a reposta que virá pelo response seja passada para o events, que compreende a data e o evento que alimentam o calendário. Portanto, é preciso uma variável que recebe o response, para quem também é necessário que haja uma conversão.

var datas = JSON.parse(response);

Esta variável datas é agora a responsável por alimentar o calendário, assim poderemos remover a data e o evento inserido manualmente em events no código JSON e substituí-los pela variável datas.

Events:  
   Datas

IMPLEMENTANDO A SERVLET

Clique com o botão direito sobre o package servlet >> New >> Servlet, em Class Name insira o mesmo nome que informamos no Ajax, “buscarCalendarioDatas”. Lenbrando que na anotação devemos sempre corrigir o redirecionamento, uma vez que o Ajax será disparado de uma página que está dentro da pasta pages.

@WebServlet(“/pages/buscarCalendarioDatas”)

Dentro do método doGet() declararemos uma String Datas que receberá a data e o evento do calendário. O reponse deverá setar um código de status 200 que indica uma resposta de sucesso, para então escrever a resposta.

EM POUCAS PALAVRAS

E se quisermos mais um evento basta colocar uma vírgula após o fechamento da chave e abrir uma nova chave. No próximo tutorial faremos com que os dados sejam carregados a partir de uma base de dados.