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
5 years 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

javascript
Comment posted by Dan Letecky [DayPilot]
5 years ago.

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

Comment posted by Macdonald Chigubhu
5 years 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
5 years 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]
5 years 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.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.
Tools
E-mail notifications
Feed
Related Questions
Can an Event option be used to adjust Business hours for a Scheduler resource?
Scheduler - When does the day end?
Day Pilot Navigator cannot move to next month when scheduler in next month
Navigator changing dates behaviour
Event start end problem
ShowAllDayEvents and BusinessHoursNoScroll bug
interval date of events
Fix Height in Scheduler
Schedule control and vertical scrolling
Strange behavior of keyboard navigation
Angular 6 Zoom level.
Server Side Rendered React throws `navigator is not defined`
I want syntax get a day when I click to daypilot-navigator in angularjs
Cells with class previous and next are shifted by 1
Firefox for Mac Context Menu Issue

Products

Learn

Get Support

DayPilot Pro

Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.