javascript - eventDrop 和 drop fullCalendar-6ren

javascript - eventDrop 和 drop fullCalendar

转载作者：行者123 更新时间：2023-11-28 17:57:41

34

4

是否可以在 fullCalendar 中同时使用 eventDrop 和 drop。我正在使用 fullCalendar 插件。当事件落在日历上以及事件从一天更改为另一天时，我想更新一些记录。我试过如下:

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next, today',
                center: 'title',
                right: 'prevYear,nextYear '
            },
            editable: true,
            viewRender: function(view, element) {
                $('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), "");
            },
            eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
                alert(event.start.format());
            }
            drop: function(date, allDay, event) {
                alert(date.format());
            }
        });

我缺少什么？我无法同时使用 eventDrop 和 Drop

最佳答案

这是基于此处的示例:https://fullcalendar.io/js/fullcalendar-3.4.0/demos/external-dragging.html

但添加了 eventDrop 回调，以及显示回调已发生的警报。

尝试将一个事件拖到日历上 - 您会收到一条警告，例如: “下降:2017-05-24”和日期。现在将该事件从一个时间拖动到另一个时间 - 您会收到一条警告，例如: “事件转换:2017-05-01”。

请注意，“可编辑”和“可删除”都需要设置为“true”才能使所有这些正常工作。如果您打算允许事件变大或变小，或者更改开始时间，您可能还需要考虑处理“eventResize”回调(请注意，这些功能默认情况下处于启用状态，与拖放不同，因此如果您不需要它们，则必须明确将其关闭)。

$(document).ready(function() {


  /* initialize the external events
  -----------------------------------------------------------------*/

  $('#external-events .fc-event').each(function() {

    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      title: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 999,
      revert: true, // will cause the event to go back to its
      revertDuration: 0 //  original position after the drag
    });

  });


  /* initialize the calendar
  -----------------------------------------------------------------*/

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    drop: function(date, jsEvent, ui, resourceId) {
      alert("drop: " + date.format());
    },
    eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
      alert("eventDrop: " + event.start.format());
    }
  });
});

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

#calendar {
  float: right;
  width: 900px;
}

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script>
  <!--[if lt IE 9]>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<![endif]-->
  <!--[if gte IE 9]><!-->
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <!--<![endif]-->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" rel="stylesheet" media="all" />
  <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" media="all" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/gcal.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
</head>

<body>
  <div id='wrap'>

    <div id='external-events'>
      <h4>Draggable Events</h4>
      <div class='fc-event'>My Event 1</div>
      <div class='fc-event'>My Event 2</div>
      <div class='fc-event'>My Event 3</div>
      <div class='fc-event'>My Event 4</div>
      <div class='fc-event'>My Event 5</div>
    </div>

    <div id='calendar'></div>

    <div style='clear:both'></div>

  </div>
</body>

关于javascript - eventDrop 和 drop fullCalendar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44150515/

34

4

0

文章推荐： iphone - 在Objective C中初始化自定义类型的@property

文章推荐： javascript - 用于天气应用的圆形 slider

文章推荐： iOS 在 UIView 上使用部分页面 curl ，而不是 UIViewController

文章推荐： html - 表 : 1 fixed width column, 的 CSS 1 小列，其余列相等

javascript - eventDrop 完整日历不移动事件
eventDrop: function(event, delta, revertFunc) { console.log(event.title + " is moved on " + even
javascript - FullCalendar eventDrop 应该是全天
在下面的示例中， http://travelhatke.com/demo/fullcalendar/demos/spdemo.html 我需要事件始终持续一整天。即，如果事件在下降时重叠，则应移至下
jquery - 完整日历 jquery 中的 eventDrop
在fullcalendar插件的evendrop中，我想要被拖动的事件，但是如果我编写下面的代码，它会给出它被拖动的位置的事件，而不是它原来的位置的事件拖拽。 eventDrop: function(
javascript - eventDrop 和 drop fullCalendar
是否可以在 fullCalendar 中同时使用 eventDrop 和 drop。我正在使用 fullCalendar 插件。当事件落在日历上以及事件从一天更改为另一天时，我想更新一些记录。我试过如
jquery - eventDrop 在 fullCalendar 中
我是 fullCalendar 的新手，在 eventDrop 回调函数中遇到问题。在文档中，dayDelta 和 minDelta 返回 no of days 和 no of mins moved。
javascript - 在 fullcalendar eventDrop 中获取完整日期
如何从 eventDrop 获取特定职位的完整日期？完整日期示例: 当前位置:2013-12-20 拖动位置:2013-12-11 我想要“2013-12-11”形式的拖动位置。这可能吗？这是我的
javascript - FullCalendar - eventDrop UTC 日期
我已经设置了这个 FullCalendar 演示: http://jsfiddle.net/k5de79b3/ eventDrop: function(event,dayDelt
fullcalendar - 对于全天用例，eventDrop 回调日期似乎延迟了 1 天
我在 eventDrop 时将 event.start 打印到控制台。当我将一个事件拖到全天时间段时，日期会偏移一天，当我将一个正常的议程时间拖到该日期时，日期似乎没问题。例子: http://js
javascript - Firefox 15 中的完整日历 eventDrop firing eventClick
我不知道要对以下代码进行哪些更改才能使其在 Firefox 15 中运行: eventDrop: function (event, dayDelta) { updateCale
javascript - EventDrops for D3.js(来自 marmelab) - 如何调整示例代码？
我偶然发现了 EventDrops 的非 Nodejs 版本D3 的库，我能够在我自己的服务器上重现该示例。请参阅此博文 here了解更多信息和示例代码。但是，有人可以在正确的方向上避开我，或者为我
angular - fullcalendar angular - 在 eventDrop 和 eventResize 上更新数据库
我已经在一个 Angular 项目中设置了 fullcalendar，并且已经成功地从我的 api 中提取数据来填充事件: @Component({ selector: 'app-installb
javascript - 如何在 FullCalendar 中使用外部元素获取 drop 和 eventDrop 的结束时间？
我只是想知道如何获得结束时间，因为当我是 console.log(event) 时，结束时间为空，因此每当我删除任何内容时，它都应该返回一些结束时间周日历时间的事件。那么如何在删除外部元素时获取结束
fullcalendar - 如何在调用 eventDrop 时发送 ajax 请求以更新 FullCalendar UI 中的事件？
我正在尝试使用这个很棒的用户界面“FullCalender”，但我想做的是在用户移动事件时发送一个 ajax 请求来更新数据库中的事件数据。因此，如果用户想要将事件移动到日历中的不同日期，那么我需要
javascript - fullcalendar 调度程序 v4 中的 eventDrop、oldResource 和 newResource
我正在尝试最终创建一个 php 脚本来更新 mysql。当我一步步尝试设置变量并使 js 正常运行时，我在更改调度程序中的“资源”房间时遇到了困难。如果我更改事件地点并更改房间，我会收到一条 JS

首页

博学

6Ren·AI

商城

javascript - eventDrop 和 drop fullCalendar