堆栈内存溢出
  繁体   English   中英

将事件添加到日历中

[英]Add Event to Calendar in fullcalendar

 原文  2018-11-22 20:15:41  7   1    javascript/ fullcalendar/ undefined

问题描述

我又遇到了一个问题，并没有真正去解决它。 我想知道您可以输入约会，并且我已经有以下脚本。 不幸的是，日历中没有输入任何条目:-(有人可以帮我吗？我已经对google and co询问了很多。不幸的是，我没有真正的帮助点。难道我已经使用了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 }); } AddEventToCalener = function () { $ ('# calendar'). fullCalendar ('renderEvent', { title: 'dynamic event', start: '2018-11-26', allDay: true }); } AddEventToCalener = function () { $ ('# calendar'). fullCalendar ('renderEvent', { title: 'dynamic event', start: '2018-11-26', allDay: true }); }成功。

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

错误：TOOLTIP：选项“内容”提供的类型为“未定义”，但预期的类型为“（字符串|元素|函数）”

因此，问题仍然在于未在日历中输入事件。 控制台通过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 { … }

1 个解决方案

解决方案1
 0 已采纳  2018-11-26 16:34:47

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

在eventRender函数中，创建一个弹出窗口，然后弹出窗口尝试从事件中读取一个称为“ description”的属性： 

content: eventObj.description

但是，您的AddEventToCalener（）函数定义了如下事件： 

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

在这种情况下，没有指定“描述”字段。 这意味着它是未定义的，因此当eventRender运行并尝试创建弹出窗口时，由于无法读取该字段而崩溃。 （我从错误消息中知道这一点-似乎弹出代码已编程为检查“内容”选项中给定值的类型，并且仅接受字符串，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-format/ 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用全日历添加事件的日历 FullCalendar js添加事件 全日历添加事件 将是否添加到FullCalendar中的事件 将事件添加到事件日历 fullcalendar无法设法删除日历中的最后一个事件 fullcalendar addEventSource不将事件数组添加到日历 如何自定义 fullcalendar，一个 javascript 事件日历？ FullCalendar-在日历上显示完整的事件标题 FullCalendar和Google日历不会显示活动名称
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM