JavaScript Monthly Calendar

monthly-event-calendar-default-css-theme.png

DayPilot Month is an AJAX monthly 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 Tutorial

Monthly Event Calendar Initialization

See also Monthly event calendar tutorial.

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

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

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

    // behavior and appearance
    dp.cssClassPrefix = "month_white";
    
    // view
    dp.startDate = new DayPilot.Date("2013-07-01");  // or just dp.startDate = "2013-07-01";

    var e = new DayPilot.Event({
        start: "2013-03-25T00:00:00",
        end: "2013-03-25T12:00:00",
        id: DayPilot.guid(),
        text: "Event"
    });
    
    dp.events.add(e);

    dp.init();

</script>

Monthly Event Calendar jQuery Plugin

See also Monthly Event Calendar for jQuery.

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

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

<script type="text/javascript">
    var dp = $("dp").daypilotMonth({
      cssClassPrefix: "calendar_white",
      startDate: "2013-03-01"
    });
</script>

Event Bulk Loading

See also Event loading.

dp.events.list = [
{
  start: "2013-03-25T00:00:00",
  end: "2013-03-27T00:00:00",
  id: "1",
  text: "Event 1"
},
{
  start: "2013-03-26T12:00:00",
  end: "2013-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("2013-03-25T00:00:00"),
  end: new DayPilot.Date("2013-03-25T12: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(),
        text: "Event"
    });
    dp.events.add(e);
    dp.clearSelection();
    dp.message("Created");
};

Event Click

See also Event click.

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

Day Header Click

See also Day header click.

dp.onHeaderClicked = function(args) {
  alert("day: " + args.header.dayOfWeek);
};

Event Bubble (Extended ToolTip)

See also Event bubble.

    dp.bubble = new DayPilot.Bubble({
        cssClassPrefix: "bubble_default",
        onLoad: function(args) {
            var ev = args.source;
            args.html = "testing bubble for: " + ev.text();
        }
    });

Custom Cell Rendering

See also Cell customization.

    dp.onBeforeCellRender = function(args) {
        args.cell.html = "text";
        if (args.cell.start.getDay() === 1) {
            args.cell.backColor = "red";
        }
    };

Custom Event Rendering

See also Event customization.

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

Custom Day Header Rendering

See also Day header customization.

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

CSS Styling (Themes)

The monthly event calendar can be fully styled using CSS. 

There are several themes included in the package:

  • month_white
  • month_blue
  • month_green
  • month_transparent

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

Apply the theme using cssClassPrefix property:

dp.cssClassPrefix = "month_white";

See also CSS themes.

API Reference

Documentation

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java