Drag & drop
Calendar events can be created, moved and resized on the Eventcalendar. Furthermore it is possible to drag and drop events from an external source or to drag and drop to an external target from the Eventcalendar. The following sections describe how these solutions can be implemented and used.
Internal drag/resize/create
The events on the Eventcalendar can be moved and resized with mouse/touch interactions. The dragToMove
and dragToResize
options enable the events drag and drop and resize functionality. With the dragTimeStep
option the minimum amount of drag/resize step can be specified in minutes.
With the dragToCreate
option enabled, events can be created by dragging on the empty areas of the Eventcalendar. On a desktop environment a new event can also be created with the clickToCreate
option.
To customize the newly created event use the extendDefaultEvent
option.
Targeting the Eventcalendar
There is a possibility to drag & drop any external element into your calendar.
In order to achieve this, first you need to grant permission to your calendar to accept this behavior. You can do that by setting the externalDrop
option to true
.
As a second step, you'll have to create your external draggable element and pass a skeleton event definition through the dragData
option which will be added to the Eventcalendar on drop. If omitted, a default event will be created.
Draggable
You can initialize the draggable containers by using the mbsc-draggable
directive on the element.
<div mbsc-draggable [dragData]="myEvent">
<div>My Draggable event</div>
</div>
<mbsc-eventcalendar [externalDrop]="true"></mbsc-eventcalendar>
import { MbscCalendarEvent } from '@mobiscroll/angular';
@Component({...})
export class MyComponent {
myEvent: MbscCalendarEvent = {
title: "My new 3h long event",
start: new Date(2023, 10, 10, 12),
end: new Date(2023, 10, 10, 15),
color: "green",
};
}
Draggable options
context
string | HTMLElement
Specify where the dragged element will be appended in the DOM.
dragData
string | MbscCalendarEvent | MbscResource
The data of the dragged element.
The MbscCalendarEvent
type has the following properties:
allDay
: boolean - Specifies if the event is all day or not.bufferAfter
: number - Defines a buffer time in minutes that will be displayed after the end of the event.bufferBefore
: number - Defines a buffer time in minutes that will be displayed before the start of the event.cellCssClass
: string - CSS class for the day cell. Only applicable for the calendar view.color
: string - Background color of the eventcssClass
: string - Specifies a custom CSS class that is applied to the event. Useful when customization is needed on the event level. For example: setting the width for specific events.date
: string | object | Date - Specifies a single date for the eventdragBetweenResources
: boolean - Specifies whether the event is movable across resources.dragBetweenSlots
: boolean - Specifies whether the event is movable across across slots.dragInTime
: boolean - Specifies whether the event is movable in time.editable
: boolean - Specifies if an event is editable or not. If false, drag & drop and resize is not allowed.end
: string | object | Date - Specifies the end date/time of a date/time range for the eventid
: string | number - A unique id for the event. If not specified, the event will get a generated id.order
: number - Specifies the order of the event in the array. Has precedence over the default ordering rules.overlap
: boolean - Specifies whether the event can be overlapped. Has precedence over theeventOverlap
property of the resource and the eventOverlap option.recurring
: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring events.recurringException
: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.recurringExceptionRule
: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.resize
: boolean - Specifies whether the event is resizable. Has precedence over theeventResize
property of the resource and the dragToResize option.resource
: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the event. The event will be displayed only on the specified resource. If there is no resource defined, it will be displayed on every resource.slot
: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the event. The event will be displayed only on the specified slot. If there is no slot defined, it will be displayed on every slot.start
: string | object | Date - Specifies the start date/time of a date/time range for the eventtextColor
: string - A color applied on the text.timezone
: string - Timezone of the eventtitle
: string - The title of the event.tooltip
: string - The tooltip text of the event.
The MbscResource
type has the following properties:
background
: string - Specifies the background color of the resource row or column.children
: Array<MbscResource> - Child resources.collapsed
: boolean - Specifies the displayed state of the child resource group.color
: string - Specifies the default event color of the resource. If an event has an explicit color set, the resource color will be overridden. If the color is not set, the events of the resource will inherit the default calendar color.cssClass
: string - Specifies a css class for the resource row or column.eventCreation
: boolean - Disables event creation on specific resources by setting it to false. Defaults to true.eventDragBetweenResources
: boolean - Specifies whether the events in this resource are movable across resources. It applies for scheduler and timeline views. Has precedence over the dragBetweenResources option.eventDragBetweenSlots
: boolean - Specifies whether the events in this slot are movable across slots. Has precedence over the dragBetweenSlots option.eventDragInTime
: boolean - Specifies whether the events in this resource are movable in time. Has precedence over the dragInTime option.eventOverlap
: boolean - Specifies whether the events in this resource can be overlapped. Has precedence over the eventOverlap option.eventResize
: boolean - Specifies whether the events in this resource are resizable. Has precedence over the dragToResize option.fixed
: boolean - Specifies whether the resource is fixed to the top. It applies for timeline view ifresolutionVertical
in view option is not given, or it's value is set tonone
. Consider that the fixed resources always have to be the first elements of the array in a sequence (no non-fixed resources inserted in between) so that the dra & rop and event creation functionalities to work properly.id
: string | number - The id of the resource.name
: string - Specifies the name of the resource.reorder
: boolean - Specifies whether the resource can be dragged and reordered. It applies for timeline view ifresourceReorder
in view option is enabled.
element
HTMLElement
The HTML element of the dragged item.
type
"event" | "resource"
Specify the type of the draggable element
The Eventcalendar as source
The externalDrag
option enables events to be dragged out from the calendar/schedule/timeline views and dropped on another instance of the Eventcalendar or any Dropcontainer.
When an event leaves the Eventcalendar the onEventDragLeave
life-cycle event will be fired and a clone of the calendar event will be displayed for a better illustration of the movement. If the dragToMove
option is not enabled the dragged event will instantly leave the calendar container and the onEventDragLeave
event will fire and the event clone will be displayed. When an event enters the Eventcalendar the onEventDragEnter
life-cycle event will be fired.
Dropcontainer
The Dropcontainer defines a container where events can be dragged from or dropped to. The onItemDragLeave
and onItemDragEnter
life-cycle events can be used to track when an event exits or enters the Dropcontainer. When an item is dropped inside the container the onItemDrop
event is triggered. This can be useful for unscheduling work or appointments that were already scheduled.
<mbsc-dropcontainer (onItemDrop)="unscheduleEvent($event)">
<div>My Unscheduled events:</div>
<ul>
<li *ngFor="let event of myUnscheduledEvents" mbsc-draggable [dragData]="event">
<div>{{event.title}}</div>
</li>
</ul>
</mbsc-dropcontainer>
<mbsc-eventcalendar [externalDrop]="true" [externalDrag]="true" [dragToCreate]="true" [dragToMove]="true"
(onEventCreate)="scheduleEvent($event)"></mbsc-eventcalendar>
import { MbscCalendarEvent, MbscEventCreateEvent, MbscItemDragEvent } from '@mobiscroll/angular';
@Component({...})
export class MyComponent {
myUnscheduledEvents: MbscCalendarEvent[] = [{
id: 1,
title: "My new 3h long event",
start: new Date(2023, 10, 10, 12),
end: new Date(2023, 10, 10, 15),
color: "green",
}];
unscheduleEvent(dropEvent: MbscItemDragEvent) {
this.myUnscheduledEvents = [...this.myUnscheduledEvents, dropEvent.data]
}
scheduleEvent(args: MbscEventCreateEvent) {
this.myUnscheduledEvents = this.myUnscheduledEvents.filter(item => item.id !== args.event.id);
}
}
Dropcontainer events
onDestroy
(args: any, inst: any) => void
Triggered when the component is destroyed.
Parameters:
args - The event argument object.
inst - The component instance.
onInit
(args: any, inst: any) => void
Triggered when the component is initialized.
Parameters:
args - The event argument object.
inst - The component instance.
onItemDragEnter
(args: MbscItemDragEvent) => void
Triggered when an event is dragged into the calendar/timeline/schedule view.
Parameters:
- args - The event argument with the following properties:
domEvent
: Event - The DOM event of the drag.data
: MbscCalendarEvent | MbscResource - The dragged data.dataType
: 'event' | 'resource' - The type of the dragged item.
onItemDragLeave
(args: MbscItemDragEvent) => void
Triggered when an event is dragged into the calendar/timeline/schedule view.
Parameters:
- args - The event argument with the following properties:
domEvent
: Event - The DOM event of the drag.data
: MbscCalendarEvent | MbscResource - The dragged data.dataType
: 'event' | 'resource' - The type of the dragged item.
onItemDrop
(args: MbscItemDragEvent) => void
Triggered when an event is dropped inside the drop container.
Parameters:
- args - The event argument with the following properties:
domEvent
: Event - The DOM event of the drag.data
: MbscCalendarEvent | MbscResource - The dragged data.dataType
: 'event' | 'resource' - The type of the dragged item.