Calendario Sportica - Sistema de Gesti\u00f3n<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #64748b;\r\n --secondary: #f1f5f9;\r\n --border: #e2e8f0;\r\n --accent: #dbeafe;\r\n --success: #10b981;\r\n --danger: #ef4444;\r\n --danger-light: #fecaca;\r\n --dark: #1e293b;\r\n --muted: #94a3b8;\r\n --info: #cbd5e1;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n body { \r\n font-family: 'Segoe UI', Tahoma, sans-serif; \r\n margin: 0; padding: 10px; background: #f8fafc; color: var(--dark); \r\n }\r\n \r\n .container { \r\n max-width: 1200px; margin: 10px auto; background: white; \r\n padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); \r\n }\r\n\r\n .top-controls { display: flex; justify-content: flex-start; margin-bottom: 15px; }\r\n \r\n .add-row-main {\r\n background: var(--success); color: white; border: none; padding: 10px 20px; \r\n border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.9rem;\r\n display: flex; align-items: center; gap: 8px; transition: 0.3s;\r\n }\r\n\r\n .table-wrapper { \r\n overflow-x: auto; \r\n border: 1px solid var(--border); \r\n border-radius: 8px; \r\n background: white; \r\n padding: 20px 15px 15px 15px; \r\n }\r\n \r\n table { width: 100%; border-collapse: collapse; min-width: 900px; table-layout: fixed; }\r\n th, td { border: 1px solid var(--border); padding: 12px; text-align: center; vertical-align: middle; word-wrap: break-word; }\r\n \r\n .title-row th { padding: 5px 0; background: #fff; border: none; }\r\n \r\n .sede-input {\r\n width: 100%; border: none; text-align: left; font-size: 1.1rem;\r\n color: #ff0000; outline: none; background: transparent;\r\n text-transform: uppercase; letter-spacing: 1px;\r\n }\r\n\r\n .editable-title {\r\n width: 100%; border: none; text-align: left; font-size: 1.1rem;\r\n color: #1e3a8a; font-weight: bold; padding: 5px 0; outline: none;\r\n display: block; margin: 0 auto; background: transparent;\r\n }\r\n\r\n .header-days { background: var(--primary); color: white; font-size: 0.85rem; text-transform: uppercase; }\r\n .time-col { background: #fdfdfd; width: 160px; }\r\n \r\n .cell-input { \r\n width: 100%; border: 1px solid #ddd; border-radius: 4px;\r\n text-align: center; font-size: 0.85rem; padding: 8px; background: #fff;\r\n }\r\n\r\n \/* Estilo para que las celdas vac\u00edas se vean *\/\r\n .filled-cell { \r\n cursor: pointer; \r\n font-size: 0.85rem; \r\n min-height: 90px; \r\n height: 90px;\r\n transition: 0.2s; \r\n background: #ffffff; \r\n }\r\n .filled-cell:hover { background-color: #f0f7ff; }\r\n\r\n .controls-footer { margin-top: 25px; display: flex; flex-direction: column; gap: 12px; }\r\n .action-btn { \r\n width: 100%; padding: 14px; border: none; border-radius: 8px; \r\n cursor: pointer; font-weight: 700; font-size: 1rem; transition: 0.3s;\r\n text-transform: uppercase;\r\n }\r\n .send-btn { background: var(--primary); color: white; }\r\n .download-btn { background: #2563eb; color: white; }\r\n\r\n .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; backdrop-filter: blur(2px); }\r\n .modal { \r\n display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 420px; z-index: 1001;\r\n }\r\n .modal h3 { margin: 0 0 15px 0; color: var(--primary); text-align: center; }\r\n .modal label { font-size: 0.8rem; color: #64748b; font-weight: bold; }\r\n .modal input { width: 100%; padding: 10px; margin: 5px 0 15px 0; border: 1px solid var(--border); border-radius: 8px; }\r\n \r\n .modal-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }\r\n .modal-btns .row-btns { display: flex; gap: 8px; flex-wrap: nowrap; }\r\n .modal-btns button { flex: 1; padding: 12px 5px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; font-size: 0.8rem; transition: 0.2s; }\r\n \r\n .btn-save { background: var(--primary); color: white; width: 100%; font-size: 1rem !important; }\r\n .btn-delete { background: var(--danger); color: white; }\r\n .btn-clear { background: var(--info); color: var(--dark); }\r\n .btn-cancel { background: #e2e8f0; color: var(--dark); }\r\n\r\n @media (min-width: 768px) {\r\n .controls-footer { flex-direction: row; justify-content: center; gap: 20px; }\r\n .action-btn { width: auto; min-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <div class=\"top-controls\">\r\n <button class=\"add-row-main\" onclick=\"createRow('Nuevo Horario')\">\r\n <span>+<\/span> AGREGAR FILA\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"table-wrapper\" id=\"captureContainer\">\r\n <table id=\"scheduleTable\">\r\n <thead>\r\n <tr class=\"title-row\">\r\n <th colspan=\"8\">\r\n <input type=\"text\" class=\"editable-title\" value=\"Calendario de Actividades\">\r\n <\/th>\r\n <\/tr>\r\n <tr class=\"title-row\">\r\n <th colspan=\"8\">\r\n <input type=\"text\" class=\"sede-input\" placeholder=\"COLOQUE AQU\u00cd EL NOMBRE DE LA SEDE\">\r\n <\/th>\r\n <\/tr>\r\n <tr class=\"header-days\">\r\n <th style=\"width: 160px;\">Horario<\/th>\r\n <th>Dom<\/th><th>Lun<\/th><th>Mar<\/th><th>Mie<\/th><th>Jue<\/th><th>Vie<\/th><th>Sab<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tableBody\">\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"controls-footer\">\r\n <button class=\"action-btn download-btn\" onclick=\"downloadDataCSV()\">Descargar CSV<\/button>\r\n <button class=\"action-btn send-btn\" id=\"sendBtn\">DESCARGAR CALENDARIO<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div id=\"modalOverlay\" class=\"modal-overlay\" onclick=\"closeModal()\"><\/div>\r\n<div id=\"dataModal\" class=\"modal\">\r\n <h3>Detalles de la Clase<\/h3>\r\n <label>Nombre de la Clase<\/label>\r\n <input type=\"text\" id=\"claseInput\">\r\n <label>Profesor<\/label>\r\n <input type=\"text\" id=\"profeInput\">\r\n <div style=\"display:flex; gap:10px;\">\r\n <div style=\"flex:1\"><label>Aforo<\/label><input type=\"number\" id=\"aforoInput\"><\/div>\r\n <div style=\"flex:1\"><label>Finalizaci\u00f3n<\/label><input type=\"time\" id=\"duracionInput\"><\/div>\r\n <\/div>\r\n <div class=\"modal-btns\">\r\n <button class=\"btn-save\" onclick=\"saveCellData()\">Guardar Cambios<\/button>\r\n <div class=\"row-btns\">\r\n <button class=\"btn-delete\" onclick=\"deleteCellData()\">Finalizar Clase<\/button>\r\n <button class=\"btn-clear\" onclick=\"clearCell()\">Limpiar Celda<\/button>\r\n <button class=\"btn-cancel\" onclick=\"closeModal()\">Cerrar<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const tableBody = document.getElementById('tableBody');\r\n let activeCell = null;\r\n\r\n \/\/ Funci\u00f3n para crear filas\r\n function createRow(timeValue) {\r\n const tr = document.createElement('tr');\r\n \r\n \/\/ Columna de Horario\r\n const tdTime = document.createElement('td');\r\n tdTime.className = 'time-col';\r\n tdTime.innerHTML = `<input type=\"text\" class=\"cell-input\" value=\"${timeValue}\">`;\r\n tr.appendChild(tdTime);\r\n\r\n \/\/ Columnas de d\u00edas (7 d\u00edas)\r\n for (let i = 0; i < 7; i++) {\r\n const td = document.createElement('td');\r\n td.className = 'filled-cell';\r\n \/\/ Inicializar almacenamiento de datos\r\n td.dataset.clase = \"\";\r\n td.dataset.profe = \"\";\r\n td.dataset.aforo = \"\";\r\n td.dataset.fin = \"\";\r\n td.dataset.status = \"active\"; \/\/ \"active\" o \"finished\"\r\n\r\n td.onclick = function() { openModal(this); };\r\n tr.appendChild(td);\r\n }\r\n tableBody.appendChild(tr);\r\n }\r\n\r\n \/\/ Crear filas iniciales\r\n [\"06:00 am\", \"07:00 am\", \"08:00 am\", \"09:00 am\", \"10:00 am\"].forEach(h => createRow(h));\r\n\r\n function openModal(cell) { \r\n activeCell = cell; \r\n \/\/ Recuperar datos existentes\r\n document.getElementById('claseInput').value = cell.dataset.clase || \"\";\r\n document.getElementById('profeInput').value = cell.dataset.profe || \"\";\r\n document.getElementById('aforoInput').value = cell.dataset.aforo || \"\";\r\n document.getElementById('duracionInput').value = cell.dataset.fin || \"\";\r\n \r\n document.getElementById('modalOverlay').style.display = 'block'; \r\n document.getElementById('dataModal').style.display = 'block'; \r\n }\r\n\r\n function closeModal() { \r\n document.getElementById('modalOverlay').style.display = 'none'; \r\n document.getElementById('dataModal').style.display = 'none'; \r\n }\r\n\r\n \/\/ Funci\u00f3n central para renderizar el contenido de la celda\r\n function renderCell(isFinalized) {\r\n const c = document.getElementById('claseInput').value;\r\n const p = document.getElementById('profeInput').value;\r\n const a = document.getElementById('aforoInput').value;\r\n const d = document.getElementById('duracionInput').value;\r\n\r\n \/\/ Guardar datos en el elemento para que no se pierdan\r\n activeCell.dataset.clase = c;\r\n activeCell.dataset.profe = p;\r\n activeCell.dataset.aforo = a;\r\n activeCell.dataset.fin = d;\r\n activeCell.dataset.status = isFinalized ? \"finished\" : \"active\";\r\n\r\n if (c || p) {\r\n let etiqueta = isFinalized ? `<br><span style=\"color:#b91c1c; font-weight:bold; font-size:0.7rem;\">[FINALIZADA]<\/span>` : \"\";\r\n activeCell.innerHTML = `<strong>${c}<\/strong>${etiqueta}<br><small>${p}<\/small><br><span style=\"font-size:0.75rem; color:var(--primary); font-weight:bold;\">Cap: ${a} | Fin: ${d}<\/span>`;\r\n activeCell.style.backgroundColor = isFinalized ? \"var(--danger-light)\" : \"var(--accent)\";\r\n } else {\r\n activeCell.innerHTML = \"\";\r\n activeCell.style.backgroundColor = \"#fff\";\r\n }\r\n closeModal();\r\n }\r\n\r\n function saveCellData() {\r\n renderCell(false);\r\n }\r\n\r\n function deleteCellData() {\r\n if(confirm(\"\u00bfQuieres marcar esta clase como FINALIZADA con los datos ingresados?\")) {\r\n renderCell(true);\r\n }\r\n }\r\n\r\n function clearCell() {\r\n if(confirm(\"\u00bfDeseas limpiar totalmente esta celda?\")) {\r\n activeCell.innerHTML = \"\";\r\n activeCell.style.backgroundColor = \"#fff\";\r\n activeCell.dataset.clase = \"\";\r\n activeCell.dataset.profe = \"\";\r\n activeCell.dataset.aforo = \"\";\r\n activeCell.dataset.fin = \"\";\r\n activeCell.dataset.status = \"active\";\r\n closeModal();\r\n }\r\n }\r\n\r\n function downloadDataCSV() {\r\n let csv = [];\r\n document.querySelectorAll(\"table tr\").forEach(r => {\r\n let row = [];\r\n r.querySelectorAll(\"td, th\").forEach(c => {\r\n let input = c.querySelector('input');\r\n let data = input ? input.value : c.innerText.replace(\/\\n\/g, \" \");\r\n row.push('\"' + data.replace(\/\"\/g, '\"\"') + '\"');\r\n });\r\n csv.push(row.join(\",\"));\r\n });\r\n const blob = new Blob([\"\\uFEFF\" + csv.join(\"\\n\")], { type: 'text\/csv;charset=utf-8;' });\r\n const link = document.createElement(\"a\");\r\n link.href = URL.createObjectURL(blob);\r\n link.download = \"Calendario_Sportica.csv\";\r\n link.click();\r\n }\r\n\r\n document.getElementById('sendBtn').addEventListener('click', function() {\r\n const container = document.getElementById('captureContainer');\r\n html2canvas(container, { \r\n backgroundColor: '#ffffff', scale: 2, logging: false, useCORS: true \r\n }).then(canvas => {\r\n const imgData = canvas.toDataURL('image\/png');\r\n const link = document.createElement('a');\r\n link.href = imgData;\r\n link.download = 'Calendario_Sportica.png';\r\n link.click();\r\n setTimeout(() => {\r\n alert(\"TU CALENDARIO HA SIDO CREADO.\");\r\n }, 500);\r\n });\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calendario Sportica – Sistema de Gesti\u00f3n + AGREGAR FILA Horario Dom Lun Mar Mie Jue Vie Sab Descargar CSV DESCARGAR CALENDARIO Detalles de la Clase Nombre de la Clase Profesor Aforo Finalizaci\u00f3n Guardar Cambios Finalizar Clase Limpiar Celda Cerrar<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-22719","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/comments?post=22719"}],"version-history":[{"count":148,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22719\/revisions"}],"predecessor-version":[{"id":23482,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22719\/revisions\/23482"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=22719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Calendario Sportica - Sistema de Gesti\u00f3n<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #64748b;\r\n --secondary: #f1f5f9;\r\n --border: #e2e8f0;\r\n --accent: #dbeafe;\r\n --success: #10b981;\r\n --danger: #ef4444;\r\n --danger-light: #fecaca;\r\n --dark: #1e293b;\r\n --muted: #94a3b8;\r\n --info: #cbd5e1;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n body { \r\n font-family: 'Segoe UI', Tahoma, sans-serif; \r\n margin: 0; padding: 10px; background: #f8fafc; color: var(--dark); \r\n }\r\n \r\n .container { \r\n max-width: 1200px; margin: 10px auto; background: white; \r\n padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); \r\n }\r\n\r\n .top-controls { display: flex; justify-content: flex-start; margin-bottom: 15px; }\r\n \r\n .add-row-main {\r\n background: var(--success); color: white; border: none; padding: 10px 20px; \r\n border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.9rem;\r\n display: flex; align-items: center; gap: 8px; transition: 0.3s;\r\n }\r\n\r\n .table-wrapper { \r\n overflow-x: auto; \r\n border: 1px solid var(--border); \r\n border-radius: 8px; \r\n background: white; \r\n padding: 20px 15px 15px 15px; \r\n }\r\n \r\n table { width: 100%; border-collapse: collapse; min-width: 900px; table-layout: fixed; }\r\n th, td { border: 1px solid var(--border); padding: 12px; text-align: center; vertical-align: middle; word-wrap: break-word; }\r\n \r\n .title-row th { padding: 5px 0; background: #fff; border: none; }\r\n \r\n .sede-input {\r\n width: 100%; border: none; text-align: left; font-size: 1.1rem;\r\n color: #ff0000; outline: none; background: transparent;\r\n text-transform: uppercase; letter-spacing: 1px;\r\n }\r\n\r\n .editable-title {\r\n width: 100%; border: none; text-align: left; font-size: 1.1rem;\r\n color: #1e3a8a; font-weight: bold; padding: 5px 0; outline: none;\r\n display: block; margin: 0 auto; background: transparent;\r\n }\r\n\r\n .header-days { background: var(--primary); color: white; font-size: 0.85rem; text-transform: uppercase; }\r\n .time-col { background: #fdfdfd; width: 160px; }\r\n \r\n .cell-input { \r\n width: 100%; border: 1px solid #ddd; border-radius: 4px;\r\n text-align: center; font-size: 0.85rem; padding: 8px; background: #fff;\r\n }\r\n\r\n \/* Estilo para que las celdas vac\u00edas se vean *\/\r\n .filled-cell { \r\n cursor: pointer; \r\n font-size: 0.85rem; \r\n min-height: 90px; \r\n height: 90px;\r\n transition: 0.2s; \r\n background: #ffffff; \r\n }\r\n .filled-cell:hover { background-color: #f0f7ff; }\r\n\r\n .controls-footer { margin-top: 25px; display: flex; flex-direction: column; gap: 12px; }\r\n .action-btn { \r\n width: 100%; padding: 14px; border: none; border-radius: 8px; \r\n cursor: pointer; font-weight: 700; font-size: 1rem; transition: 0.3s;\r\n text-transform: uppercase;\r\n }\r\n .send-btn { background: var(--primary); color: white; }\r\n .download-btn { background: #2563eb; color: white; }\r\n\r\n .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; backdrop-filter: blur(2px); }\r\n .modal { \r\n display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 420px; z-index: 1001;\r\n }\r\n .modal h3 { margin: 0 0 15px 0; color: var(--primary); text-align: center; }\r\n .modal label { font-size: 0.8rem; color: #64748b; font-weight: bold; }\r\n .modal input { width: 100%; padding: 10px; margin: 5px 0 15px 0; border: 1px solid var(--border); border-radius: 8px; }\r\n \r\n .modal-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }\r\n .modal-btns .row-btns { display: flex; gap: 8px; flex-wrap: nowrap; }\r\n .modal-btns button { flex: 1; padding: 12px 5px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; font-size: 0.8rem; transition: 0.2s; }\r\n \r\n .btn-save { background: var(--primary); color: white; width: 100%; font-size: 1rem !important; }\r\n .btn-delete { background: var(--danger); color: white; }\r\n .btn-clear { background: var(--info); color: var(--dark); }\r\n .btn-cancel { background: #e2e8f0; color: var(--dark); }\r\n\r\n @media (min-width: 768px) {\r\n .controls-footer { flex-direction: row; justify-content: center; gap: 20px; }\r\n .action-btn { width: auto; min-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <div class=\"top-controls\">\r\n <button class=\"add-row-main\" onclick=\"createRow('Nuevo Horario')\">\r\n <span>+<\/span> AGREGAR FILA\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"table-wrapper\" id=\"captureContainer\">\r\n <table id=\"scheduleTable\">\r\n <thead>\r\n <tr class=\"title-row\">\r\n <th colspan=\"8\">\r\n <input type=\"text\" class=\"editable-title\" value=\"Calendario de Actividades\">\r\n <\/th>\r\n <\/tr>\r\n <tr class=\"title-row\">\r\n <th colspan=\"8\">\r\n <input type=\"text\" class=\"sede-input\" placeholder=\"COLOQUE AQU\u00cd EL NOMBRE DE LA SEDE\">\r\n <\/th>\r\n <\/tr>\r\n <tr class=\"header-days\">\r\n <th style=\"width: 160px;\">Horario<\/th>\r\n <th>Dom<\/th><th>Lun<\/th><th>Mar<\/th><th>Mie<\/th><th>Jue<\/th><th>Vie<\/th><th>Sab<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tableBody\">\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"controls-footer\">\r\n <button class=\"action-btn download-btn\" onclick=\"downloadDataCSV()\">Descargar CSV<\/button>\r\n <button class=\"action-btn send-btn\" id=\"sendBtn\">DESCARGAR CALENDARIO<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div id=\"modalOverlay\" class=\"modal-overlay\" onclick=\"closeModal()\"><\/div>\r\n<div id=\"dataModal\" class=\"modal\">\r\n <h3>Detalles de la Clase<\/h3>\r\n <label>Nombre de la Clase<\/label>\r\n <input type=\"text\" id=\"claseInput\">\r\n <label>Profesor<\/label>\r\n <input type=\"text\" id=\"profeInput\">\r\n <div style=\"display:flex; gap:10px;\">\r\n <div style=\"flex:1\"><label>Aforo<\/label><input type=\"number\" id=\"aforoInput\"><\/div>\r\n <div style=\"flex:1\"><label>Finalizaci\u00f3n<\/label><input type=\"time\" id=\"duracionInput\"><\/div>\r\n <\/div>\r\n <div class=\"modal-btns\">\r\n <button class=\"btn-save\" onclick=\"saveCellData()\">Guardar Cambios<\/button>\r\n <div class=\"row-btns\">\r\n <button class=\"btn-delete\" onclick=\"deleteCellData()\">Finalizar Clase<\/button>\r\n <button class=\"btn-clear\" onclick=\"clearCell()\">Limpiar Celda<\/button>\r\n <button class=\"btn-cancel\" onclick=\"closeModal()\">Cerrar<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const tableBody = document.getElementById('tableBody');\r\n let activeCell = null;\r\n\r\n \/\/ Funci\u00f3n para crear filas\r\n function createRow(timeValue) {\r\n const tr = document.createElement('tr');\r\n \r\n \/\/ Columna de Horario\r\n const tdTime = document.createElement('td');\r\n tdTime.className = 'time-col';\r\n tdTime.innerHTML = `<input type=\"text\" class=\"cell-input\" value=\"${timeValue}\">`;\r\n tr.appendChild(tdTime);\r\n\r\n \/\/ Columnas de d\u00edas (7 d\u00edas)\r\n for (let i = 0; i < 7; i++) {\r\n const td = document.createElement('td');\r\n td.className = 'filled-cell';\r\n \/\/ Inicializar almacenamiento de datos\r\n td.dataset.clase = \"\";\r\n td.dataset.profe = \"\";\r\n td.dataset.aforo = \"\";\r\n td.dataset.fin = \"\";\r\n td.dataset.status = \"active\"; \/\/ \"active\" o \"finished\"\r\n\r\n td.onclick = function() { openModal(this); };\r\n tr.appendChild(td);\r\n }\r\n tableBody.appendChild(tr);\r\n }\r\n\r\n \/\/ Crear filas iniciales\r\n [\"06:00 am\", \"07:00 am\", \"08:00 am\", \"09:00 am\", \"10:00 am\"].forEach(h => createRow(h));\r\n\r\n function openModal(cell) { \r\n activeCell = cell; \r\n \/\/ Recuperar datos existentes\r\n document.getElementById('claseInput').value = cell.dataset.clase || \"\";\r\n document.getElementById('profeInput').value = cell.dataset.profe || \"\";\r\n document.getElementById('aforoInput').value = cell.dataset.aforo || \"\";\r\n document.getElementById('duracionInput').value = cell.dataset.fin || \"\";\r\n \r\n document.getElementById('modalOverlay').style.display = 'block'; \r\n document.getElementById('dataModal').style.display = 'block'; \r\n }\r\n\r\n function closeModal() { \r\n document.getElementById('modalOverlay').style.display = 'none'; \r\n document.getElementById('dataModal').style.display = 'none'; \r\n }\r\n\r\n \/\/ Funci\u00f3n central para renderizar el contenido de la celda\r\n function renderCell(isFinalized) {\r\n const c = document.getElementById('claseInput').value;\r\n const p = document.getElementById('profeInput').value;\r\n const a = document.getElementById('aforoInput').value;\r\n const d = document.getElementById('duracionInput').value;\r\n\r\n \/\/ Guardar datos en el elemento para que no se pierdan\r\n activeCell.dataset.clase = c;\r\n activeCell.dataset.profe = p;\r\n activeCell.dataset.aforo = a;\r\n activeCell.dataset.fin = d;\r\n activeCell.dataset.status = isFinalized ? \"finished\" : \"active\";\r\n\r\n if (c || p) {\r\n let etiqueta = isFinalized ? `<br><span style=\"color:#b91c1c; font-weight:bold; font-size:0.7rem;\">[FINALIZADA]<\/span>` : \"\";\r\n activeCell.innerHTML = `<strong>${c}<\/strong>${etiqueta}<br><small>${p}<\/small><br><span style=\"font-size:0.75rem; color:var(--primary); font-weight:bold;\">Cap: ${a} | Fin: ${d}<\/span>`;\r\n activeCell.style.backgroundColor = isFinalized ? \"var(--danger-light)\" : \"var(--accent)\";\r\n } else {\r\n activeCell.innerHTML = \"\";\r\n activeCell.style.backgroundColor = \"#fff\";\r\n }\r\n closeModal();\r\n }\r\n\r\n function saveCellData() {\r\n renderCell(false);\r\n }\r\n\r\n function deleteCellData() {\r\n if(confirm(\"\u00bfQuieres marcar esta clase como FINALIZADA con los datos ingresados?\")) {\r\n renderCell(true);\r\n }\r\n }\r\n\r\n function clearCell() {\r\n if(confirm(\"\u00bfDeseas limpiar totalmente esta celda?\")) {\r\n activeCell.innerHTML = \"\";\r\n activeCell.style.backgroundColor = \"#fff\";\r\n activeCell.dataset.clase = \"\";\r\n activeCell.dataset.profe = \"\";\r\n activeCell.dataset.aforo = \"\";\r\n activeCell.dataset.fin = \"\";\r\n activeCell.dataset.status = \"active\";\r\n closeModal();\r\n }\r\n }\r\n\r\n function downloadDataCSV() {\r\n let csv = [];\r\n document.querySelectorAll(\"table tr\").forEach(r => {\r\n let row = [];\r\n r.querySelectorAll(\"td, th\").forEach(c => {\r\n let input = c.querySelector('input');\r\n let data = input ? input.value : c.innerText.replace(\/\\n\/g, \" \");\r\n row.push('\"' + data.replace(\/\"\/g, '\"\"') + '\"');\r\n });\r\n csv.push(row.join(\",\"));\r\n });\r\n const blob = new Blob([\"\\uFEFF\" + csv.join(\"\\n\")], { type: 'text\/csv;charset=utf-8;' });\r\n const link = document.createElement(\"a\");\r\n link.href = URL.createObjectURL(blob);\r\n link.download = \"Calendario_Sportica.csv\";\r\n link.click();\r\n }\r\n\r\n document.getElementById('sendBtn').addEventListener('click', function() {\r\n const container = document.getElementById('captureContainer');\r\n html2canvas(container, { \r\n backgroundColor: '#ffffff', scale: 2, logging: false, useCORS: true \r\n }).then(canvas => {\r\n const imgData = canvas.toDataURL('image\/png');\r\n const link = document.createElement('a');\r\n link.href = imgData;\r\n link.download = 'Calendario_Sportica.png';\r\n link.click();\r\n setTimeout(() => {\r\n alert(\"TU CALENDARIO HA SIDO CREADO.\");\r\n }, 500);\r\n });\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calendario Sportica – Sistema de Gesti\u00f3n + AGREGAR FILA Horario Dom Lun Mar Mie Jue Vie Sab Descargar CSV DESCARGAR CALENDARIO Detalles de la Clase Nombre de la Clase Profesor Aforo Finalizaci\u00f3n Guardar Cambios Finalizar Clase Limpiar Celda Cerrar<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-22719","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/comments?post=22719"}],"version-history":[{"count":148,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22719\/revisions"}],"predecessor-version":[{"id":23482,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22719\/revisions\/23482"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=22719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}