DayPilot Pro for JavaScript 1.0 beta3

The first public beta of DayPilot Pro for JavaScript has been released.

JavaScript Version Features

• Works with any server backend (PHP, Ruby, node.js, Java, ASP.NET...)
• jQuery plugin
• Full CSS styling (themes)
• Scheduler
• Gantt chart
• Event calendar (day, week, month) in progress
• 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

API reference

• http://api.daypilot.org/

1.0 beta 3 features

• Scheduler API is frozen
• Calendar API may change
• Month API may change

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

Scheduler Features

• Client-side updates (events, properties, styling)
• Resource hierarchy (tree)
• Dynamic (on-demand) event loading during scrolling
• Gantt view
• Resource columns
• Configurable time scale (cell size from 1 minute to 1 week)
• Localization support (date format, day and month names, first day of week)
• jQuery plugin
• Time cell customization (color, CSS, html)
• Multiple time header levels (grouping by year, month, week, day, hour)
• AJAX operations: drag and drop event moving and resizing, deleting and selecting
• Modal dialog for event editing
• Context menu
• CSS themes
• Customizable timeline (hiding time ranges)
• Crosshair for highlighting current position
• Duration bar
• Percent complete bar
• Event customization (color, CSS class, html)
• 100% height support

Online Demo

• http://javascript.daypilot.org/demo/scheduler/

Basic PHP Example

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

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

    // behavior and appearance
    dp.cssClassPrefix = "scheduler_8";
    dp.cellWidth = 40;
    dp.eventHeight = 25;
    dp.headerHeight = 25;

    // view
    dp.startDate = new DayPilot.Date("2013-05-01").firstDayOfMonth();  // or just dp.startDate = "2013-03-25";
    dp.cellGroupBy = "Month";
    dp.days = dp.startDate.daysInMonth();
    dp.cellDuration = 1440; // one day

    dp.moveBy = 'Full';
    dp.showToolTip = false;

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

    dp.treeEnabled = true;
    dp.rowHeaderWidthAutoFit = true;
    dp.rowHeaderWidth = 200;

    // 
    dp.resources = [
                 { name: "Room A", id: "A", expanded: true, children:[
                         { name : "Room A.1", id : "A.1" },
                         { name : "Room A.2", id : "A.2" }
                         ] 
                 },
                 { name: "Room B", id: "B" },
                 { name: "Room C", id: "C", loaded: false }
                ];


    // http://api.daypilot.org/daypilot-scheduler-oneventmoved/ 
    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");
            }
        );        
    };

    // http://api.daypilot.org/daypilot-scheduler-oneventclick/
    dp.onEventClick = function(args) {
        alert("clicked: " + args.e.id());
    };

    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>