{"id":57,"date":"2026-06-16T09:44:16","date_gmt":"2026-06-16T09:44:16","guid":{"rendered":"https:\/\/colegiowilliamjames.cl\/newsite\/?page_id=57"},"modified":"2026-08-18T13:43:42","modified_gmt":"2026-08-18T13:43:42","slug":"calendario-de-evaluaciones","status":"publish","type":"page","link":"https:\/\/www.colegiowilliamjames.cl\/?page_id=57","title":{"rendered":"Calendario de evaluaciones"},"content":{"rendered":"\n<div class=\"wp-block-group pagina-interna-hero\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n\n\n<h1 class=\"wp-block-heading\">Calendario de Evaluaciones<\/h1>\n\n\n<\/div><\/div>\n\n\n\n\n<div class=\"wp-block-group documentos-contenido\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n\n\n\n<div class=\"wp-block-group documentos-intro\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n\n\n<p class=\"wp-block-paragraph\">Selecciona un curso para consultar sus evaluaciones programadas. El calendario muestra el mes actual y permite revisar las evaluaciones de los meses siguientes.<\/p>\n\n\n<\/div><\/div>\n\n\n\n\n\n<div id=\"cwj-calendario-app\" class=\"cwj-calendario-app\">\n\n    <!-- Selector de curso -->\n    <div class=\"cwj-calendario-controles\">\n\n        <label for=\"cwj-curso\">\n            Curso\n        <\/label>\n\n        <select id=\"cwj-curso\">\n            <option value=\"\">\n                Cargando cursos&#8230;\n            <\/option>\n        <\/select>\n\n    <\/div>\n\n\n    <!-- Card calendario -->\n    <div class=\"cwj-calendario-card\">\n\n        <!-- Cabecera -->\n        <div class=\"cwj-calendario-header\">\n\n            <button\n                type=\"button\"\n                id=\"cwj-mes-anterior\"\n                class=\"cwj-calendar-nav\"\n                aria-label=\"Mes anterior\"\n            >\n                <i class=\"bi bi-chevron-left\"><\/i>\n            <\/button>\n\n            <h2 id=\"cwj-mes-titulo\">\n                Calendario\n            <\/h2>\n\n            <button\n                type=\"button\"\n                id=\"cwj-mes-siguiente\"\n                class=\"cwj-calendar-nav\"\n                aria-label=\"Mes siguiente\"\n            >\n                <i class=\"bi bi-chevron-right\"><\/i>\n            <\/button>\n\n        <\/div>\n\n\n        <!-- Scroll en m\u00f3vil -->\n        <div class=\"cwj-calendario-scroll\">\n\n            <div class=\"cwj-calendario-interior\">\n\n                <!-- D\u00edas de semana -->\n                <div class=\"cwj-calendario-semana\">\n                    <div>Lun<\/div>\n                    <div>Mar<\/div>\n                    <div>Mi\u00e9<\/div>\n                    <div>Jue<\/div>\n                    <div>Vie<\/div>\n                    <div>S\u00e1b<\/div>\n                    <div>Dom<\/div>\n                <\/div>\n\n                <!-- Calendario -->\n                <div id=\"cwj-calendario-grid\"\n                     class=\"cwj-calendario-grid\">\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- Detalle -->\n    <div id=\"cwj-evaluaciones-detalle\"\n         class=\"cwj-evaluaciones-detalle\">\n\n        <div class=\"cwj-detalle-vacio\">\n\n            <i class=\"bi bi-calendar-check\"><\/i>\n\n            <p>\n                Selecciona un d\u00eda del calendario para revisar sus evaluaciones.\n            <\/p>\n\n        <\/div>\n\n    <\/div>\n\n\n<\/div>\n\n\n<style>\n\n\/* =====================================================\n   CALENDARIO DE EVALUACIONES\n   ===================================================== *\/\n\n.cwj-calendario-app {\n    width: 100%;\n    max-width: 1180px;\n    margin: 0 auto;\n}\n\n\n\/* =====================================================\n   SELECTOR\n   ===================================================== *\/\n\n.cwj-calendario-controles {\n    max-width: 460px;\n    margin: 0 auto 34px auto;\n}\n\n.cwj-calendario-controles label {\n    display: block;\n    margin-bottom: 9px;\n\n    color: #07124d;\n\n    font-size: 15px;\n    font-weight: 700;\n}\n\n.cwj-calendario-controles select {\n    width: 100%;\n\n    padding: 13px 15px;\n\n    border: 1px solid #d9deea;\n    border-radius: 8px;\n\n    background: #ffffff;\n    color: #273044;\n\n    font-size: 16px;\n\n    outline: none;\n}\n\n.cwj-calendario-controles select:focus {\n    border-color: #07124d;\n}\n\n\n\/* =====================================================\n   CARD CALENDARIO\n   ===================================================== *\/\n\n.cwj-calendario-card {\n    width: 100%;\n\n    background: #ffffff;\n\n    border: 1px solid #e7eaf0;\n    border-radius: 18px;\n\n    box-shadow: 0 14px 35px rgba(7, 18, 77, 0.08);\n\n    overflow: hidden;\n}\n\n\n\/* =====================================================\n   CABECERA MES\n   ===================================================== *\/\n\n.cwj-calendario-header {\n    display: grid;\n\n    grid-template-columns: 48px 1fr 48px;\n\n    align-items: center;\n\n    gap: 12px;\n\n    padding: 24px 26px;\n\n    background: #07124d;\n}\n\n.cwj-calendario-header h2 {\n    margin: 0;\n\n    color: #ffffff;\n\n    text-align: center;\n\n    font-size: 24px;\n    font-weight: 700;\n\n    text-transform: capitalize;\n}\n\n.cwj-calendar-nav {\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 42px;\n    height: 42px;\n\n    padding: 0;\n\n    border: 1px solid rgba(255, 255, 255, 0.28);\n    border-radius: 50%;\n\n    background: rgba(255, 255, 255, 0.08);\n    color: #ffffff;\n\n    cursor: pointer;\n\n    transition:\n        background 0.2s ease,\n        opacity 0.2s ease;\n}\n\n.cwj-calendar-nav:hover:not(:disabled) {\n    background: rgba(255, 255, 255, 0.18);\n}\n\n.cwj-calendar-nav:disabled {\n    opacity: 0.3;\n    cursor: default;\n}\n\n\n\/* =====================================================\n   CALENDARIO\n   ===================================================== *\/\n\n.cwj-calendario-scroll {\n    width: 100%;\n    overflow-x: auto;\n}\n\n.cwj-calendario-interior {\n    min-width: 760px;\n}\n\n\n\/* D\u00edas de semana *\/\n\n.cwj-calendario-semana {\n    display: grid;\n\n    grid-template-columns: repeat(7, 1fr);\n\n    background: #f5f7fb;\n\n    border-bottom: 1px solid #e7eaf0;\n}\n\n.cwj-calendario-semana div {\n    padding: 13px 8px;\n\n    color: #07124d;\n\n    text-align: center;\n\n    font-size: 13px;\n    font-weight: 800;\n\n    text-transform: uppercase;\n}\n\n\n\/* Grid *\/\n\n.cwj-calendario-grid {\n    display: grid;\n\n    grid-template-columns: repeat(7, 1fr);\n}\n\n\n\/* D\u00eda *\/\n\n.cwj-calendario-dia {\n    position: relative;\n\n    min-height: 112px;\n\n    padding: 12px;\n\n    box-sizing: border-box;\n\n    border-right: 1px solid #e7eaf0;\n    border-bottom: 1px solid #e7eaf0;\n\n    background: #ffffff;\n\n    cursor: pointer;\n\n    transition:\n        background 0.15s ease,\n        box-shadow 0.15s ease;\n}\n\n.cwj-calendario-dia:nth-child(7n) {\n    border-right: 0;\n}\n\n.cwj-calendario-dia:hover {\n    background: #f9faff;\n}\n\n\n\/* Casilla fuera del mes *\/\n\n.cwj-calendario-dia.vacio {\n    background: #fafbfc;\n    cursor: default;\n}\n\n\n\/* N\u00famero *\/\n\n.cwj-calendario-numero {\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 30px;\n    height: 30px;\n\n    border-radius: 50%;\n\n    color: #273044;\n\n    font-size: 14px;\n    font-weight: 700;\n}\n\n\n\/* Hoy *\/\n\n.cwj-calendario-dia.hoy .cwj-calendario-numero {\n    background: #07124d;\n    color: #ffffff;\n}\n\n\n\/* D\u00eda seleccionado *\/\n\n.cwj-calendario-dia.seleccionado {\n    background: #fffdf0;\n\n    box-shadow:\n        inset 0 0 0 2px #ffd600;\n}\n\n\n\/* D\u00eda con evaluaci\u00f3n *\/\n\n.cwj-calendario-dia.tiene-evaluaciones::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: 12px;\n    bottom: 13px;\n\n    width: 8px;\n    height: 8px;\n\n    border-radius: 50%;\n\n    background: #ffd600;\n}\n\n\n\/* N\u00famero de evaluaciones *\/\n\n.cwj-evaluaciones-cantidad {\n    position: absolute;\n\n    right: 10px;\n    top: 11px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    min-width: 22px;\n    height: 22px;\n\n    padding: 0 6px;\n\n    box-sizing: border-box;\n\n    border-radius: 20px;\n\n    background: #fff8cc;\n    color: #07124d;\n\n    font-size: 11px;\n    font-weight: 800;\n}\n\n\n\/* Asignatura peque\u00f1a dentro de la casilla *\/\n\n.cwj-calendario-resumen {\n    margin-top: 12px;\n\n    color: #465066;\n\n    font-size: 11px;\n    line-height: 1.35;\n\n    overflow: hidden;\n}\n\n.cwj-calendario-resumen strong {\n    display: block;\n\n    color: #07124d;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\/* =====================================================\n   DETALLE\n   ===================================================== *\/\n\n.cwj-evaluaciones-detalle {\n    margin-top: 34px;\n}\n\n\n\/* Estado vac\u00edo *\/\n\n.cwj-detalle-vacio {\n    padding: 32px;\n\n    background: #f5f7fb;\n\n    border-left: 5px solid #ffd600;\n    border-radius: 14px;\n\n    text-align: center;\n}\n\n.cwj-detalle-vacio i {\n    display: block;\n\n    margin-bottom: 12px;\n\n    color: #07124d;\n\n    font-size: 28px;\n}\n\n.cwj-detalle-vacio p {\n    margin: 0;\n\n    color: #465066;\n\n    font-size: 16px;\n}\n\n\n\/* Fecha *\/\n\n.cwj-detalle-fecha {\n    margin: 0 0 22px 0;\n\n    color: #07124d;\n\n    font-size: 25px;\n    font-weight: 700;\n\n    text-transform: capitalize;\n}\n\n.cwj-detalle-fecha::after {\n    content: \"\";\n\n    display: block;\n\n    width: 55px;\n    height: 4px;\n\n    margin-top: 12px;\n\n    border-radius: 4px;\n\n    background: #ffd600;\n}\n\n\n\/* Lista de evaluaciones *\/\n\n.cwj-detalle-lista {\n    display: grid;\n\n    gap: 20px;\n}\n\n\n\/* Evaluaci\u00f3n individual *\/\n\n.cwj-evaluacion-card {\n    padding: 26px 28px;\n\n    background: #ffffff;\n\n    border: 1px solid #e7eaf0;\n    border-radius: 16px;\n\n    box-shadow: 0 10px 28px rgba(7, 18, 77, 0.07);\n}\n\n\n\/* Asignatura *\/\n\n.cwj-evaluacion-asignatura {\n    margin: 0 0 20px 0;\n\n    color: #07124d;\n\n    font-size: 21px;\n    font-weight: 700;\n}\n\n\n\/* Datos *\/\n\n.cwj-evaluacion-datos {\n    display: grid;\n\n    gap: 14px;\n}\n\n.cwj-evaluacion-dato {\n    display: grid;\n\n    grid-template-columns: 145px 1fr;\n\n    gap: 15px;\n\n    color: #273044;\n\n    font-size: 15px;\n    line-height: 1.6;\n}\n\n.cwj-evaluacion-dato strong {\n    color: #07124d;\n}\n\n\n\/* =====================================================\n   CARGANDO \/ ERROR\n   ===================================================== *\/\n\n.cwj-calendario-mensaje {\n    padding: 30px;\n\n    text-align: center;\n\n    color: #465066;\n\n    font-size: 15px;\n}\n\n\n\/* =====================================================\n   RESPONSIVE\n   ===================================================== *\/\n\n@media screen and (max-width: 781px) {\n\n    .cwj-calendario-header {\n        padding: 20px;\n    }\n\n    .cwj-calendario-header h2 {\n        font-size: 20px;\n    }\n\n    .cwj-evaluacion-card {\n        padding: 23px 20px;\n    }\n\n    .cwj-evaluacion-dato {\n        grid-template-columns: 1fr;\n        gap: 2px;\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener('DOMContentLoaded', function () {\n\n    const API_URL = '\/eval\/evaluaciones_api.php';\n\n    const selectCurso =\n        document.getElementById('cwj-curso');\n\n    const calendarioGrid =\n        document.getElementById('cwj-calendario-grid');\n\n    const mesTitulo =\n        document.getElementById('cwj-mes-titulo');\n\n    const botonAnterior =\n        document.getElementById('cwj-mes-anterior');\n\n    const botonSiguiente =\n        document.getElementById('cwj-mes-siguiente');\n\n    const detalle =\n        document.getElementById('cwj-evaluaciones-detalle');\n\n\n    let evaluaciones = [];\n\n    let fechaActualServidor = null;\n\n    let mesMinimo = null;\n\n    let mesVisible = null;\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | ESCAPAR HTML\n    |--------------------------------------------------------------------------\n    *\/\n\n    function escaparHtml(valor) {\n\n        return String(valor ?? '')\n            .replace(\/&\/g, '&amp;')\n            .replace(\/<\/g, '&lt;')\n            .replace(\/>\/g, '&gt;')\n            .replace(\/\"\/g, '&quot;')\n            .replace(\/'\/g, '&#039;');\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | YYYY-MM-DD\n    |--------------------------------------------------------------------------\n    *\/\n\n    function fechaISO(year, month, day) {\n\n        return (\n            String(year) +\n            '-' +\n            String(month + 1).padStart(2, '0') +\n            '-' +\n            String(day).padStart(2, '0')\n        );\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | FECHA DEL SERVIDOR\n    |--------------------------------------------------------------------------\n    *\/\n\n    function establecerFechaActual(fecha) {\n\n        const partes = fecha.split('-');\n\n        const year = Number(partes[0]);\n        const month = Number(partes[1]) - 1;\n\n        fechaActualServidor = fecha;\n\n        mesMinimo =\n            new Date(year, month, 1);\n\n        if (!mesVisible) {\n\n            mesVisible =\n                new Date(year, month, 1);\n\n        }\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | OBTENER CURSOS\n    |--------------------------------------------------------------------------\n    *\/\n\n    async function cargarCursos() {\n\n        try {\n\n            const response =\n                await fetch(API_URL, {\n                    cache: 'no-store'\n                });\n\n            const data =\n                await response.json();\n\n            if (!response.ok || !data.ok) {\n\n                throw new Error(\n                    data.error ||\n                    'No fue posible cargar los cursos.'\n                );\n\n            }\n\n            establecerFechaActual(data.today);\n\n            selectCurso.innerHTML = '';\n\n            if (!data.courses.length) {\n\n                const option =\n                    document.createElement('option');\n\n                option.value = '';\n\n                option.textContent =\n                    'No hay cursos disponibles';\n\n                selectCurso.appendChild(option);\n\n                renderCalendario();\n\n                return;\n\n            }\n\n            data.courses.forEach(function (curso) {\n\n                const option =\n                    document.createElement('option');\n\n                option.value =\n                    curso.id;\n\n                option.textContent =\n                    curso.name;\n\n                selectCurso.appendChild(option);\n\n            });\n\n\n            \/*\n             * Seleccionamos autom\u00e1ticamente\n             * el primer curso.\n             *\/\n\n            await cargarEvaluaciones(\n                selectCurso.value\n            );\n\n        } catch (error) {\n\n            console.error(error);\n\n            selectCurso.innerHTML =\n                '<option>Error al cargar cursos<\/option>';\n\n            calendarioGrid.innerHTML =\n                '<div class=\"cwj-calendario-mensaje\">No fue posible cargar el calendario.<\/div>';\n\n        }\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | CARGAR EVALUACIONES\n    |--------------------------------------------------------------------------\n    *\/\n\n    async function cargarEvaluaciones(courseId) {\n\n        if (!courseId) {\n            return;\n        }\n\n        calendarioGrid.innerHTML =\n            '<div class=\"cwj-calendario-mensaje\">Cargando evaluaciones...<\/div>';\n\n        detalle.innerHTML =\n            '<div class=\"cwj-detalle-vacio\">' +\n                '<i class=\"bi bi-hourglass-split\"><\/i>' +\n                '<p>Cargando informaci\u00f3n del curso...<\/p>' +\n            '<\/div>';\n\n\n        try {\n\n            const response =\n                await fetch(\n                    API_URL +\n                    '?course_id=' +\n                    encodeURIComponent(courseId),\n                    {\n                        cache: 'no-store'\n                    }\n                );\n\n            const data =\n                await response.json();\n\n            if (!response.ok || !data.ok) {\n\n                throw new Error(\n                    data.error ||\n                    'No fue posible obtener las evaluaciones.'\n                );\n\n            }\n\n            evaluaciones =\n                Array.isArray(data.evaluations)\n                    ? data.evaluations\n                    : [];\n\n            establecerFechaActual(data.today);\n\n            \/*\n             * Al cambiar de curso volvemos\n             * siempre al mes actual.\n             *\/\n\n            mesVisible =\n                new Date(\n                    mesMinimo.getFullYear(),\n                    mesMinimo.getMonth(),\n                    1\n                );\n\n            renderCalendario();\n\n            mostrarMensajeInicial();\n\n        } catch (error) {\n\n            console.error(error);\n\n            evaluaciones = [];\n\n            renderCalendario();\n\n            detalle.innerHTML =\n                '<div class=\"cwj-detalle-vacio\">' +\n                    '<i class=\"bi bi-exclamation-circle\"><\/i>' +\n                    '<p>No fue posible cargar las evaluaciones.<\/p>' +\n                '<\/div>';\n\n        }\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | EVALUACIONES DE UN D\u00cdA\n    |--------------------------------------------------------------------------\n    *\/\n\n    function evaluacionesDelDia(fecha) {\n\n        return evaluaciones.filter(\n            function (evaluacion) {\n\n                return (\n                    evaluacion.evaluation_date === fecha\n                );\n\n            }\n        );\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | RENDER CALENDARIO\n    |--------------------------------------------------------------------------\n    *\/\n\n    function renderCalendario() {\n\n        if (!mesVisible) {\n            return;\n        }\n\n\n        const year =\n            mesVisible.getFullYear();\n\n        const month =\n            mesVisible.getMonth();\n\n\n        const formatter =\n            new Intl.DateTimeFormat(\n                'es-CL',\n                {\n                    month: 'long',\n                    year: 'numeric'\n                }\n            );\n\n        mesTitulo.textContent =\n            formatter.format(mesVisible);\n\n\n        \/*\n         * Lunes = primera columna\n         *\/\n\n        const primerDia =\n            new Date(year, month, 1);\n\n        const offset =\n            (primerDia.getDay() + 6) % 7;\n\n\n        const diasMes =\n            new Date(\n                year,\n                month + 1,\n                0\n            ).getDate();\n\n\n        const totalCeldas =\n            Math.ceil(\n                (offset + diasMes) \/ 7\n            ) * 7;\n\n\n        calendarioGrid.innerHTML = '';\n\n\n        for (\n            let celda = 0;\n            celda < totalCeldas;\n            celda++\n        ) {\n\n            const numeroDia =\n                celda - offset + 1;\n\n\n            const dayElement =\n                document.createElement('div');\n\n\n            if (\n                numeroDia < 1 ||\n                numeroDia > diasMes\n            ) {\n\n                dayElement.className =\n                    'cwj-calendario-dia vacio';\n\n                calendarioGrid.appendChild(\n                    dayElement\n                );\n\n                continue;\n\n            }\n\n\n            const fecha =\n                fechaISO(\n                    year,\n                    month,\n                    numeroDia\n                );\n\n\n            const evaluacionesDia =\n                evaluacionesDelDia(fecha);\n\n\n            dayElement.className =\n                'cwj-calendario-dia';\n\n\n            if (\n                fecha ===\n                fechaActualServidor\n            ) {\n\n                dayElement.classList.add(\n                    'hoy'\n                );\n\n            }\n\n\n            if (\n                evaluacionesDia.length > 0\n            ) {\n\n                dayElement.classList.add(\n                    'tiene-evaluaciones'\n                );\n\n            }\n\n\n            \/*\n             * N\u00famero del d\u00eda\n             *\/\n\n            const numero =\n                document.createElement('div');\n\n            numero.className =\n                'cwj-calendario-numero';\n\n            numero.textContent =\n                numeroDia;\n\n            dayElement.appendChild(\n                numero\n            );\n\n\n            \/*\n             * N\u00famero de evaluaciones\n             *\/\n\n            if (\n                evaluacionesDia.length > 0\n            ) {\n\n                const cantidad =\n                    document.createElement('div');\n\n                cantidad.className =\n                    'cwj-evaluaciones-cantidad';\n\n                cantidad.textContent =\n                    evaluacionesDia.length;\n\n                dayElement.appendChild(\n                    cantidad\n                );\n\n\n                \/*\n                 * Mostramos una asignatura\n                 * dentro de la celda.\n                 *\/\n\n                const resumen =\n                    document.createElement('div');\n\n                resumen.className =\n                    'cwj-calendario-resumen';\n\n\n                const principal =\n                    document.createElement('strong');\n\n                principal.textContent =\n                    evaluacionesDia[0].subject;\n\n                resumen.appendChild(\n                    principal\n                );\n\n\n                if (\n                    evaluacionesDia.length > 1\n                ) {\n\n                    const extra =\n                        document.createElement('span');\n\n                    extra.textContent =\n                        '+' +\n                        (evaluacionesDia.length - 1) +\n                        ' evaluaci\u00f3n(es)';\n\n                    resumen.appendChild(\n                        extra\n                    );\n\n                }\n\n\n                dayElement.appendChild(\n                    resumen\n                );\n\n            }\n\n\n            \/*\n             * Click d\u00eda\n             *\/\n\n            dayElement.addEventListener(\n                'click',\n                function () {\n\n                    document\n                        .querySelectorAll(\n                            '.cwj-calendario-dia.seleccionado'\n                        )\n                        .forEach(\n                            function (element) {\n\n                                element.classList.remove(\n                                    'seleccionado'\n                                );\n\n                            }\n                        );\n\n\n                    dayElement.classList.add(\n                        'seleccionado'\n                    );\n\n\n                    mostrarDetalle(\n                        fecha,\n                        evaluacionesDia\n                    );\n\n                }\n            );\n\n\n            calendarioGrid.appendChild(\n                dayElement\n            );\n\n        }\n\n\n        \/*\n         * No permitimos navegar\n         * antes del mes actual.\n         *\/\n\n        botonAnterior.disabled =\n            (\n                year ===\n                    mesMinimo.getFullYear()\n                &&\n                month ===\n                    mesMinimo.getMonth()\n            );\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | MOSTRAR DETALLE\n    |--------------------------------------------------------------------------\n    *\/\n\n    function mostrarDetalle(\n        fecha,\n        evaluacionesDia\n    ) {\n\n        const partes =\n            fecha.split('-');\n\n\n        const fechaObj =\n            new Date(\n                Number(partes[0]),\n                Number(partes[1]) - 1,\n                Number(partes[2])\n            );\n\n\n        const fechaFormateada =\n            new Intl.DateTimeFormat(\n                'es-CL',\n                {\n                    weekday: 'long',\n                    day: 'numeric',\n                    month: 'long',\n                    year: 'numeric'\n                }\n            ).format(fechaObj);\n\n\n        if (\n            evaluacionesDia.length === 0\n        ) {\n\n            detalle.innerHTML =\n                '<h3 class=\"cwj-detalle-fecha\">' +\n                    escaparHtml(fechaFormateada) +\n                '<\/h3>' +\n\n                '<div class=\"cwj-detalle-vacio\">' +\n\n                    '<i class=\"bi bi-calendar-check\"><\/i>' +\n\n                    '<p>No hay evaluaciones programadas para este d\u00eda.<\/p>' +\n\n                '<\/div>';\n\n            return;\n\n        }\n\n\n        let html =\n\n            '<h3 class=\"cwj-detalle-fecha\">' +\n                escaparHtml(fechaFormateada) +\n            '<\/h3>' +\n\n            '<div class=\"cwj-detalle-lista\">';\n\n\n        evaluacionesDia.forEach(\n            function (evaluacion) {\n\n                html +=\n\n                    '<article class=\"cwj-evaluacion-card\">' +\n\n                        '<h4 class=\"cwj-evaluacion-asignatura\">' +\n                            escaparHtml(\n                                evaluacion.subject\n                            ) +\n                        '<\/h4>' +\n\n                        '<div class=\"cwj-evaluacion-datos\">' +\n\n                            '<div class=\"cwj-evaluacion-dato\">' +\n                                '<strong>Docente<\/strong>' +\n                                '<span>' +\n                                    escaparHtml(\n                                        evaluacion.teacher\n                                    ) +\n                                '<\/span>' +\n                            '<\/div>' +\n\n                            '<div class=\"cwj-evaluacion-dato\">' +\n                                '<strong>Contenido<\/strong>' +\n                                '<span>' +\n                                    escaparHtml(\n                                        evaluacion.content\n                                    ) +\n                                '<\/span>' +\n                            '<\/div>' +\n\n                            '<div class=\"cwj-evaluacion-dato\">' +\n                                '<strong>Evaluaci\u00f3n<\/strong>' +\n                                '<span>' +\n                                    escaparHtml(\n                                        evaluacion.evaluation_type\n                                    ) +\n                                '<\/span>' +\n                            '<\/div>' +\n\n                        '<\/div>' +\n\n                    '<\/article>';\n\n            }\n        );\n\n\n        html += '<\/div>';\n\n        detalle.innerHTML = html;\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | MENSAJE INICIAL\n    |--------------------------------------------------------------------------\n    *\/\n\n    function mostrarMensajeInicial() {\n\n        detalle.innerHTML =\n            '<div class=\"cwj-detalle-vacio\">' +\n\n                '<i class=\"bi bi-calendar-check\"><\/i>' +\n\n                '<p>Selecciona un d\u00eda del calendario para revisar sus evaluaciones.<\/p>' +\n\n            '<\/div>';\n\n    }\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | CAMBIO DE CURSO\n    |--------------------------------------------------------------------------\n    *\/\n\n    selectCurso.addEventListener(\n        'change',\n        function () {\n\n            cargarEvaluaciones(\n                selectCurso.value\n            );\n\n        }\n    );\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | MES ANTERIOR\n    |--------------------------------------------------------------------------\n    *\/\n\n    botonAnterior.addEventListener(\n        'click',\n        function () {\n\n            const anterior =\n                new Date(\n                    mesVisible.getFullYear(),\n                    mesVisible.getMonth() - 1,\n                    1\n                );\n\n\n            if (\n                anterior < mesMinimo\n            ) {\n\n                return;\n\n            }\n\n\n            mesVisible = anterior;\n\n            renderCalendario();\n\n            mostrarMensajeInicial();\n\n        }\n    );\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | MES SIGUIENTE\n    |--------------------------------------------------------------------------\n    *\/\n\n    botonSiguiente.addEventListener(\n        'click',\n        function () {\n\n            mesVisible =\n                new Date(\n                    mesVisible.getFullYear(),\n                    mesVisible.getMonth() + 1,\n                    1\n                );\n\n            renderCalendario();\n\n            mostrarMensajeInicial();\n\n        }\n    );\n\n\n    \/*\n    |--------------------------------------------------------------------------\n    | INICIO\n    |--------------------------------------------------------------------------\n    *\/\n\n    cargarCursos();\n\n});\n\n<\/script>\n\n\n\n\n\n<div class=\"wp-block-group documentos-destacado\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n\n\n<p class=\"wp-block-paragraph\">Las fechas y contenidos publicados en este calendario corresponden a la programaci\u00f3n acad\u00e9mica informada por el colegio y podr\u00e1n ser actualizados cuando sea necesario.<\/p>\n\n\n<\/div><\/div>\n\n\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Calendario de Evaluaciones Selecciona un curso para consultar sus evaluaciones programadas. El calendario muestra el mes actual y permite revisar las evaluaciones de los meses siguientes. Curso Cargando cursos&#8230; Calendario Lun Mar Mi\u00e9 Jue Vie S\u00e1b Dom Selecciona un d\u00eda del calendario para revisar sus evaluaciones. Las fechas y contenidos publicados en este calendario corresponden&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=57"}],"version-history":[{"count":7,"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions\/464"}],"wp:attachment":[{"href":"https:\/\/www.colegiowilliamjames.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}