09. Dividir el código del calendario del resto - Piptonita/crear-calendario-FullCalendar GitHub Wiki

Vamos a separar el objeto del calendario de las funciones de apoyo que hemos creado.

Para empezar cortamos todo el código que no pertenece al objeto FullCalendar dejando calendar.js así:

var calendarDiv = document.getElementById('calendar');


var calendar = new FullCalendar.Calendar(calendarDiv, {
    locales: 'es', 
    initialView: 'dayGridMonth', 
    headerToolbar: { 
        left: 'prev,crearEntrada', // asignamos el botón a la toolbar 
        center: 'title', 
        right: 'next',

    },
    footerToolbar: {
        left: 'prevYear',    
        center: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,today',
        right: 'nextYear'
    }, 
    buttonText: {
        today: 'Hoy',
        month: 'Mes',
        week: 'Semana',
        day: 'Día',
        list: 'Listado'
    },
    customButtons: { // cargamos la propiedad custombuttons
        crearEntrada: { // creamos un botón
            text: 'Nuevo evento', // le asignamos un texto
            click: ()=>{ // y ejecutamos la acción que se dispara.
                abrirModal('crear'); // esta será abrir el modal con permisos de creación
                vaciarCampos(); // y vaciamos campos
            }
        }
    },
    events: [
        {
            title: 'Evento de prueba 1',
            description: 'Esta es una descripción de prueba', 
            start: '2020-09-20 12:00:00', 
            end: '2020-09-25 12:00:00', 
            color: 'yellow', 
            textColor: 'red', 
        },
        {
            title: 'Evento de prueba 2',
            descripcion: 'Este es otro evento de un solo día',
            start: '2020-09-26',
            color: 'red',
            textColor: 'yellow'
        },
        {
            title: 'Evento de prueba 3',
            description: 'Este evento dura un tiempo determinado',
            start: '2020-09-27 08:00:00', 
            end: '2020-09-27 10:00:00', 
            color: 'blue',
            textColor: 'green'
        }        
    ], 
    dateClick: (info) => {
        abrirModal('crear');

        var fecha = document.getElementById('fechaInicio');
        fecha.value = info.dateStr; 
        
    },
    eventClick: (info) => {
        document.getElementById('tituloEntrada').innerHTML = info.event.title;
        document.getElementById('titulo').value = info.event.title;
        fechaInicio = cortarFecha(info.event.startStr);
        document.getElementById('fechaInicio').value = fechaInicio[0];

        if(fechaInicio.length > 1){
            document.getElementById('horaInicio').value = fechaInicio[1];
        }

        fechaFin = cortarFecha(info.event.endStr);
        document.getElementById('fechaFin').value = fechaFin[0];

        if(fechaFin.length > 1){
            document.getElementById('horaFin').value = fechaFin[1];
        }

        if(info.event.extendedProps.description){
            document.getElementById('descripcion').value = info.event.extendedProps.description;
        }
        
        document.getElementById('color').value = info.event.backgroundColor;
        document.getElementById('textColor').value = info.event.textColor;

        abrirModal('editar');
    },
    editable: true
    
});

calendar.render();

Vamos a la carpeta src/js y creamos un archivo al que llamaremos calendarHelper.js y pegamos el código que hemos cortado antes:

botonCrear = document.getElementById('crear');
botonCrear.addEventListener('click', ()=> {
    recuperarCampos();
    calendar.addEvent(recuperarCampos());
    cerrarModal();
    vaciarCampos();

});

botonEditar = document.getElementById('editar');
botonEditar.addEventListener('click', ()=>{
    cerrarModal();
    calendar.refetchEvents();
    vaciarCampos();
});

botonBorrar = document.getElementById('borrar');
botonBorrar.addEventListener('click', ()=>{
    cerrarModal();
    calendar.refetchEvents();
    vaciarCampos();
})

var modal = document.getElementById('modal');

function abrirModal(permisos){
    if(permisos == 'crear'){
        document.getElementById('editar').style.cssText = "display: none";
        document.getElementById('crear').style.cssText = "display: block";
        document.getElementById('borrar').style.cssText = "display: none";
    }else{
        document.getElementById('editar').style.cssText = "display: block";
        document.getElementById('crear').style.cssText = "display: none";
        document.getElementById('borrar').style.cssText = "display: block";
    }

    modal.style.cssText = "display: flex;";
    window.setTimeout(()=>{
        modal.style.cssText += "opacity: 1; transition: 0.5s";
    }, 10);
}

function recuperarCampos(){
    var nuevoEvento = [];
    nuevoEvento.title = document.getElementById('titulo').value;
    if(document.getElementById('horaInicio').value != ''){
        nuevoEvento.start = document.getElementById('fechaInicio').value + " " + document.getElementById('horaInicio').value;
    }else{
        nuevoEvento.start = document.getElementById('fechaInicio').value;
    }
    nuevoEvento.end = document.getElementById('fechaFin').value + " " + document.getElementById('horaFin').value;
    nuevoEvento.description = document.getElementById('descripcion').value;
    nuevoEvento.color = document.getElementById('color').value;
    nuevoEvento.textColor = document.getElementById('textColor').value;

    return nuevoEvento;
}

var botonCerrar = document.getElementById('cancelar');
botonCerrar.addEventListener('click', ()=>{
    cerrarModal();
    vaciarCampos();
});

function cerrarModal(){
    modal.style.cssText += 'opacity: 0; transition: 0.5s';
    window.setTimeout(()=>{
        modal.style.cssText = 'display: none';
    }, 500);
}

function vaciarCampos(){
    document.getElementById('titulo').value = '';
    document.getElementById('fechaInicio').value = '';
    document.getElementById('horaInicio').value = '';
    document.getElementById('fechaFin').value = '';
    document.getElementById('horaFin').value = '';
    document.getElementById('descripcion').value = '';
    document.getElementById('color').value = '#00C217';
    document.getElementById('textColor').value = '#0018CC';
}

function cortarFecha(fecha){
    fecha = fecha.split("T");
    if(fecha[1]){
        fecha[1] = fecha[1].substr(0,8);
    }
    return fecha;
}

Finalmente importamos el archivo calendarHelper.js en index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario a Full</title>
    <link rel="stylesheet" href="vendor/fullcalendar/main.css">
    <link rel="stylesheet" href="src/css/calendar.css">
</head>
<body>
    <div id="calendar"></div>

    <div id="modal">
        <div class="containerModal column">
            <h2 id="tituloEntrada">Añadir evento</h2>
            <hr>
            <input type="text" id="titulo" placeholder="Título del evento">
            <div class="row">
                <input type="text" id="fechaInicio" placeholder="Fecha de inicio">
                <input type="text" id="horaInicio" placeholder="Hora de inicio (opcional)">
            </div>
            <div class="row">
                <input type="text" id="fechaFin" placeholder="Fecha de finalización (opcional)">
                <input type="text" id="horaFin" placeholder="Hora de finalización (opcional)">
            </div>
            <textarea id="descripcion" placeholder="Descripción del evento"></textarea>
            <div class="row">
                <label for="color">Color de la tarjeta:</label>
                <input type="color" id="color" name="color" value="#00C217">
                <label for="textColor">Color del texto:</label>
                <input type="color" id="textColor" name="textColor" value="#0018CC">
            </div>
            <div class="row">
                <button id="editar">Editar</button>
                <button id="crear">Guardar</button>
                <button id="borrar">Eliminar</button>
                <button id="cancelar">Cancelar</button>
            </div>
        </div>
    </div>
    
    <script src="vendor/fullcalendar/main.js"></script>
    <script src="vendor/fullcalendar/locales/es.js"></script>
    <script src="src/js/calendar.js"></script>
    <!-- Importamos el archivo nuevo -->
    <script src="src/js/calendarHelper.js"></script>
</body>
</html>

Y con esto ya tenemos mejor acondicionado el código para trabajar con el fácilmente.

09. Dividir el código del calendario del resto - Piptonita/crear-calendario-FullCalendar GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️