Entiendo que estás tratando de implementar una funcionalidad en la que, al hacer clic en una columna específica en una tabla hecha con DataTables, cambie la vista en FullCalendar. En este caso, quieres que al hacer clic en una columna muestre la vista timeGridDay, y al hacer clic en otra columna muestre la vista timeGridWeek.
Aquí hay un enfoque general de cómo podrías abordar este problema:
Agrega un controlador de eventos a las celdas de la columna en la tabla DataTables para capturar los clics.
Dentro del controlador de eventos, determina qué columna se ha hecho clic.
Basado en la columna clicada, cambia la vista en FullCalendar.
Aquí hay un ejemplo de cómo podrías hacer esto:
$(document).ready(function() {
var table = $('#miTabla').DataTable();
// Agregar controlador de eventos a las celdas clicables
$('#miTabla tbody').on('click', '.celda-clicable', function() {
var columnIndex = table.cell(this).index().column;
if (columnIndex === 0) {
cambiarVistaFullCalendar('timeGridDay');
} else if (columnIndex === 1) {
cambiarVistaFullCalendar('timeGridWeek');
}
});
function cambiarVistaFullCalendar(vista) {
// Lógica para cambiar la vista en FullCalendar
// Por ejemplo, utiliza métodos de FullCalendar para cambiar la vista
// como: calendar.changeView(vista);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="miTabla" class="display" style="width:100%">
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<!-- ... otras columnas ... -->
</tr>
</thead>
<tbody>
<tr>
<td class="celda-clicable">Contenido 1</td>
<td class="celda-clicable">Contenido 2</td>
<!-- ... otras celdas ... -->
</tr>
<!-- ... otras filas ... -->
</tbody>
</table>
Ten en cuenta que el código para cambiar la vista en FullCalendar (cambiarVistaFullCalendar
) dependerá de cómo estés inicializando y utilizando FullCalendar en tu proyecto. Asegúrate de reemplazar la llamada a cambiarVistaFullCalendar
con la lógica adecuada para cambiar la vista en tu aplicación.