小贝子编程

将事件添加到完整日历中的日历



我又遇到了一个问题，无法真正解决。我想知道你可以预约，我已经有了下面的脚本。不幸的是，日历中没有输入任何条目：-(有人能帮我吗？(？我已经问了很多关于谷歌和公司的问题。不幸的是，我没有真正的帮助。可能是我已经使用了eventRender，然后想在下面再次使用它吗？

这里有一次我的代码：

<link rel='stylesheet' href='kalender2/fullcalendar.css' />
<script src='kalender2/fullcalendar.js'></script>
<script src='kalender2/locale/de.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="kalender2/lib/hour.js"></script>
<script>
var CalenderEvent;
var datenPruefenDatenSenden;
var terminPruefenDatenSenden;
var datenPruefenDatenVerarbeiten;
var termin_nachberechnung;
var TerminAddZeit;
var AddEventToCalener;
$(document).ready(function() {
function DeleteEvent(id){
SendFormData(id,'',"delete");
$('#calendar').fullCalendar('removeEvents',id);
}
var initialLocaleCode = 'de';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
dayClick: function(date, jsEvent, view) {
$('#calenderAdEvent').modal('show');
$('#start_date_add_day').val(date.format('DD.MM.YYYY'));
$('#start_date_add_time').val(date.format('HH:mm'));
},
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
$el.html(eventObj.title + '<span class="removebtn" onclick="DeleteEvent('+eventObj.id+');" id="Delete">X</span>');
$el.find(".removebtn").click(function() {
$('#calendar').fullCalendar('removeEvents',eventObj.id);
});
},
businessHours: [
<?php echo $Offen;?>
],
eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
var Alertback = SendFormData(event.id,$.fullCalendar.moment(event.start._d), $.fullCalendar.moment(event.end._d),"update");
alert(Alertback);
},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) { 
var Alertback = SendFormData(event.id,$.fullCalendar.moment(event.start._d), $.fullCalendar.moment(event.end._d),"update");
alert(Alertback);
},
timezone: 'Europe/Berlin',
nowIndicator: true,
now: '<?php echo date("Y-m-d", time() ) .'T'. date("H:i:s");?>',
locale: 'de',
buttonIcons: true, // show the prev/next text
defaultView: 'agendaWeek',
defaultDate: '<?php echo date("Y-m-d", time() );?>',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: true,
droppable: true,
events: [
<?php echo $aus;?>
],
timeFormat: 'H(:mm)',
eventClick: function(event, jsEvent, view) {
CalenderEvent = event;
$('#id_termin').val(event.id);
$('#name').val(event.title);
$('#Time_Event').val(event.TimeEvent);
$('#description').val(event.description);
$('#start_date_day').val(moment(event.start).format('DD.MM.YYYY'));
$('#start_date_time').val(moment(event.start).format('HH:mm'));
if(event.end) {
$('#end_date_day').val(moment(event.end).format('DD.MM.YYYY'));
$('#end_date_time').val(moment(event.end).format('HH:mm'));
} else {
$('#end_date_day').val(moment(event.end).format('DD.MM.YYYY'));
$('#end_date_time').val(moment(event.end).format('HH:mm'));
}
$('#event_id').val(event.id);
$('#calenderEditEvent').modal();
}
});
datenPruefenDatenSenden = function(){
var start = $('#start_date_day').val()+'//'+$('#start_date_time').val();
var end = $('#end_date_day').val()+'//'+$('#end_date_time').val();
var erg = SendFormData($("#id_termin").val(),start,end,'TerminEditSave');
$('#calenderEditEvent').modal('hide');
CalenderEvent.start = moment($('#start_date_day').val()+' '+$('#start_date_time').val(), "DD.MM.YYYY HH:MM");
CalenderEvent.end = moment($('#end_date_day').val()+' '+$('#end_date_time').val(), "DD.MM.YYYY HH:MM");
$('#calendar').fullCalendar('updateEvent', CalenderEvent);
}
datenPruefenDatenVerarbeiten = function (daten){
if(daten == 1){$('#submit_erg').html('<div class="alert alert-danger">Termin&uuml;berschneidung</div><button class="btn btn-info" onclick="terminPruefenDatenSenden();">Erneut pr&uuml;fen</button>');}
$('#submit_button').html('<button type="button" class="btn btn-warning" onclick="datenPruefenDatenSenden();">Termin Speichern</button>');
}
terminPruefenDatenSenden = function (){
$('#submit_erg').html('');
var start = $('#start_date_day').val()+'//'+$('#start_date_time').val();
var end = $('#end_date_day').val()+'//'+$('#end_date_time').val();
var erg = SendFormData($("#id_termin").val(),start,end,'pruefen');
}
termin_nachberechnung = function (){
var TimePlus = new Hour($('#Time_Event').val());
var zeit = new Hour($('#start_date_time').val()+':00');
$('#end_date_time').val(zeit.add(TimePlus));
}
TerminAddZeit = function (){
var erg = SendFormData($("#id_termin_add").val(),$('#start_date_add_time').val(),'','TimePlus');
$('#start_date_add_time_end').val(erg);
}
AddEventToCalener = function(){
var Start = moment($('#start_date_add_day').val()+' '+$('#start_date_add_time').val(), "DD.MM.YYYY HH:MM");
var End = moment($('#start_date_add_day').val()+' '+$('#start_date_add_time_end').val(), "DD.MM.YYYY HH:MM");
var event = new Object();
event = {
title: 'Testtermin',
start: Start,
end: End,
allDay: false,
};
console.log(event);
$('#calendar').fullCalendar('renderEvent', event);
}
});
$(function() {
$('[data-toggle="datepicker_bearbeiten"]').datepicker({
autoHide: true,
format: 'dd.mm.yyyy',
zIndex: 2048,
});
});
function SendFormData(id,start,end,aufruf){
var erg;
if(aufruf == 'update'){start = start/1000;end = end/1000;}
$.ajax({type: "post",url: "kalender2/kalender.class.php",data : {id : id,sta : start,end : end,aufruf : aufruf}
}).done(function( dataEnd ){if(aufruf == 'pruefen'){datenPruefenDatenVerarbeiten(dataEnd);}erg = dataEnd;});
return erg;
}

</script>
<div id='calendar'></div>
<div class="modal" id="calenderAdEvent" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Termin eintragen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Datum</span>
</div>
<input type="text" id="start_date_add_day" name="start_date_add_day" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Dienstleistung</span>
</div>
<select class="custom-select" id="id_termin_add">
<option selected>bitte w&auml;hlen</option>
<?php echo $dienst;?>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Termin von</span>
</div>
<input type="text" id="start_date_add_time" name="start_date_add_time" class="form-control">
<div class="input-group-append">
<span class="input-group-text">-</span>
</div>
<input type="text" name="start_date_add_time_end" id="start_date_add_time_end" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Kundenname</span>
</div>
<input type="text" list="kunden" id="KundenName" name="KundenName" class="form-control" onkeyup="KundenListe();">
<datalist id="kunden">
<?php echo $KundenListe;?>
</datalist>
<div class="input-group-append">
<span class="input-group-text">oder KN</span>
</div>
<input type="text" name="KIDTerminBuchen" id="KIDTerminBuchen" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="AddEventToCalener();">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="calenderEditEvent" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Termin bearbeiten</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Start</span>
</div>
<input type="text" name="termin" id="start_date_day" class="form-control" data-toggle="datepicker_bearbeiten">
<input type="text" id="start_date_time" onkeyup="termin_nachberechnung('Hallo');" class="form-control datetimepicker-input" data-target="#datetimepicker3" data-target-input="nearest"/>
<div class="input-group-append">
<span class="input-group-text">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHfSURBVEhLzZW9L91hFMcvaby0HUi9VKJNE2ZbvWxERQdTO5h0YLCQWLAykehUJAYWIWZSjBJtojqQog1TUyotwl8g+HyfU7fXffm9Mfgkn+ScJzf3/J7n+Z3zi90HHuBrnMBveITneIhfcRhrMDJvcA8/Yw9W4RPMxqdYiwP4A1cwVLFcnMYNrNdCAtrZOwvjqGgb7mOfFvzIwU84g3laSOI5/rIwhTJcw1GXeaAdqECWy1LxKiIeok6gy2VpeIubmG4H1/gVEeX4FytcloDOehcbXJaZIEWE7mbOwv/oNV210JOgRXQap1jisn+oD/Sa+hG0iJjFDguNLVQf+BGmiApMWmgcoxrNDz3dBfa7zJsmXLbQ0KhQU3mhJlWBS9zWgg/VqL6J8wdLLcxIJ+p3O9iqBR9acN5CYx01izKhAj/xhcuCoYYct9AYwkELU4hSQHxEDdk4Or/vmHwvypcwbIFiPMPHLktA4zp5wkblA45YeBPtRuNa0/Q26G41uwpdloZe/IKPXBYeNetvbHSZB2Oocf3MZcGpwwO8MUq80Oun77l2lq8FD4pQD6bv/isthKESNa5PUB+ydmzGl6hG68ZF1LR9jwUYGY1rHcEU6k/VuAuoRlMfRL2/uyQWuwKiRlWN6WWKKwAAAABJRU5ErkJggg==">
</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Ende</span>
</div>
<input type="text" name="termin" id="end_date_day" class="form-control" data-toggle="datepicker_bearbeiten">
<input type="text" id="end_date_time" class="form-control datetimepicker-input" data-target="#datetimepicker3" data-target-input="nearest"/>
<div class="input-group-append">
<span class="input-group-text">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHfSURBVEhLzZW9L91hFMcvaby0HUi9VKJNE2ZbvWxERQdTO5h0YLCQWLAykehUJAYWIWZSjBJtojqQog1TUyotwl8g+HyfU7fXffm9Mfgkn+ScJzf3/J7n+Z3zi90HHuBrnMBveITneIhfcRhrMDJvcA8/Yw9W4RPMxqdYiwP4A1cwVLFcnMYNrNdCAtrZOwvjqGgb7mOfFvzIwU84g3laSOI5/rIwhTJcw1GXeaAdqECWy1LxKiIeok6gy2VpeIubmG4H1/gVEeX4FytcloDOehcbXJaZIEWE7mbOwv/oNV210JOgRXQap1jisn+oD/Sa+hG0iJjFDguNLVQf+BGmiApMWmgcoxrNDz3dBfa7zJsmXLbQ0KhQU3mhJlWBS9zWgg/VqL6J8wdLLcxIJ+p3O9iqBR9acN5CYx01izKhAj/xhcuCoYYct9AYwkELU4hSQHxEDdk4Or/vmHwvypcwbIFiPMPHLktA4zp5wkblA45YeBPtRuNa0/Q26G41uwpdloZe/IKPXBYeNetvbHSZB2Oocf3MZcGpwwO8MUq80Oun77l2lq8FD4pQD6bv/isthKESNa5PUB+ydmzGl6hG68ZF1LR9jwUYGY1rHcEU6k/VuAuoRlMfRL2/uyQWuwKiRlWN6WWKKwAAAABJRU5ErkJggg==">
</span>
</div>
</div>
<input type="hidden" id="id_termin">
<input type="hidden" id="Time_Event">
</div>
<div class="modal-footer">
<span id="submit_erg"></span>
<span id="submit_button"><button type="button" class="btn btn-info" onclick="terminPruefenDatenSenden();">Pr&uuml;fen</button></span>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

我还做了一些测试。一旦我取出eventRender: function (eventObj, $ el) { ........ },，我就成功地使用了函数AddEventToCalener = function () { $ ('# calendar'). fullCalendar ('renderEvent', { title: 'dynamic event', start: '2018-11-26', allDay: true }); }。

但一旦我再次插入eventRender，我就会收到以下消息：

错误：TOOTIP:选项"内容"提供的类型"未定义"，但预期类型"(字符串|元素|函数(">

所以问题仍然是事件没有输入到日历中。控制台通过console.log 向我提供以下内容

{…} ​ allDay: false ​ end: Object { _isAMomentObject: true, _i: "26.11.2018 12:00", _f: "DD.MM.YYYY HH:MM", … } ​ start: Object { _isAMomentObject: true, _i: "26.11.2018 11:30", _f: "DD.MM.YYYY HH:MM", … } ​ title: "Testtermin" ​ <prototype>: Object { … }

由于缺少字段，您的代码无法添加事件。

在eventRender函数中，您创建了一个popover，popover尝试从事件中读取一个名为"description"的属性：

content: eventObj.description

但是，AddEventToCalener((函数定义了这样一个事件：

event = {
title: 'Testtermin',
start: Start,
end: End,
allDay: false,
};

在这种情况下，没有指定"说明"字段。这意味着它是未定义的，因此当eventRender运行并试图创建popover时，它会崩溃，因为它无法读取该字段。(我从错误消息中知道这一点——popover代码似乎被编程为检查"内容"选项中给定的值的类型，并且只接受字符串、HTML元素或函数——它不会接受未定义的变量。(

要使eventRender/popover代码工作，您需要为字段指定一些内容，即使它只是一个空字符串：

event = {
title: 'Testtermin',
start: Start,
end: End,
allDay: false,
description: ""
};

此外，您的momentJS解析字符串不正确，而不是

"DD.MM.YYYY HH:MM"

应该是

"DD.MM.YYYY HH:mm"

因为MM表示月份，而mm表示分钟。看见http://momentjs.com/docs/#/parsing/string-文件格式/。

Fullcalendar v5

let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
dateClick: function(date) {
console.log(date);
console.log(date.jsEvent);
console.log(date.view);
},
})

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium