FULL CALENDAR

FullCalendar es un plugin JQuery, para visualizar eventos en un calendario.

Hoy les traigo un ejemplo práctico usando JSF y FullCalendar, Crearemos una funcionalidad donde estableceremos los días feriados de un mes, para esto nos conectaremos a una base de datos y obtendremos los días feriados de esta tabla.

Para este ejemplo usaremos NetBeans como IDE, creamos una aplicación Web.

Luego nos descargamos el plugin de JQuery en http://fullcalendar.io/download/ 

Para este caso en nuestro proyecto crearemos una carpeta resources donde copiaremos el código de full calendar :

El siguiente paso es importar las clases necesarias para visualizar nuestro calendario

<h:heady >
        <title >Full Calendar</title >
        <link href='resources/calendario/fullcalendar.css' rel='stylesheet' />
        <link href='resources/calendario/fullcalendar.print.css' rel='stylesheet' media='print' / >
        <h:outputScript library="calendario/lib"  name="jquery.min.js" />
        <h:outputScript library="calendario/lib"  name="moment.min.js" />
        
        <h:outputScript library="calendario"  name="fullcalendar.min.js" / >
        <h:outputScript library="calendario"  name="lang-all.js" / >

Estableceremos un poco de diseño para nuestro calendario

<style>
            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }
            .fc-sat, .fc-sun {
                background-color: #FFEBDA;
                color: red;
            }
            .cuerpoBody {
                color: black;
            }
            .fc-unthemed .fc-today {
                background: #0088AD;
                color:white;
            }
            .fc-event {
                border: red;
                background-color: red;
                font-size: 12px;
            }
        </style>

Ahora configuramos nuestro Calendario

<script>
            $(document).ready(function () {
                var currentLangCode = 'es';
                var hoy = new Date();
  var dd = hoy.getDate();
  var mm = hoy.getMonth()+1; //hoy es 0!
  var yyyy = hoy.getFullYear();

  hoy = yyyy+'-'+mm+'-'+dd;
                $('#calendar').fullCalendar({
                    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month'
   },
   defaultDate: hoy,
   lang: currentLangCode,
   selectable: true,
   selectHelper: true,
                        editable: true,
   eventLimit: true,
   events: "servlet/CalendarioDao"
                
                });

            });

        </script>

En esta primer parte establecemos la fecha actual:

var currentLangCode = 'es';

var hoy = new Date();

var dd = hoy.getDate();

var mm = hoy.getMonth()+1; //hoy es 0!

var yyyy = hoy.getFullYear();

y al momento de cargar nuestro calendario tome por defecto la fecha actual en la propiedad defaultDate, la propiedad events no va permitir hacer un llamado al servlet, el cual consulta a la base de datos y establece los días feriados a nuestro calendario. Servlet Calendario/Dao

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                List lst = new ArrayList<>();
                List lst2 = DiasFeriados.getFeriados();
                for (DiasFeriados f : lst2) {
                    DiasFeriados df = new DiasFeriados();
                    String m = (String.valueOf(f.getMes()).length() == 1) ? "0" : "";
                    String d = (String.valueOf(f.getDia()).length() == 1) ? "0" : "";
                    df.setStart(f.getAnnio() + "-" + m + f.getMes() + "-" + d + f.getDia());
                    df.setEnd(f.getAnnio() + "-" + m + f.getMes() + "-" + d + f.getDia());
                    df.setTitle(f.getTitulo());
                    df.setAllDay(false);
                    lst.add(df);
                }

                Gson gson = new Gson();
                String eventoJSON = gson.toJson(lst);
                response.setContentType("application/json");
                response.setCharacterEncoding("UTF-8");
                PrintWriter out = response.getWriter();
                out.write(eventoJSON);
            
    }

Para la respuesta de nuestro Servlet usaremos JSON, y usaremos la Biblioteca Gson para la generación de este. Recorremos los registros que nos devuelve el método getFeriados() y seteamos los campos para establecer los días feriados en nuestro campos. Método getFeriados

public static List getFeriados() {
        List lista = new ArrayList<>();
        Connection con = null;
        ResultSet rs = null;
        PreparedStatement ps = null;
        try {
            con = DBConnector.getInstance().getConnection();
            String query = "select dia,mes,annio,titulo "
                    + "from dias_feriados "
                    + "where estado ='A'";
            ps = con.prepareStatement(query);
            rs = ps.executeQuery();
            while (rs.next()) {
                DiasFeriados df = new DiasFeriados();
                df.setDia(rs.getInt("DIA"));
                df.setMes(rs.getInt("MES"));
                df.setAnnio(rs.getInt("ANNIO"));
                df.setTitulo(rs.getString("TITULO"));
                lista.add(df);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (ps != null) {
                    ps.close();
                }
                if (con != null) {
                    con.close();
                }
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }
        return lista;
    }

por último hacemos el llamado de nuestro calendario

<div id="calendar" style="margin-top: 5%"></div>        

Código Fuente
clave: www.codigosdelaweb.com