/**
     * Implementación del filtrado del calendario, utilizando los mismos dias
     */
    day = new DayPilot.Scheduler("dpCalendar");
    addEventHandlers(day, 'day');
    day.init();

    month = new DayPilot.Scheduler("dpMonth");
    addEventHandlers(month, 'month');
    month.init();

    function addEventHandlers(dp, viewType) {
        dp.theme = "default";
        // Validation if is for day or months
        if (viewType === "day") {
            dp.cellGroupBy = "Day";
            dp.timeHeaders = [
                {"groupBy": "Month"},
                {"groupBy": "Day", "format": "ddd"},
                {"groupBy": "Day", "format": "d"}
            ];
            dp.scale = "Day";
            // Initial Date
            dp.startDate = DayPilot.Date.today().firstDayOfMonth();
            dp.days = 300;
        } else {
            dp.cellGroupBy = "Month";
            dp.timeHeaders = [
                {groupBy: "Year"},
                {groupBy: "Month"}
            ];
            dp.scale = "Month";
            // Change the size of the event column, necessary for months
            dp.cellWidth = 150;
            // Initial Date
            dp.startDate = DayPilot.Date.today().firstDayOfMonth();
            dp.days = 300;
        }
        // Behavior and appearance
        dp.timeRangeSelectedHandling = "Disabled";
        dp.treePreventParentUsage = true;
        dp.useEventBoxes = "Never";
        dp.snapToGrid = true;
        dp.moveBy = 'Full';
        // Header control -> Resources
        dp.rowHeaderWidthAutoFit = true;
        dp.rowMinHeight = 25; dp.eventHeight = 45;
        dp.rowMarginTop = 1;
        dp.rowMarginBottom = 1;
        dp.rowHeaderColumns = [
            {text: "Resource", display: "name"}
        ];
        // Scrolling control
        dp.infiniteScrollingEnabled = true;
        dp.infiniteScrollingMargin = 20;
        dp.infiniteScrollingStepDays = 100;
        //
        dp.dynamicLoading = true; // events can loading dynamically with the scroll
        dp.onScroll = function (args) {
            args.async = true;
            //
            args.events = eventScroll(dp, args);
            //
            setTimeout(function () {
                args.loaded();
            }, 800);
        };
        // Event Handling
        dp.eventMoveHandling = "Update";
        dp.eventHoverHandling = "Bubble";
        dp.bubble = new DayPilot.Bubble({
            onLoad: function (args) {
                // if event object doesn't specify "bubbleHtml" property
                // this onLoad handler will be called to provide the bubble HTML
                //args.html = "Event details";
            }
        });

        dp.onRowFilter = function (args) {
            var str = args.filter.toUpperCase()
            var trades = str.replace(/ +(?= )/g, ''); // Remove multiples spaces
            if (args.row.name.toUpperCase().indexOf(trades) === -1) {
                args.visible = false;
                $("#noCrewF").show();
            } else {
                $("#noCrewF").hide();
            }
        };

        dp.onEventMoved = function (args) {
            args.preventDefault();
            if (args.external) {
                createEvent(dp, args);
            } else {
                // Update the event move
                eventMoved(dp, args);
            }
        };

        dp.eventResizeHandling = "Update";
        dp.onEventResized = function (args) {
            eventResize(dp, args);
        };

        // event creating
        dp.onTimeRangeSelected = function (args) {
            alert("hi");
        };

        dp.eventDeleteHandling = "Disabled";
        dp.eventClickHandling = "Enabled";
        dp.onEventMouseOver = function (args) {
            var id = args.e.id();
            dp.bubble = new DayPilot.Bubble({
                cssOnly: true,
                theme: "bubble_event",
                onLoad: function (args) {
                    args.html = "Event";
                }
            });
            args.preventDefault();// cancel the default action
        };
        loadResources();        
    }

    // filter control
    function filterCalendar(query) {
        day.rows.filter(query); // see dp.onRowFilter below
        month.rows.filter(query); // see dp.onRowFilter below
    }

    function makeDraggable() {
        var parent = document.getElementById("external");
        var items = parent.getElementsByTagName("li");
        for (var i = 0; i < items.length; i++) {
            var e = items[i];
            var textF = e.getAttribute("data-stage") + "/" + e.getAttribute("data-contact") + "/" +
                    e.getAttribute("data-company") + "/" + e.getAttribute("data-vendor");
            var item = {
                element: e,
                id: e.getAttribute("data-id"),
                text: textF,
                duration: e.getAttribute("data-duration"),
                keepElement: true
            };
            DayPilot.Scheduler.makeDraggable(item);
        }
    }
    makeDraggable();

    var switcher = new DayPilot.Switcher({
        triggers: [
            {id: "buttonDay", view: day},
            {id: "buttonMonth", view: month}
        ],
    });
    switcher.select("buttonDay");
});