fullcalendar 拖动

fullcalendar 是一个非常流行的日历插件，它提供了拖动事件的功能。如果你想要使用 fullcalendar 的拖动功能，你需要在初始化时设置 editable 属性为 true，并将 eventDrop 和 eventResize 回调函数传递给 fullcalendar。当用户拖动或调整事件时，fullcalendar 会调用这些回调函数，以便你可以更新事件的时间和日期。示例代码如下：

$('#calendar').fullCalendar({
  editable: true, // 启用拖动和调整大小的功能
  eventDrop: function(event, delta, revertFunc) {
    // 当事件被拖动时执行的代码
  },
  eventResize: function(event, delta, revertFunc) {
    // 当事件被调整大小时执行的代码
  }
});

在 eventDrop 和 eventResize 回调函数中，你可以获取事件的 ID 和新的 start 和 end 时间，然后使用 Ajax 请求将这些更改保存到服务器上。

相关问题

php+mysql+fullcalendar日历拖动与数据保存

在使用PHP和MySQL以及FullCalendar插件实现日历拖动与数据保存时，首先需要确保已经正确安装了PHP和MySQL，并成功引入了FullCalendar插件。

为了让日历具备拖动功能，需要在FullCalendar的配置中设置"editable"属性为true。例如：

$('#calendar').fullCalendar({
  editable: true,
  // 其他配置项
});

接着，在服务器端通过PHP来处理日历事件的拖动操作。当拖动日历事件后，FullCalendar会向服务器发送一个包含被拖动事件新的日期和时间的POST请求，我们需要在PHP中接收并处理这个请求。

首先，我们创建一个PHP脚本来处理这个请求。例如，我们假设这个脚本叫做"update_event.php"：

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $event_id = $_POST['event_id'];
  $new_start_date = $_POST['new_start_date'];
  $new_end_date = $_POST['new_end_date'];

  // 在这里更新数据库中对应的事件的起止日期
  // ...

  echo json_encode(['status' => 'success']);
} else {
  echo json_encode(['status' => 'error']);
}
?>

然后，在FullCalendar的配置中，我们需要设置一个事件回调函数来处理事件的更新。例如：

$('#calendar').fullCalendar({
  // 其他配置项
  eventDrop: function(event, delta, revertFunc) {
    $.ajax({
      url: 'update_event.php',
      type: 'POST',
      data: {
        event_id: event.id,
        new_start_date: event.start.format(),
        new_end_date: event.end.format()
      },
      success: function(response) {
        console.log('Event updated successfully.');
      },
      error: function() {
        revertFunc(); // 如果更新失败，则恢复事件的原始位置
        console.log('Error updating event.');
      }
    });
  }
});

这样，当用户拖动日历中的事件时，FullCalendar会自动发送一个AJAX请求到"update_event.php"脚本，该脚本会接收并处理这个请求，然后更新数据库中对应事件的起止日期。

以上就是使用PHP、MySQL和FullCalendar实现日历拖动与数据保存的基本步骤。根据具体需求，你可能还需要在数据库中创建对应的表格来存储日历事件，并在PHP脚本中实现事件的查询、插入和删除等功能。

怎么设置fullcalendar 上方也能拖动

要在fullcalendar上方也能拖动，你需要使用jQuery UI的draggable()方法，将fullcalendar的头部元素设置为可拖动。以下是一些示例代码：

// 获取日历的头部元素
var header = $('.fc-header');

// 使头部元素可拖动
header.draggable({
    handle: '.fc-center', // 只允许在中心拖动
    axis: 'y', // 只允许在垂直方向上拖动
    stop: function() {
        // 更新日历视图
        $('#calendar').fullCalendar('render');
    }
});

在这个例子中，我们使用jQuery UI的draggable()方法将fullcalendar的头部元素设置为可拖动。我们还设置了handle选项，以便只允许在中心拖动，以及axis选项，以便只允许在垂直方向上拖动。最后，我们使用fullcalendar的render()方法来更新日历视图。