时间戳

首页 > 解决方案 > 如果事件在 MySQL DB 中设置为不显示，如何禁用 FullCalendar 上的模式？

javascript - 如果事件在 MySQL DB 中设置为不显示，如何禁用 FullCalendar 上的模式？

问题描述

我目前正在尝试在我的完整日历中插入一个函数，由于数据库中的事件设置了一个变量，我希望不显示模式。

我的目标如下：

我的日历.js：

var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'de',
    defaultView: 'timeGridWeek',
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'timeGridWeek,listMonth'
    },
    navLinks: false, // can click day/week names to navigate views
    businessHours: false, // display business hours
    editable: true,
    //uncomment to have a default date
    //defaultDate: currentTime,
    defaultDate: '2020-11-16',
    events: url+'api/load.php',
    eventClick: function(arg) {
        var id = arg.event.id;
        var eventOpen = arg.event.open;
        
        $('#editEventId').val(id);
        $('#editOpen').val(eventOpen);

        $.ajax({
          url:url+"api/getevent.php",
          type:"POST",
          dataType: 'json',
          data:{id:id},
          success: function(data) {
                $('#editEventTitle').val(data.title);
                $('#editStartDate').val(data.start);
                $('#editEndDate').val(data.end);
                $('#editColor').val(data.color);
                $('#editTextColor').val(data.textColor);
                $('#editOpen').val(data.open);
                $('#editeventmodal').modal();
            }
        });

        if (eventOpen == 'no') {
            $('#editeventmodal').modal('hide');
        }

        calendar.refetchEvents();
    }
});

我的 get event.php（open 是带有“no”或“yes”的未显示值）：

<?php
include("../config.php");
if (isset($_POST['id'])) {
  $row = $db->row("SELECT * FROM tbl_events where id=?", [$_POST['id']]);
  $data = [
    'id'        => $row->id,
    'title'     => $row->title,
    'start'     => date('d-m-Y H:i:s', strtotime($row->start_event)),
    'end'       => date('d-m-Y H:i:s', strtotime($row->end_event)),
    'color'     => $row->color,
    'textColor' => $row->text_color,
    'open'      => $row->open
  ];
  echo json_encode($data);
 }
 ?>

我的 index.php 表单的开头：

<div class="modal fade" id="editeventmodal" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <h5 class="modal-title">Für Event 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="container-fluid">

                <form id="editEvent" class="form-horizontal">
                <input type="hidden" id="editEventId" name="editEventId" value="">
                <input type="hidden" id="editOpen" name="editOpen" value="">

谢谢你的帮助。

标签： javascriptphpmysqlajaxfullcalendar

解决方案

这一点：

if (eventOpen == 'no') {
            $('#editeventmodal').modal('hide');
}

没有意义，因为

a) 它依赖于eventOpen哪个试图在 fullCalendar 事件对象上使用一个值

  1. 将不存在，因为自定义属性存储在 event 的 extendedProps 集合中，并且
  2. 如您所说，没有使用数据库中的值。

也因为

b) 在进行检查之前，它不会等待 AJAX 调用完成- 所以即使它依赖于数据库中的正确属性，该值也不存在，模态也不存在 - 它会尝试隐藏模态在它被展示之前！

如果您不想显示模态，还有什么意义？显示然后立即再次隐藏只是浪费代码和时间。

这将更具逻辑意义，并且看起来应该可以工作：

eventClick: function(arg) {
    var id = arg.event.id;

    $.ajax({
      url: url+"api/getevent.php",
      type: "POST",
      dataType: "json",
      data: { id: id },
      success: function(data) {
        //only populate and show the modal if the event was a "show"
        if (data.open == "yes")
        {
            $('#editEventId').val(id);
            $('#editOpen').val(data.open);
            $('#editEventTitle').val(data.title);
            $('#editStartDate').val(data.start);
            $('#editEndDate').val(data.end);
            $('#editColor').val(data.color);
            $('#editTextColor').val(data.textColor);
            $('#editOpen').val(data.open);
            $('#editeventmodal').modal();
        }
        else {
          alert("Event is a no-show");
        }
      }
    });
}

还不清楚为什么calendar.refetchEvents()在这种情况下会有所帮助，因为在运行时，您无法更改日历或数据库中的任何数据。所以我删除了那个。

推荐阅读