JavaScript Event Calendar

event-calendar-default-css-theme.png

DayPilot Calendar is an AJAX event calendar widget. Supports drag and drop operations (event creatingmovingresizing). Context menu, event bubble, custom event properties (menu, color, html). jQuery plugin.

Demo Download

Event Calendar Tutorials

Event Calendar Initialization

See also Event calendar tutorial.

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />

<div id="dp"></div>

<script type="text/javascript">
    var dp = new DayPilot.Calendar("dp");

    // behavior and appearance
    dp.cssClassPrefix = "calendar_white";

    // view
    dp.startDate = "2016-03-25";
    dp.days = 1;

    var e = new DayPilot.Event({
        start: new DayPilot.Date("2016-03-25T00:00:00"),
        end: new DayPilot.Date("2016-03-27T00:00:00"),
        id: DayPilot.guid(),
        text: "Event"
    });
    dp.events.add(e);
    dp.init();
</script>

Event Calendar jQuery Plugin

See also Event Calendar jQuery plugin.

<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("dp").daypilotCalendar({
cssClassPrefix: "calendar_white", startDate: "2016-03-25", days: 1
}); </script>

Event Bulk Loading

See also Event loading.

dp.events.list = [
{
  start: "2016-03-25T00:00:00",
  end: "2016-03-27T00:00:00",
  id: "1",
  text: "Event 1"
},
{
  start: "2016-03-26T12:00:00",
  end: "2016-03-27T00:00:00",
  id: "2",
  text: "Event 2"
}
];
dp.update();

Adding an Event to the Event Calendar

See also Client-side event API.

var e = new DayPilot.Event({
  start: new DayPilot.Date("2016-03-25T00:00:00"),
  end: new DayPilot.Date("2016-03-27T00:00:00"),
  id: DayPilot.guid(),
text: "Event"
});

dp.events.add(e);

Drag and Drop Event Moving

See also Event moving.

// event moving
dp.onEventMoved = function (args) {
    dp.message("Moved: " + args.e.text());
};

Drag and Drop Event Resizing

See also Event resizing.

// event resizing
dp.onEventResized = function (args) {
    dp.message("Resized: " + args.e.text());
};

Drag and Drop Event Creating

See also Event creating.

// event creating
dp.onTimeRangeSelected = function (args) {
    var name = prompt("New event name:", "Event");
    if (!name) return;
    var e = new DayPilot.Event({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: "Event"
    });
    dp.events.add(e);
    dp.clearSelection();
    dp.message("Created");
};

Time Header Customization (onBeforeTimeHeaderRender)

See also Time header customization.

dp.onBeforeTimeHeaderRender = function(args) {
    args.header.html = args.header.hours + ":" + args.header.minutes + " *";
    args.header.areas = [ {left: 0, top: 0, right: 0, bottom: 0, v: "Hover", action: "JavaScript", js: function(e) { alert(e.start);} } ];
}; 

Time Cell Customization (onBeforeCellRender)

See also Time cell customization.

dp.onBeforeCellRender = function(args) {
    if (args.cell.start.getHours() === 13) {
        args.cell.html = "break";
        args.cell.backColor = "red";
    }
};

Column Header Customization (onBeforeHeaderRender)

See also Column header customization.

dp.onBeforeHeaderRender = function(args) {
    args.header.html += "*";
};

Event Customization (onBeforeEventRender)

See also Event customization.

dp.onBeforeEventRender = function(args) {
    args.e.cssClass = "test";
    args.e.html = args.e.text + ":";
};

Event Click

See also Event click.

dp.onEventClick = function(args) {
    alert("clicked: " + args.e.id());
};

Event Context Menu

See also Event context menu.

dp.contextMenu = new DayPilot.Menu([
    {text:"Show event ID", onclick: function() {alert("Event value: " + this.source.value());} },
    {text:"Show event text", onclick: function() {alert("Event text: " + this.source.text());} },
    {text:"Show event start", onclick: function() {alert("Event start: " + this.source.start().toStringSortable());} },
    {text:"Go to google.com", href: "http://www.google.com/?q={0}"},
]);

Event Bubble (Extended ToolTip)

See also Event bubble.

// bubble, with async loading
dp.bubble = new DayPilot.Bubble({
    cssClassPrefix: "bubble_default",
    onLoad: function(args) {
        var ev = args.source;
        args.async = true;  // notify manually using .loaded()
        
        // simulating slow server-side load
        setTimeout(function() {
            args.html = "testing bubble for: <br>" + ev.text();
            args.loaded();
        }, 500);
    }
});

CSS Themes

The event calendar supports full CSS styling.

You can create your own CSS theme using the online theme designer.

See also CSS themes.

// behavior and appearance
dp.cssClassPrefix = "calendar_white";

All-Day Events

See also All-day events.

dp.showAllDayEvents = true;
var e = new DayPilot.Event({
    start: new DayPilot.Date("2016-03-25T00:00:00"),
    end: new DayPilot.Date("2016-03-27T00:00:00"),
    id: DayPilot.guid(),
    text: "All-Day Event",
    allday: true
});
dp.events.add(e);

Changing Date of the Event Calendar

See also Manual date switching.

dp.startDate = "2016-07-31";
dp.update();

Changing Day/Week View

Switching to week view.

dp.viewType = "Week";
dp.update();

Switching to day view

dp.viewType = "Day";
dp.update();

Showing Custom Columns

See also Resources view.

dp.viewType = "Resources";
dp.columns = [
  { name: "Monday", start: "2016-07-04" },
  { name: "Wednesday", start: "2016-07-06" }
];
dp.update();

Internationalization (Locale)

See also Localization.

The locale determines first day of week, month names, day of week names, time and date format.

dp.locale = "de-de";
dp.update();

API Reference

Documentation