fullcalendar v4外部放置事件

时间:2018-07-27 12:58:54

标签: angular drag-and-drop fullcalendar

我正在使用fullcalendar的v4 Alpha版本,该版本已删除了jQuery,我可以找到的有关拖动外部事件的唯一示例与使用jQuery的v3或更早版本有关。有没有人使用v4 Alpha进行外部拖动的任何例子

我尽可能地遵循示例here

<div id="external-events">
  <div class="fc-event" ngDraggable [zIndex]="99999" [zIndexMoving]="99999" [trackPosition]="false" style="margin: 1em 0; padding: .5em; cursor: move;"
  *ngFor="let event of externalEvents" [attr.data-event]="event">An Event</div>
</div>

externalEvents数组中的每个事件都是有效的json对象

externalEvents = [
  {
    'title': 'Some Event',
    'duration': '00:30:00'
  },
  {
    'title': 'Some Other Event'
  }
]

我的事件是可拖动的,但是当拖动到日历控件上时不会反映任何内容,没有任何视觉效果,也不会触发drop事件(我的代码可以在this stackblitz中找到)

请问有人有使用fullcalendar v4 Alpha的有效示例吗?

2 个答案:

答案 0 :(得分:2)

不想回答我自己的问题,但是我现在已经弄清楚了,我错过了fullcalendar v4用于拖放的其他脚本导入,该组件本质上是使用dragula,而我没有导入dragulafullcalendar-dragula脚本。

对于陷入困境的任何人,您都可以找到有效的示例here

答案 1 :(得分:1)

好工作,尼尔!为了节省时间,这是我添加到我的angular.json文件中以使其工作的内容。如果不需要调度程序,则可以删除最后的CSS和JS条目。

# Import pandas library
import pandas as pd

# Prepare columns
x = range(0, 6)
id = ['a', 'a', 'a', 'b', 'b', 'b']

# Create dataframe from columns above
df = pd.DataFrame({'id':id, 'x':x})

# Calculate rolling sum with infinite window size (i.e. all rows in group) using "expanding"
df['rolling_sum'] = df.groupby('id')['x'].transform(lambda x: x.expanding().sum())

# Output as desired by original poster
print(df)
  id  x  rolling_sum
0  a  0            0
1  a  1            1
2  a  2            3
3  b  3            3
4  b  4            7
5  b  5           12