英文:
Two Problems with fullcalendar
问题
我有两个关于fullcalendar的问题，我无法解决。
第一个问题是，当我添加或更新事件时，我调用refetchEvents()函数，但它在控制台上给我以下错误，并且不更新事件：
Uncaught TypeError: Cannot read properties of undefined (reading 'refetchEvents')
我调用refetchEvents()的代码如下：
function agregarRegistro(registro) {
$.ajax({
type: 'POST',
url: 'datoseventos.php?accion=agregar',
data: registro,
success: function(msg) {
calendario1.refetchEvents();
},
error: function(error) {
calendario1.refetchEvents();
}
});
}
其中calendario1 被调用如下：
var calendario1;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendario1');
var taller = '<?php echo $tare;?>';
var user = '<?php echo $ctrl_user;?>';
var userfiltro = '0';
var calendario1 = new FullCalendar.Calendar(calendarEl, {
// 其他配置项...
});
});
第二个错误是当我加载约会（来自数据库）时。问题是约会加载得很好，但时间显示不正确。例如，如果约会在6月16日07:00开始，我从数据库中确实收到了这个时间：
{"allDay":false,"title":"yyyyyyyy","start":"2023-06-16T07:00:00Z","end":"2023-06-16T10:00:00Z","id":"8281","backgroundColor":"#FFFF00","textColor":"#ffffff","extendedProps":{"descripcion":"","idtra":"0","iduser":"88","tipo_parte":"0"}}
然而，在模态框的时间选择器中，我得到了09:00。如果我通过控制台打印它，它也给我9。
LA HORA ES 09:00
我的模态框代码如下：
<div class="modal fade" id="FormularioEventos" tabindex="-1" role="dialog">
<!-- 其他模态框内容... -->
</div>
JavaScript代码如下：
eventClick: function(info) {
// 其他处理...
console.log("LA HORA ES " + moment(info.event.start).format("HH:mm"));
// 其他处理...
$("#FormularioEventos").modal();
}
请注意，这只是提供给您的代码的翻译部分，没有其他内容。
英文:
I have two problems with fullcalendar that I can't solve.
The first is that when I add or update an event, I call the refetchEvents() function but it gives me the following error on the console and doesn't update the events:
Uncaught TypeError: Cannot read properties of undefined (reading 'refetchEvents')
The code where I call refetchEvents():
function agregarRegistro(registro) {
$.ajax({
type: 'POST',
url: 'datoseventos.php?accion=agregar',
data: registro,
success: function(msg) {
calendario1.refetchEvents();
},
error: function(error) {
//alert("Hay un problema:" + error);
calendario1.refetchEvents();
}
});
}
Where calendario1 is called:
var calendario1;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendario1');
var taller = '<?php echo $tare;?>'
var user = '<?php echo $ctrl_user;?>'
var userfiltro = '0'
var calendario1 = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
initialView: 'resourceTimelineDay',
aspectRatio: 1.5,
locale: 'es',
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'datoseventos.php?accion=listarempleados&taller=' + taller + '&user=' + user + '&user_filtro=' +userfiltro,
//resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'datoseventos.php?accion=listar&taller=' + taller + '&user=' + user + '&user_filtro=' +userfiltro,
The second error is when I load the appointments (From a database). The problem is that the appointment loads fine, but the time is not displayed correctly. For example, if the appointment starts on June 16 at 07:00 I correctly receive this from the database:
{"allDay":false,"title":"yyyyyyyy","start":"2023-06-16T07:00:00Z","end":"2023-06-16T10:00:00Z","id":"8281","backgroundColor":"#FFFF00","textColor":"#ffffff","extendedProps":{"descripcion":"","idtra":"0","iduser":"88","tipo_parte":"0"}}
However, in the time selector of the modal, I get 09:00. If I print it through the console, it also gives me 9.
LA HORA ES 09:00
My Modal:
<div class="modal fade" id="FormularioEventos" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" id="Codigo">
<input type="hidden" id="idveh">
<input type="hidden" id="tiempocita" value="60">
<div class="form-row">
<div class="form-group col-md-12">
<label>Titulo de la Cita:</label>
<input type="text" id="Titulo" class="form-control" placeholder="">
<input type="hidden" id="idtall" name="idtall" value="<?php echo $tare ?>">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Empleado que ejecuta el trabajo:</label>
<?php
$comprobar_user = mysqli_query($mysqli,"SELECT * FROM usuarios WHERE id_empresa = '$id_empresa' AND idtaller = '$tare'");
echo "<select class='custom-select' name='iduser' id='iduser'>";
?>
<option value='0' <?php if($ctrl_user == 0){ echo "selected"; } ?>>Todos</option>
<?php
while ($fila1=mysqli_fetch_array($comprobar_user)) {
echo "<option value='".$fila1["id"]."' ".$marcaidtaller.">".$fila1["nombre"]." </option>";
}
echo "</select>";
?>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Fecha de Inicio:</label>
<div class="input-group" data-autoclose="true">
<input type="date" id="FechaInicio" value="" class="form-control" />
</div>
</div>
<div class="form-group col-md-6" id="TituloHoraInicio">
<label>Hora de inicio:</label>
<div class="input-group clockpicker" data-autoclose="true">
<input type="text" id="HoraInicio" value="" class="form-control" autocomplete="off" />
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Fecha de Fin:</label>
<div class="input-group" data-autoclose="true">
<input type="date" id="FechaFin" value="" class="form-control" />
</div>
</div>
<div class="form-group col-md-6" id="TituloHoraFin">
<label>Hora de fin:</label>
<div class="input-group clockpicker" data-autoclose="true">
<input type="text" id="HoraFin" value="" class="form-control" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<label>Descripcion :</label>
<textarea id="Descripcion" rows="3" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Color de Fondo:</label>
<select id="ColorFondo" class="form-control" style="height:36px;">
<option value="#0000FF" id="option-1" selected>Azul</option>
<option value="#00008B" id="option-6">Azul Oscuro</option>
<option value="#FFFF00" id="option-5">Amarillo</option>
<option value="#808080" id="option-4">Gris</option>
<option value="#00FF00" id="option-10">Lima</option>
<option value="#FFA500" id="option-8">Naranja</option>
<option value="#000000" id="option-9">Negro</option>
<option value="#808000" id="option-7">Oliva</option>
<option value="#F8B88B" id="option-12">Pastel</option>
<option value="#FF0000" id="option-3">Rojo</option>
<option value="#FF00FF" id="option-11">Rosa</option>
<option value="#008000" id="option-2">Verde</option>
</select>
</div>
<div class="form-group">
<label>Color de Texto:</label>
<input type="color" value="#ffffff" id="ColorTexto" class="form-control" style="height:36px;">
</div>
</div>
<div class="modal-footer">
<button type="button" id="BotonAgregar" class="btn btn-success">Agregar</button>
<button type="button" id="BotonModificar" class="btn btn-success">Modificar</button>
<a href="javascript:void(0)" target="_blank" id="BotonOt" class="btn btn-success">Abrir Parte</a>
<button type="button" id="BotonBorrar" class="btn btn-success">Borrar</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
JS:
eventClick: function(info) {
console.log("EL RES ES "+JSON.stringify(info.event));
console.log("LA HORA ES "+moment(info.event.start).format("HH:mm"));
$('#BotonModificar').show();
if (info.event.extendedProps.idtra != 0) {
if (info.event.extendedProps.tipo_parte != 0) {
$('#BotonOt').attr("href", "./modifica_parte_contado.php?id=" + info.event.extendedProps.idtra).show();
} else {
$('#BotonOt').attr("href", "./modifica_parte_cia.php?id=" + info.event.extendedProps.idtra).show();
}
} else {
$('#BotonOt').hide();
}
$('#BotonBorrar').show();
$('#BotonAgregar').hide();
$('#Codigo').val(info.event.id);
$('#iduser').val(info.event.extendedProps.iduser);
$('#idtra').val(info.event.idtra);
$('#Titulo').val(info.event.title);
$('#Descripcion').val(info.event.extendedProps.descripcion);
$('#FechaInicio').val(moment(info.event.start).format("YYYY-MM-DD"));
$('#FechaFin').val(moment(info.event.end).format("YYYY-MM-DD"));
$('#HoraInicio').val(moment(info.event.start).format("HH:mm"));
$('#HoraFin').val(moment(info.event.end).format("HH:mm"));
$('#ColorFondo').val(info.event.backgroundColor);
$('#ColorTexto').val(info.event.textColor);
$("#FormularioEventos").modal();
},
答案1
得分: 1
首先，感谢大家的帮助。对于可能需要的人：
1)-显示错误时间的问题：
我只是将这个更改了：
timeZone: 'UTC',
改成了：
timeZone: 'local',
2)-refetchEvents()没有起作用的问题：
我实施了这个更改，我删除了调用中的VAR，原本是这样的：
var calendario1 = new FullCalendar.Calendar(calendarEl, {
现在变成了：
calendario1 = new FullCalendar.Calendar(calendarEl, {
英文:
First of all, thank you all for your help. For who may need it:
1)-The problem that the wrong time was displayed:
I just changed this:
timeZone: 'UTC',
For this:
timeZone: 'local',
2)-The problem that refetchEvents() did not serve:
I implemented I removed the VAR in the call, which was like this:
var calendario1 = new FullCalendar.Calendar(calendarEl, {
and it was like this:
calendario1 = new FullCalendar.Calendar(calendarEl, {
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论