Features

  • Demonstrates DayPilot.Modal usage
  • Displays a standalone web page in the modal dialog
  • Binding the modal dialog to the DayPilot JavaScript Scheduler control
  • Requires jQuery for submitting the form using an AJAX call
  • Passing data to the modal dialog using URL and JavaScript
  • Passing data from the modal dialog back to the main page using JavaSciprt
  • Sample PHP project with SQLite database

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

The DayPilot.Modal helper itself (without the Scheduler) is open-source and can be downloaded here: DayPilot.Modal Dialog [code.daypilot.org]

Opening the Modal Dialog for a New Scheduler Event

html5-scheduler-javascript-new-event.png

You can use onTimeRangeSelected event of the Scheduler to open the modal dialog that allows entering the details of the new event. See also event creating in the documentation.

index.php (main page)

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

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

    // ...

    dp.onTimeRangeSelected = function (args) {
        var modal = new DayPilot.Modal();
        modal.onClosed = function(args) {
            dp.clearSelection();
            var data = args.result;
            if (data && data.result === "OK") { 
                loadEvents(); 
                dp.message(data.message); 
            }
        };
        modal.showUrl("new.php?start=" + args. start + "&end=" + args.end + "&resource=" + args.resource);
    };
                    
    dp.init();

</script>

Sample URL

/new.php?start=2015-11-02T00:00:00&end=2015-11-07T00:00:00&resource=2

html5-scheduler-javascript-new-event-modal-dialog.png

new.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>New Event</title>
    	<link type="text/css" rel="stylesheet" href="media/layout.css" />    
        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
    </head>
    <body>
        <?php
            require_once '_db.php';
        
            $start = $_GET['start'];
            $end = $_GET['end'];
            $resource = $_GET['resource'];

            // basic sanity check
            new DateTime($start) or die("invalid date (start)");
            new DateTime($end) or die("invalid date (end)");
            is_numeric($resource) or die("invalid resource id");
            
            $resources = $db->query('SELECT * FROM resources');
        ?>
        <form id="f" style="padding:20px;">
            <h1>New Event</h1>
            <div>Name: </div>
            <div><input type="text" id="name" name="name" value="" /></div>
            <div>Start:</div>
            <div><input type="text" id="start" name="start" /></div>
            <div>End:</div>
            <div><input type="text" id="end" name="end" /></div>
            <div>Resource:</div>
            <div>
                <select id="resource" name="resource">
                    <?php 
                        foreach ($resources as $r) {
                            $selected = $resource == $r['id'] ? ' selected="selected"' : '';
                            $id = $r['id'];
                            $name = $r['name'];
                            print "<option value='$id' $selected>$name</option>";
                        }
                    ?>
                </select>                
            </div>
            <div class="space"><input type="submit" value="Save" /> <a href="javascript:close();">Cancel</a></div>
        </form>
        
        <script type="text/javascript">
        function close(result) {
            DayPilot.Modal.close(result);
        }

        $("#f").submit(function (ev) {
            
            // make sure it's not submitted using the default mechanism
            ev.preventDefault();
            
            // normalize the date values
            $("#start").val(startPicker.date.toString("yyyy-MM-dd"));
            $("#end").val(endPicker.date.toString("yyyy-MM-dd"));
            
            // submit using AJAX
            var f = $("#f");
            $.post("backend_create.php", f.serialize(), function (result) {
                close(eval(result));
            });
            
        });
        
        var startPicker =  new DayPilot.DatePicker({
            target: 'start', 
            pattern: 'M/d/yyyy',
            date: "<?php echo $start ?>",
            onShow: function() {
                parent.DayPilot.ModalStatic.stretch();
            }
        });

        var endPicker =  new DayPilot.DatePicker({
            target: 'end', 
            pattern: 'M/d/yyyy',
            date: "<?php echo $end ?>",
            onShow: function() {
                parent.DayPilot.ModalStatic.stretch();
            }
        });

        $(document).ready(function () {
            $("#name").focus();
        });
    
        </script>
    </body>
</html>

Opening the Modal Dialog for an Existing Scheduler Event

Use the onEventClicked event to open the modal dialog with event details. See also the Scheduler event editing topic in the documentation.

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

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

    // ...
    
    dp.onEventClick = function(args) {
        var modal = new DayPilot.Modal();
        modal.onClosed = function(args) {
            // reload all events
            var result = args.result;
            if (result && result.status === "OK") {
                loadEvents();
            }
        };
        modal.showUrl("edit.php?id=" + args.e.id());
    };
                    
    dp.init();

</script>

Sample URL:

/edit.php?id=2

html5-scheduler-javascript-edit-event-modal-dialog.png

edit.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Edit Event</title>
    	<link type="text/css" rel="stylesheet" href="media/layout.css" />    
        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
    </head>
    <body>
        <?php
            // check the input
            is_numeric($_GET['id']) or die("invalid URL");
            
            require_once '_db.php';
            
            $stmt = $db->prepare('SELECT * FROM [events] WHERE id = :id');
            $stmt->bindParam(':id', $_GET['id']);
            $stmt->execute();
            $event = $stmt->fetch();
            
            $resources = $db->query('SELECT * FROM resources');
        ?>
        <form id="f" style="padding:20px;">
            <input type="hidden" name="id" value="<?php print $_GET['id'] ?>" />
            <h1>Edit Event</h1>
            <div>Name: </div>
            <div><input type="text" id="name" name="name" value="<?php print $event['name'] ?>" /></div>
            <div>Start:</div>
            <div><input type="text" id="start" name="start" /></div>
            <div>End:</div>
            <div><input type="text" id="end" name="end" /></div>
            <div>Resource:</div>
            <div>
                <select id="resource" name="resource">
                    <?php 
                        foreach ($resources as $r) {
                            $selected = $event['resource_id'] == $r['id'] ? ' selected="selected"' : '';
                            $id = $r['id'];
                            $name = $r['name'];
                            print "<option value='$id' $selected>$name</option>";
                        }
                    ?>
                </select>                
            </div>            
            
            <div class="space"><input type="submit" value="Save" /> <a href="javascript:close();">Cancel</a></div>
        </form>
        
        <script type="text/javascript">
        function close(result) {
            DayPilot.Modal.close(result);
        }

        $("#f").submit(function (ev) {
            
            // make sure it's not submitted using the default mechanism
            ev.preventDefault();
            
            // normalize the date values
            $("#start").val(startPicker.date.toString("yyyy-MM-dd"));
            $("#end").val(endPicker.date.toString("yyyy-MM-dd"));

            // submit using AJAX
            var f = $("#f");
            $.post("backend_update.php", f.serialize(), function (result) {
                close(eval(result));
            });
            
        });
        
        var startPicker =  new DayPilot.DatePicker({
            target: 'start', 
            pattern: 'M/d/yyyy',
            date: "<?php echo $event['start'] ?>",
            onShow: function() {
                parent.DayPilot.ModalStatic.stretch();
            }
        });

        var endPicker =  new DayPilot.DatePicker({
            target: 'end', 
            pattern: 'M/d/yyyy',
            date: "<?php echo $event['end'] ?>",
            onShow: function() {
                parent.DayPilot.ModalStatic.stretch();
            }
        });        

        $(document).ready(function () {
            $("#name").focus();
        });
    
        </script>
    </body>
</html>

Closing the Modal Dialog

You can close the modal dialog from the parent page:

var modal = DayPilot.Modal();
// ...
modal.close();

You can also close the modal dialog from the modal dialog:

DayPilot.Modal.close();

Close Callback

When the modal dialog is closed it fires .onClosed event:

var modal = new DayPilot.Modal();
modal.onClosed = function(args) {
  console.log("Modal dialog closed");
};
modal.showUrl("edit.php?id=" + args.e.id());

Sending Data from the Scheduler to the Modal Dialog

1. In this sample project we send the data to the modal page using URL query string parameters:

modal.showUrl("new.php?start=" + args. start + "&end=" + args.end + "&resource=" + args.resource);

2. You can also access the the DayPilot.Modal object that opened the page from inside the modal page:

var modal = DayPilot.Modal.opener();

The DayPilot.Modal.opener() method is available since 8.1.1925.

Sending Data from the Modal Dialog to the Scheduler

The first argument passed to DayPilot.Modal.close() method will be sent back to the opening page. You can access the result in onClosed() method:

edit.php (modal dialog)

var result = { status: "OK" };
DayPilot.Modal.close(result);

index.php (main page):

var modal = new DayPilot.Modal();
modal.onClosed = function(args) {
  var result = args.result;
  console.log(result.status);  // "OK"
};