search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Start and Enddate parameters wrong when I click November and October month

Asked by Macdonald Chigubhu
7 days ago.

I have a problem. I am using DayPilot Pro for Javascript. My events for October and November are not loading when I click on the month. I have checked to see what parameters for start and end date are being send. It shows 2018-09-01 to 2018-10-01 when I have selected October. Hence events for October cant display on calendar. Kindly assis

Comment posted by Dan Letecky [DayPilot]
7 days ago.

Can you please post the code that you are using to load the events?

Comment posted by Macdonald Chigubhu
7 days ago.
<?php
require_once '_db.php';

$stmt = $db->prepare("SELECT r.*,a.Agent Agentname FROM reservations r
                     INNER JOIN tblagent a ON r.agent=a.ID WHERE NOT ((end <= :start) OR (start >= :end))");
                     $sdate=$_POST['start'];
                     $edate=$_POST['end'];
$stmt->bindParam(':start', $sdate);
$stmt->bindParam(':end', $edate);
$stmt->execute();
$result = $stmt->fetchAll();

class Event {}
$events = array();

date_default_timezone_set("UTC");
$now = new DateTime("now");
$today = $now->setTime(0, 0, 0);

foreach($result as $row) {
    $e = new Event();
    $e->id = $row['id'];
    $e->total=$row['totalprice'];    
    $e->text = $row['name']."-".$row['Agentname']."<br/>"."Value $".$row['totalprice']."<br/>"."BID".$row['id']." ".$row['generalnotes'];
    $e->start = $row['start'];
    $e->end = $row['end'];
    $e->notes = $row['generalnotes'];
    $e->resource = $row['room_id'];
    $e->bubbleHtml = "Reservation details: <br/>".$e->text;

    // additional properties
    $e->status = $row['status'];
    $e->paid = $row['paid'];
    $events[] = $e;

    /*
        int paid = Convert.ToInt32(e.DataItem["ReservationPaid"]);
        string paidColor = "#aaaaaa";

        e.Areas.Add(new Area().Bottom(10).Right(4).Html("<div style='color:" + paidColor + "; font-size: 8pt;'>Paid: " + paid + "%</div>").Visibility(AreaVisibility.Visible));
        e.Areas.Add(new Area().Left(4).Bottom(8).Right(4).Height(2).Html("<div style='background-color:" + paidColor + "; height: 100%; width:" + paid + "%'></div>").Visibility(AreaVisibility.Visible));  
     * */
}

header('Content-Type: application/json');
echo json_encode($events);

?>
//this is the code to pull the records. I will send the index file that posts the date paramenters
Comment posted by Macdonald Chigubhu
7 days ago.
//index page 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Travel Adventure 4X4 Booking</title>
        <!-- demo stylesheet -->
    	<link type="text/css" rel="stylesheet" href="media/layoutold.css" />

	<!-- helper libraries -->
	<script src="js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

	<!-- daypilot libraries -->
        <script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>

        <link type="text/css" rel="stylesheet" href="icons/style.css" />

        <style type="text/css">
            .icon {
                font-size: 14px;
                text-align: center;
                line-height: 14px;
                vertical-align: middle;

                cursor: pointer;
            }

            .scheduler_default_rowheader_inner
            {
                    border-right: 1px solid #ccc;
            }
            .scheduler_default_rowheadercol2
            {
                background: White;
            }
            .scheduler_default_rowheadercol2 .scheduler_default_rowheader_inner
            {
                top: 2px;
                bottom: 2px;
                left: 2px;
                background-color: transparent;
                    border-left: 5px solid #1a9d13; /* green */
                    border-right: 0px none;
            }
            .status_dirty.scheduler_default_rowheadercol2 .scheduler_default_rowheader_inner
            {
                    border-left: 5px solid #ea3624; /* red */
            }
            .status_cleanup.scheduler_default_rowheadercol2 .scheduler_default_rowheader_inner
            {
                    border-left: 5px solid #f9ba25; /* orange */
            }

        </style>
   
    </head>
    <body>
            <div id="header">
                <div class="bg-help">
                    <div class="inBox">
                        <h1 id="logo"><a href='#'>Travel Adventure 4X4 Booking System </a></h1>
                        <hr class="hidden" />
                    </div>
                </div>
            </div>
            <div class="shadow"></div>
            <div class="hideSkipLink">
            </div>
            <div class="main">

                <div style="width:160px; float:left;">
                    <div id="nav"></div>
                </div>

                <div style="margin-left: 160px;">
<?php
require_once '_db.php';
//$boats=$db->query("SELECT id,registration_number FROM tblcar_rental_cars");
$types=$db->query("SELECT id,car_type FROM tblcar_rental_car_types");
?>
                    <div class="space">
                        Vehicle Types:
                        <select id="filter" name="filter">
                            <option value="0">All</option>
                    <?php 
                        foreach ($types as $type) {
                            $selected = $_GET['resource'] == $type['id'] ? ' selected="selected"' : '';
                            $id = $type['id'];
                            $name = $type['car_type'];
                            print "<option value='$id' $selected>$name</option>";
                        }
                    ?>
                        </select> 

                        <div class="space">
                            Time range:
                            <select id="timerange">
                                <option value="week">Week</option>
                                <option value="month" selected>Month</option>
                            </select>
                            <label for="autocellwidth"><input type="checkbox" id="autocellwidth">Auto Cell Width</label>
                        </div>
                    </div>

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

                    <div class="space">
                        <a href="../index.php">Back to Dashboard</a>
                    </div>
                </div>

                <script type="text/javascript">
                    var nav = new DayPilot.Navigator("nav");
                    nav.selectMode = "month";
                    nav.showMonths = 4;
                    nav.skipMonths = 4;
                    nav.onTimeRangeSelected = function(args) {
                    loadTimeline(args.start);
                    // loadTimeline(nav.selectionDay);
                        loadEvents();
                    };
                    nav.init();

                    $("#timerange").change(function() {
                        switch (this.value) {
                            case "week":
                                dp.days = 7;
                                nav.selectMode = "Week";
                                nav.select(nav.selectionDay);
                                break;
                            case "month":
                                dp.days = dp.startDate.daysInMonth();
                                nav.selectMode = "Month";
                                nav.select(nav.selectionDay);
                                break;
                        }
                    });

                    $("#autocellwidth").click(function() {
                        dp.cellWidth = 50;  // reset for "Fixed" mode
                        dp.cellWidthSpec = $(this).is(":checked") ? "Auto" : "Fixed";
                        dp.update();
                    });

                    $("#add-room").click(function(ev) {
                        ev.preventDefault();
                        var modal = new DayPilot.Modal();
                        modal.onClosed = function(args) {
                            loadResources();
                        };
                        modal.showUrl("room_new.php");
                    });
                </script>

                <script>
                    var dp = new DayPilot.Scheduler("dp");
                    dp.eventEndSpec = "Date"; 
                    dp.allowEventOverlap = false;

                   // dp.scale = "Day";
                   // dp.startDate = new DayPilot.Date().firstDayOfMonth();
                    dp.days = dp.startDate.daysInMonth();
                    loadTimeline(DayPilot.Date.today().firstDayOfMonth());

                    dp.eventDeleteHandling = "Update"; //Disabled to stop deleting from here

                    dp.timeHeaders = [
                        { groupBy: "Month", format: "MMMM yyyy" },
                        { groupBy: "Day", format: "d" }
                    ];

                    dp.eventHeight = 80;
                    dp.bubble = new DayPilot.Bubble({});

                    dp.rowHeaderColumns = [
                        {title: "Vehicle", width: 80},                                                
                        {title: "Capacity", width: 80},
                        {title: "Status", width: 80}
                    ];

                    dp.onBeforeResHeaderRender = function(args) {
                        var beds = function(count) {
                            return count + " pax" + (count > 1 ? " " : "");
                        };

                        args.resource.columns[0].html = beds(args.resource.capacity);
                        args.resource.columns[1].html = args.resource.status;
                        switch (args.resource.status) {
                            case "Dirty":
                                args.resource.cssClass = "status_dirty";
                                break;
                            case "Cleanup":
                                args.resource.cssClass = "status_cleanup";
                                break;
                        }

                        args.resource.areas = [{
                                    top:3,
                                    right:4,
                                    height:18,
                                    width:14,
                                    action:"JavaScript",
                                    js: function(r) {
                                        var modal = new DayPilot.Modal();
                                        modal.onClosed = function(args) {
                                            loadResources();
                                        };
                                        modal.showUrl("room_edit.php?id=" + r.id);
                                    },
                                    v:"Hover",
                                    css:"icon icon-edit",
                                }];
                    };

                    // http://api.daypilot.org/daypilot-scheduler-oneventmoved/
                    dp.onEventMoved = function (args) {
                        $.post("backend_move.php",
                        {
                            id: args.e.id(),
                            newStart: args.newStart.toString(),
                            newEnd: args.newEnd.toString(),
                            newResource: args.newResource
                        },
                        function(data) {
                            dp.message(data.message);
                        });
                    };

                    // http://api.daypilot.org/daypilot-scheduler-oneventresized/
                    dp.onEventResized = function (args) {
                        $.post("backend_resize.php",
                        {
                            id: args.e.id(),
                            newStart: args.newStart.toString(),
                            newEnd: args.newEnd.toString()
                        },
                        function() {
                            dp.message("Resized.");
                        });
                    };

                    dp.onEventDeleted = function(args) {
                        $.post("backend_delete.php",
                        {
                            id: args.e.id()
                        },
                        function() {
                            dp.message("Deleted.");
                        });
                    };

                    // event creating
                    // http://api.daypilot.org/daypilot-scheduler-ontimerangeselected/
                    dp.onTimeRangeSelected = function (args) {
                        //var name = prompt("New event name:", "Event");
                        //if (!name) return;

                        var modal = new DayPilot.Modal();
                        modal.closed = function() {
                            dp.clearSelection();

                            // reload all events
                            var data = this.result;
                            if (data && data.result === "OK") {
                                loadEvents();
                            }
                        };
                        modal.showUrl("new.php?start=" + args.start + "&end=" + args.end + "&resource=" + args.resource);

                    };

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

                    dp.onBeforeCellRender = function(args) {
                        var dayOfWeek = args.cell.start.getDayOfWeek();
                        if (dayOfWeek === 6 || dayOfWeek === 0) {
                            args.cell.backColor = "#f8f8f8";
                        }
                    };

                    dp.onBeforeEventRender = function(args) {
                        var start = new DayPilot.Date(args.e.start);
                        var end = new DayPilot.Date(args.e.end);

                        var today = DayPilot.Date.today();
                        var now = new DayPilot.Date();

                        args.e.html = args.e.text + " (" + start.toString("dd/MM/yyyy") + " - " + end.toString("dd/MM/yyyy") + ")";//parameters set in backend_events

                        switch (args.e.status) {
                            case "New":
                                var in2days = today.addDays(1);

                                if (start < in2days) {
                                    args.e.barColor = 'red';
                                    args.e.toolTip = 'Expired (not confirmed in time)';
                                }
                                else {
                                    args.e.barColor = 'orange';
                                    args.e.toolTip = 'New';
                                }
                                break;
                            case 'Cancelled':
                                    args.e.barColor = 'maroon';
                                    args.e.toolTip = 'Cancelled (not confirmed in time)';
                                break;
                            case 'Maintainance':
                                    args.e.barColor = 'black';
                                    args.e.toolTip = 'Blocked (R&M)';
                                break;  
                            case 'VIP':
                                    args.e.barColor = 'gold';
                                    args.e.toolTip = '(VIP)';
                                break;                                
                            case 'Provisional':
                                    args.e.barColor = 'blue';
                                    args.e.toolTip = 'Provisional (not yet confirmed)';
                                break;                                
                            case 'Confirmed':
                                var arrivalDeadline = today.addHours(18);

                                if (start < today || (start.getDatePart() === today.getDatePart() && now > arrivalDeadline)) { // must arrive before 6 pm
                                    args.e.barColor = "#f41616";  // red
                                    args.e.toolTip = 'Late arrival';
                                }
                                else {
                                    args.e.barColor = "green";
                                    args.e.BackgroundColor = "red";
                                    args.e.toolTip = "Confirmed";
                                }
                                break;
                            case 'Dispatched': // arrived
                                var checkoutDeadline = today.addHours(10);

                                if (end < today || (end.getDatePart() === today.getDatePart() && now > checkoutDeadline)) { // must checkout before 10 am
                                    args.e.barColor = "#f41616";  // red
                                    args.e.toolTip = "Vehicle Dispatched";
                                }
                                else
                                {
                                    args.e.barColor = "#1691f4";  // blue
                                    args.e.toolTip = "Arrived";
                                }
                                break;
                            case 'Returned': // checked out
                                args.e.barColor = "gray";
                                args.e.BackgroundColor = "red";
                                args.e.toolTip = "Vehicle Returned";
                                break;
                            default:
                                args.e.toolTip = "Unexpected state";
                                break;
                        }

                        args.e.html = args.e.html + "<br /><span style='color:gray'>" + args.e.toolTip + "</span>";

                        var paid = args.e.paid;
                        var paidColor = "#aaaaaa";

                        args.e.areas = [
                            { bottom: 10, right: 4, html: "<div style='color:" + paidColor + "; font-size: 8pt;'>Paid: " + paid + "%</div>", v: "Visible"},
                            { left: 4, bottom: 8, right: 4, height: 2, html: "<div style='background-color:" + paidColor + "; height: 100%; width:" + paid + "%'></div>", v: "Visible" }
                        ];

                    };


                   dp.init();

                    loadResources();
                    loadEvents();

                    function loadTimeline(date) {
                        dp.scale = "Manual";
                        dp.timeline = [];
                        var start = date.getDatePart().addHours(0);

                        for (var i = 0; i < dp.days-1; i++) {
                            dp.timeline.push({start: start.addDays(i), end: start.addDays(i+1)});
                        }
                        dp.update();
                    }

                    function loadEvents() {
                        var start = dp.visibleStart();
                        var end = dp.visibleEnd();

                        $.post("backend_events.php",
                            {
                                start: start.toString(),
                                end: end.toString()
                            },
                            function(data) {
                                dp.events.list = data;
                                dp.update();
                            }
                        );
                    }

                    function loadResources() {
                        $.post("backend_rooms.php",
                        { capacity: $("#filter").val() },
                        function(data) {
                            dp.resources = data;
                            dp.update();
                        });
                    }

                    $(document).ready(function() {
                        $("#filter").change(function() {
                            loadResources();
                        });
                    });
                </script>

            </div>
            <div class="clear">
            </div>
    </body>
</html>
Comment posted by Dan Letecky [DayPilot]
7 days ago.

OK, that seems to be based on the Hotel Room Booking tutorial (https://code.daypilot.org/27453/html5-hotel-room-booking-javascript-php).

In that project it seems to work fine. What version of DayPilot Pro do you use?

You can try to check the value of args.start in nav.onTimeRangeSelected to see if it is the expected value.

New Reply
This reply is
Your name (optional):