DayPilot Pro for JavaScript 1.0 beta4

New release of JavaScript event calendar and scheduling widgets.
Jul 7, 2013
javascript event calendar

New beta release of DayPilot Pro for JavaScript is available.

New Features

  • Event Calendar API frozen
  • Monthly Event Calendar API frozen
  • Full CSS styling (themes)
  • Browser support: Chrome, IE, Firefox, Opera, Safari
  • Doctypes: HTML5, XHTML, HTML 4
  • Mobile devices support: Smartphones and tablets with Android, iOS devices - iPhone, iPad, iPod Touch

Release notes: http://javascript.daypilot.org/daypilot-pro-for-javascript-1-0-beta4/

Event Calendar Features

  • Client-side updates (events, properties, styling)
  • Customizable columns
  • Columns hierarchy (split columns)
  • Localization support (date format, day and month names, first day of week)
  • jQuery plugin
  • Time cell customization (color, CSS, html)
  • AJAX operations: drag and drop event moving and resizing, deleting and selecting
  • Modal dialog for event editing
  • Context menu
  • CSS themes (see also the online theme designer)
  • Crosshair for highlighting current position
  • Duration bar
  • Event customization (color, CSS class, html)
  • 100% height support

Online Demo

Event Calendar Example (JavaScript)

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

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

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

    // view
    dp.startDate = new DayPilot.Date("2013-05-01");  // or just dp.startDate = "2013-03-25";
    dp.viewType = "Week";

    // no events at startup, we will load them later using loadEvents()
    dp.events.list = [];

    // drag and drop event moving
    dp.onEventMoved = function (args) {
        DayPilot.request(
            "backend_move.php", 
            function(req) { // success
                var response = eval("(" + req.responseText + ")");
                if (response && response.result) {
                    dp.message("Moved: " + response.message);
                }
            },
            args,
            function(req) {  // error
                dp.message("Saving failed");
            }
        );        
    };

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

        args.text = name;

        DayPilot.request(
            "backend_create.php", 
            function(req) { // success
                var response = eval("(" + req.responseText + ")");
                if (response && response.result) {
                    dp.message("Created: " + response.message);
                }
            },
            args,
            function(req) {  // error
                dp.message("Saving failed");
            }
        ); 
    };

    dp.init();

    loadEvents();

    function loadEvents() {
        DayPilot.request("backend_events.php", function(result) {
            var data = eval("(" + result.responseText + ")");
            for(var i = 0; i < data.length; i++) {
                var e = new DayPilot.Event(data[i]);                
                dp.events.add(e);
            }
        });
    }

</script>