until recently I used an old version of fullcalendar, (in this case V4) in which to be able to filter events loaded from a database I used the function calendar.rerenderEvents(), this is not in version 5 and I I would like to know if there is any way to be able to filter as I did before, since the possible solutions that I have seen would be either through queries or by working with the event object loaded from the database
Next I will leave an example of how to do to be able to filter with version 4
<html>
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{$conf.titulos.inicial}</title>
<link id="logonsgs" rel='icon' type="image/ico" href='web/img/produccion.ico' />
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="web/css/material-icons.css" />
<link type="text/css" rel="stylesheet" href="web/css/material.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="web/css/materialize.css" media="screen,projection" />
<link href='librerias/fullcalendar4.4/daygrid/main.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/timegrid/main.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/list/main.css' rel='stylesheet' />
<link href='librerias/fullcalendar4.4/bootstrap/main.css' rel='stylesheet' />
<!-- <link type="text/css" rel="stylesheet" href="librerias/fullcalendar/main.css" media="screen,projection" />-->
<link type="text/css" rel="stylesheet" href="web/css/dataTables.material.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="web/css/jquery-confirm.css" />
<!-- <link type="text/css" rel="stylesheet" href="web/css/jquery.dataTables.min.css" /> -->
<!-- Scripts-->
<script src="web/js/jquery.min.js"></script>
<script src="web/js/material.min.js"></script>
<script src="web/js/jquery-3.5.1.js"></script>
<script src="web/js/jquery-confirm.js"></script>
<script src="web/js/jquery.dataTables.min.js"></script>
<script src="web/js/dataTables.material.min.js"></script>
<script src="librerias/jsPDF/jspdf.min.js"></script>
<script src="librerias/jsPDF/jspdf.debug.js"></script>
<script src='librerias/fullcalendar4.4/main.min.js'></script>
<link href='librerias/fullcalendar4.4/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href="librerias/fullcalendar4.4/icon.vc" rel="stylesheet">
</head>
<body>
<div class="mdl-grid ancho-min-500">
<div class="card mdl-shadow--4dp margen_inferior-20 util-center ancho-liberacion">
<table background="web\img\imagen2.jpg">
<tbody>
<tr>
<td width="5%"><button type="button" id="inici" class="boton_ini"><img
src="web/img/[email protected]" class="sekurit"></button></td>
<td width="32.5%"></td>
<td width="25%">
<div align="center"><label class="mdl-color-text--white">{$conf.titulos.inicial}</label>
</div>
<div align="center"><label class="mdl-color-text--white">{$conf.titulos.inicial_2} -
{$conf.botones.inicial_4}</div>
</td>
<td width="32.5%"></td>
<td width="5%"> <img src="web/img/OPEX_RVB.png" align="left" width="70" height="70"></td>
</tr>
</tbody>
</table>
<table>
<tr>
<td>
<div><label class="color_letra-negro">Linea</label></div>
<div>
<select id="Linea" class="mdl-textfield__input ">
<option value="" selected></option>
<option value="all">TODOS</option>
<option value="GT">GT</option>
<option value="BKT1">BKT1</option>
<option value="BKT2">BKT2</option>
</select>
</div>
</td>
</tr>
</table>
<div class="row no-gutters">
<div class="col">
<div id='calendar' class=""></div>
</div>
</div>
<div>
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone centro">
<br><br>
<button id="bot_salir" type="button"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<div class="mdl-tooltip" data-mdl-for="bot_salir" style="text-transform: uppercase;font-size:12px">
{$conf.mensajes.salir_1}</div>
</div>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
let calendar;
let date_picker;
let filter_linea = "all";
let filter_archivo = "all";
let filter_estado = "all";
let filter_equipo = "all";
$(document).ready(function() {
var calendarEl = $("#calendar").get(0);
let today = new Date();
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["core", "interaction", "dayGrid", "timeGrid", "list", "bootstrap",
"moment"
],
initialView: 'dayGridMonth',
locales: 'es',
initialDate: today,
timeZone: "local",
theme: "bootstrap",
showNonCurrentDates: false,
height: 900,
customButtons: {
printButton: {
icon: 'print',
click: function() {
window.print();
}
}
},
header: {
left: 'prevYear,prev,today,next,nextYear, printButton',
center: ' title ',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay,listWeek,listMonth,listYear'
},
views: {
listDay: {
buttonText: 'DIA'
},
listWeek: {
buttonText: 'SEMANA'
},
listMonth: {
buttonText: 'MES'
},
listYear: {
buttonText: 'AÑO'
}
},
defaultDate: today,
navLinks: false,
businessHours: false,
editable: false,
selectable: false,
eventLimit: false,
lazyFetching: false,
eventSources: [{
url: "web/calendario/cargareventoGTLIB.php"
}, ],
eventRender: function(info, event, element, view) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
if (filter_linea !== "all" && info.event.id !== filter_linea) {
return false;
};
var showFacilities, shownumeros = true;
var numeros = $('#numero').val();
/* filters */
if (numeros.length > 0) {
shownumeros = info.event.title.toLowerCase().indexOf(numeros) >= 0;
}
return ['all', info.event.id].indexOf($('#Linea').val()) >= 0 &&
shownumeros;
},
date_picker,
weekNumbers: true,
eventDisplay: 'block'
});
calendar.render();
//inicio
$('#inici').click(function() {
$(location).attr('href', 'index.php?acc=login_in');
});
// SALIR
$('#bot_salir').click(function() {
$(location).attr('href', 'index.php?acc=calidad');
});
$(document).on("click", ".FiltLin-container .FiltLin", function(e) {
filter_linea = $(this).val();
calendar.rerenderEvents();
});
//visible
$('#Linea').on('change', function() {
calendar.rerenderEvents();
});
});
</script>
</body>
<footer>
<img src="web/img/logosg_m.png" alt="" class="floating-logo">
</footer>
</html>
Could something similar be done with V5?
clarification:
->What I tried so far was to work with the v4 function in v5 but it gives me an error like it doesn't exist, I also tried to work with the event object showing only those that met the filters but I couldn't find this object. and I would say that the error is from Js, since everything should be in the client
->The error is that calendar.rerenderEvents is not a function, so skip adding the error