日历上未显示任务/约会

时间:2019-06-18 17:53:54

标签: javascript php html mysql fullcalendar

我已经成功地将任务添加到数据库中,但是由于某种原因它没有显示在完整日历上,如果可以通知该任务已添加到数据库中,也很好,它在代码中,但是保存后不显示任务

查看源代码时,数据会从数据库中提取并显示以下内容,但不会显示在日历上

更新:我已经在日历上显示了任务,但是问题是由于某种原因它们每天都在重复,但是输出仅显示任务一次,所以想知道这是否是SELECT语句上的sql查询问题,更新代码在下面

$sql = "SELECT id, title, start, startTime, end, endTime FROM tasksappointments";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    $myArray[] = $row;
}
} 
else 
{
echo "0 results";
}

更新后的全日历代码如下

<script>
  document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

    plugins: [ 'interaction', 'dayGrid' ],
defaultDate: new Date(),
editable: true,
timezone: 'Europe/London',
eventLimit: true, // allow "more" link when too many events
displayEventTime: false,
locale: "en-gb",
firstDay: 1,

    dateClick: function(info) {

  console.log("dayclick");
  $("#success-modal").modal("show");
  $("#start").val(info.dateStr);
  $("#startTime").text(info.dateStr);
  $("#end").val(info.dateStr);
  $("#endTime").text(info.dateStr);
},

    events: <?php echo json_encode($myArray); ?>,

    eventClick: function(info) {

    var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" };
  var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };

  var start = calendar.formatDate(info.event.start, dateSettings);
  var startTime = calendar.formatDate(info.event.start,  timeSettings);

 var end;
 var endTime;
 if (info.event.end != null) {
end = calendar.formatDate(info.event.end, dateSettings);
endTime = calendar.formatDate(info.event.end, timeSettings);
 } 
else {
end = start;
endTime = startTime;
}

    $('#id').html(info.event.id);
    $('#title').html(info.event.title);
    $("#start").html(start + " at " + startTime);
    $("#end").html(end + " at " + endTime);
    $("#info-modal").modal();
   },

    });

    eventTextColor: '#FFFFFF',

   calendar.render();
  });
  </script>

JSON的输出如下

events: [{"id":"3","title":"Test","start":"2019-06-19","startTime":"10:24:00","end":"2019-06-19","endTime":"11:24:00"},
{"id":"4","title":"Test Two","start":"2019-06-20","startTime":"12:25:00","end":"2019-06-20","endTime":"01:25:00"}],

更新:最后一个问题是当我创建一个日期不同的任务(例如20/06/2019)并将其保存时,该任务将保存在今天的日期(19/06/2019)。

 if(isset($_POST["submit"]) == "submit" && isset($_POST["title"]) != "")
 {
$sql = "INSERT INTO tasksappointments (title, start, end)
    VALUES ('".$_POST['title']."',
    '".date('Y-m-d H:i:s',strtotime($_POST['start']))."',
    '".date('Y-m-d H:i:s',strtotime($_POST['end']))."')";

if (mysqli_query($conn,$sql)) {
    echo "New task/appointment added successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
}

用于创建任务的HTML代码

 <label for="start">Start Date:</label>
  <input type="date" name="start" class="form-control" id="start">

  <label for="end">End Date:</label>
  <input type="date" name="end" class="form-control" id="end">

<div class='input-group date' id='datetimepicker3' data-target-input="nearest">
  <input type="text" name="start" class="form-control datetimepicker-input" id="startTime" data-target="#datetimepicker3">
    <span class="input-group-addon" data-target="#datetimepicker3" data-toggle="datetimepicker"><i class="fa fa-clock-o"></i></span>
        <script type="text/javascript">
        $(function () {
            $('#datetimepicker3').datetimepicker({
                format: 'LT',
                use24hours: true,
                format: 'HH:mm'
            });
        });
    </script>
    </div>

  <div class='input-group date' id='datetimepicker4' data-target-input="nearest">
  <input type="text" name="end" class="form-control datetimepicker-input" id="endTime" data-target="#datetimepicker4">
    <span class="input-group-addon" data-target="#datetimepicker4" data-toggle="datetimepicker"><i class="fa fa-clock-o"></i></span>
        <script type="text/javascript">
        $(function () {
            $('#datetimepicker4').datetimepicker({
                format: 'LT',
                use24hours: true,
                format: 'HH:mm'
            });
        });
    </script>
</div>

0 个答案:

没有答案