var dpm = new DayPilot.Month("dpm");
        dpm.theme = "th_mgreen";

        dpm.startDate = getCurrentDate();

        dpm.onBeforeCellRender = function (args) {  
            /* Handle Background-color */
            var year = args.cell.start.getYear();
            var month = args.cell.start.getMonth() + 1;

            if (month < 10) {
                month = "0" + month;
            }

            var today = dpm.startDate;
            var TDyear = today.getYear();
            var TDmonth = today.getMonth() + 1;

            if (TDmonth < 10) {
                TDmonth = "0" + TDmonth;
            }

            if ((year + '/' + month) !== (TDyear + '/' + TDmonth)) {
                args.cell.backColor = "whitesmoke";
            }
            else if (args.cell.start.getDatePart().getTime() === new DayPilot.Date().getDatePart().getTime()) {
                args.cell.backColor = "yellow";

            } else if (args.cell.start.getDatePart().getDayOfWeek() === 0) {
                args.cell.backColor = "lightgrey";

            } else {
                args.cell.backColor = "white";
            }

        };

        dpm.bubble = new DayPilot.Bubble({
            CssClassPrefix: "bubble_default" ,
            onLoad: function (args) {
                var ev = args.source;
                args.html = "testing bubble for: " + ev.text();
            }
        });

        dpm.contextMenu = new DayPilot.Menu({
            /* Reference URL: https://api.daypilot.org/daypilot-menu-class/ */
            items: [ 
                {
                    text: "Approve Ticket", onclick: function () {
                        if (this.source.data.cssClass !== "SimulationEvent") {
                            dpm.message('Ticket ID <b>' + this.source.data.id + '<span style="color:red;"> Not Copied Working Sheet</span></b>');
                        } else { 
                            if (confirm("Sure to Approve Working sheet?")) {
                                console.log("Do after Approve confirmed....");
                            }
                        }
                    }
                },
                {
                    text: "-"
                },
                {
                    text: "Delete",
                    onclick: function (args) {
                        if (this.source.data.cssClass === "SimulationEvent") {
                            var e1 = dpm.events.find(this.source.data.id);
                            dpm.events.remove(e1).queue();

                            dpm.message('Copied Working Sheet<span style="color:red;">' + this.source.data.id + ' REMOVED</span>.');
                        } else {
                            dpm.message('Working Sheet ' + this.source.data.id + ' <span style="color:red;">NOT Copied Working Sheet. Cannot REMOVE<span>.');
                        }

                    },
                    cssClass: "bg-blue"
                } 
            ],
            hideOnMouseOut: true
        });
 
        // event creating
        dpm.onTimeRangeSelected = function (args) {
            var htmlContent = '<div class="container-fluid">' +
                '<div class="row" >From&nbsp;<strong>' + args.start.toString("yyyy/MM/dd") + '</strong>&nbsp;To&nbsp;<strong>' + args.end.toString("yyyy/MM/dd") + '</strong></div>' +
                '<div class="form-group">' +
                '     <label class="col-form-label" for="NewStart">Start</label>  ' +
                '     <select type="text" class="form-control" id="NewStart" name="NewStart" >' +
                '         <option value="00:00">12:00</option>' +
                '         <option value="00:30">12:30</option>' +
                '         <option value="01:00">01:00</option>' +
                '         <option value="01:30">01:30</option>' +
                '         <option value="02:00">02:00</option>' +
                '         <option value="02:30">02:30</option>' +
                '         <option value="03:00">03:00</option>' +
                '         <option value="03:30">03:30</option>' +
                '         <option value="04:00">04:00</option>' +
                '         <option value="04:30">04:30</option>' +
                '         <option value="05:00">05:00</option>' +
                '         <option value="05:30">05:30</option>' +
                '         <option value="06:00" selected>06:00</option>' +
                '         <option value="06:30">06:30</option>' +
                '         <option value="07:00">07:00</option>' +
                '         <option value="07:30">07:30</option>' +
                '         <option value="08:00">08:00</option>' +
                '         <option value="08:30">08:30</option>' +
                '         <option value="09:00">09:00</option>' +
                '         <option value="09:30">09:30</option>' +
                '         <option value="10:00">10:00</option>' +
                '         <option value="10:30">10:30</option>' +
                '         <option value="11:00">11:00</option>' +
                '         <option value="11:30">11:30</option>' +
                '         <option value="12:00">12:00</option>' +
                '         <option value="12:30">12:30</option>' +
                '         <option value="13:00">13:00</option>' +
                '         <option value="13:30">13:30</option>' +
                '         <option value="14:00">14:00</option>' +
                '         <option value="14:30">14:30</option>' +
                '         <option value="15:00">15:00</option>' +
                '         <option value="15:30">15:30</option>' +
                '         <option value="16:00">16:00</option>' +
                '         <option value="16:30">16:30</option>' +
                '         <option value="17:00">17:00</option>' +
                '         <option value="17:30">17:30</option>' +
                '         <option value="18:00">18:00</option>' +
                '         <option value="18:30">18:30</option>' +
                '         <option value="19:00">19:00</option>' +
                '         <option value="19:30">19:30</option>' +
                '         <option value="20:00">20:00</option>' +
                '         <option value="20:30">20:30</option>' +
                '         <option value="21:00">21:00</option>' +
                '         <option value="21:30">21:30</option>' +
                '         <option value="22:00">22:00</option>' +
                '         <option value="22:30">22:30</option>' +
                '         <option value="23:00">23:00</option>' +
                '         <option value="23:30">23:30</option>' +
                '     </select>' +
                '</div>' +
                '<div class="form-group">' +
                '     <label class="col-form-label" for="NewEnd">End</label>  ' +
                '     <select type="text" class="form-control SingleDate" id="NewEnd" name="NewEnd" >' +
                '         <option value="00:00">12:00</option>' +
                '         <option value="00:30">12:30</option>' +
                '         <option value="01:00">01:00</option>' +
                '         <option value="01:30">01:30</option>' +
                '         <option value="02:00">02:00</option>' +
                '         <option value="02:30">02:30</option>' +
                '         <option value="03:00">03:00</option>' +
                '         <option value="03:30">03:30</option>' +
                '         <option value="04:00">04:00</option>' +
                '         <option value="04:30">04:30</option>' +
                '         <option value="05:00">05:00</option>' +
                '         <option value="05:30">05:30</option>' +
                '         <option value="06:00">06:00</option>' +
                '         <option value="06:30">06:30</option>' +
                '         <option value="07:00">07:00</option>' +
                '         <option value="07:30">07:30</option>' +
                '         <option value="08:00">08:00</option>' +
                '         <option value="08:30">08:30</option>' +
                '         <option value="09:00">09:00</option>' +
                '         <option value="09:30">09:30</option>' +
                '         <option value="10:00">10:00</option>' +
                '         <option value="10:30">10:30</option>' +
                '         <option value="11:00">11:00</option>' +
                '         <option value="11:30">11:30</option>' +
                '         <option value="12:00">12:00</option>' +
                '         <option value="12:30">12:30</option>' +
                '         <option value="13:00">13:00</option>' +
                '         <option value="13:30">13:30</option>' +
                '         <option value="14:00">14:00</option>' +
                '         <option value="14:30">14:30</option>' +
                '         <option value="15:00">15:00</option>' +
                '         <option value="15:30">15:30</option>' +
                '         <option value="16:00">16:00</option>' +
                '         <option value="16:30">16:30</option>' +
                '         <option value="17:00">17:00</option>' +
                '         <option value="17:30">17:30</option>' +
                '         <option value="18:00">18:00</option>' +
                '         <option value="18:30">18:30</option>' +
                '         <option value="19:00">19:00</option>' +
                '         <option value="19:30">19:30</option>' +
                '         <option value="20:00">20:00</option>' +
                '         <option value="20:30">20:30</option>' +
                '         <option value="21:00">21:00</option>' +
                '         <option value="21:30">21:30</option>' +
                '         <option value="22:00">22:00</option>' +
                '         <option value="22:30">22:30</option>' +
                '         <option value="23:00">23:00</option>' +
                '         <option value="23:30">23:30</option>' +
                '     </select>' +
                '</div>' +
                '</div>';
            
            var arr = [
                { 
                    item: '<button type="button" id="Confirm" class="btn btn-success"  ></button>',
                    event: 'click',
                    btntext: 'Confirm'
                }, { 
                    item: '<button type="button" id="Close" class="btn btn-default" ></button>',
                    event: 'click',
                    btntext: 'Close'
                }
            ];

            /* Open a pop-up */
            var MonthCellModal= $.jsPanel({
                id: 'MonthCellModal',
                paneltype: 'modal',
                title: 'New Working Timesheet',
                theme: 'none',
                show: 'animated fadeInDownBig',
                position: "center",
                controls: 'none',
                content: htmlContent,
                toolbarFooter: arr,
                callback: function (MonthCellModal) { 
                    /* #Note: Customize jsPanel CSS, not using built-in theme */
                    this.css({ 'border' : '2px solid rebeccapurple'  });
                    this.header.css({ 'color': 'whitesmoke', 'background-color': 'rebeccapurple' });
                    this.content.css({ 'padding': '8px', 'color': 'whitesmoke', 'background-image': 'url("Templates/Template_2-0/2.0/img/bg/7.jpg")', 'background-repeat':'repeat-x'});
                    this.footer.css('background-color', 'rebeccapurple');


                    $("#Confirm").click(function () {  
                        var newID = DayPilot.guid();
                        var e = new DayPilot.Event({
                            start: args.start,
                            end: args.end,
                            id: newID,
                            text: newID
                        });
                        dpm.events.add(e); 
                        dpm.message("Created");  
						dpm.update();
						
						MonthCellModal.close();
					 });

                    $("#Close").click(function () { MonthCellModal.close() });
                }
            });
 
         
        };

        dpm.onEventClicked = function (args) {
            alert("clicked: " + args.e.tag("url"));
        };

        dpm.onHeaderClicked = function (args) {
            alert("day: " + args.header.dayOfWeek);
        };

        dpm.init();