DragDropCalender

A JavaScript frontend Calender which supports drag and drop

License: MIT

Installation

This module is installed via npm:

$ npm install npm install drag-drop-calender

Example

Creation

You have to register at least the onConfigureEventNode event which handels the visual represenation of the event in the DOM.

var Calender = require('drag-drop-calender');
var config = {
        startDate: new Date(),
        startHourOfDay: 14,
        endHourOfDay: 24,
        canDragAndDrop: true
    };
var calender = new Calender(config);
calender = new Calender(config);
calender.on("onConfigureEventNode", configureEventNode);
function configureEventNode(node, event){
  node.innerHTL = event.name;
  return node
}

Config

You can configure the calender with a map of proberties.

config.startDate the date which represents the first date diplayed in the calender.

config.startHourOfDay the first hour of the day diplayed in the calender.

config.endHourOfDay the last hour of the day diplayed in the calender. Must be smaller 24.

config.canDragAndDrop When true it is possible to drag events to another date. Use the onValidateEvent to validate and onUpdateEvent to update the event.

Add events.

An event have to have at least the proberty date and duration. An idproberty helps you to keep track of the event when it is updated or validated.

var event = {
  date: new Date(),
  duration: 80,
  eventid: 1
};
calender.addEvent(event);
var events = [event];
calender.addEvents(events);

Remove all events

  calender.clearAllEvents();

Update event

If you use drag and drop you have to register the onUpdateEvent event to update your model when a user changes an event.

  calender.on("onUpdateEvent", didUpdateEvent);
  function didUpdateEvent(event)  {
  	//Update your model
  	//event.date is the new date	
  }

Validate event

If you use drag and drop you can register the onValidateEvent event to validate the new event. This event is asynchronous, so pass your validation result to the callback.

  calender.on("onValidateEvent", onValidate);
  function onValidate(event, callback)  {
  	service.validateEvent(event, didValidate);
  	function didValidate(err, isValid) {
  		callback(isValid);
  	}
  }