DayPilot Pro for JavaScript 1.0 beta3

Public beta release of DayPilot Pro for JavaScript - a standalone AJAX scheduler.
Jul 2, 2013
event scheduler javascript html5

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

1.0 beta 3 features

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

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>