DayPilot Pro for JavaScript 1.0 beta4

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

• http://javascript.daypilot.org/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>