Kendo 拖动时的调度程序时间格式

Question

我希望能够更改您在拖动事件时看到的时间格式。例如，它以 12 小时格式显示开始和结束时间，但我想以 24 小时格式显示它。

Kendo 论坛上有人建议：

function resize(e) {
  var template = "your custom template";
  $(".k-event-drag-hint").html(template);
}

但是选择器没有 return 元素。有什么想法吗？

Answer 1

请尝试使用以下代码片段。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="scheduler"></div>
    <script>
        $(function () {
            $("#scheduler").kendoScheduler({
                date: new Date("2013/6/13"),
                startTime: new Date("2013/6/13 07:00 AM"),
                height: 600,
                views: [
                    "day",
                    { type: "workWeek", selected: true },
                    "week",
                    "month",
                    "agenda",
                    { type: "timeline", eventHeight: 50 }
                ],
                timezone: "Etc/UTC",
                move: scheduler_move,
                resizeStart: scheduler_resizeStart,
                resize: scheduler_resize,
                resizeEnd: scheduler_resizeEnd,
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks",
                            dataType: "jsonp"
                        },
                        update: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                            dataType: "jsonp"
                        },
                        create: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                            dataType: "jsonp"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "taskId",
                            fields: {
                                taskId: { from: "TaskID", type: "number" },
                                title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                                start: { type: "date", from: "Start" },
                                end: { type: "date", from: "End" },
                                startTimezone: { from: "StartTimezone" },
                                endTimezone: { from: "EndTimezone" },
                                description: { from: "Description" },
                                recurrenceId: { from: "RecurrenceID" },
                                recurrenceRule: { from: "RecurrenceRule" },
                                recurrenceException: { from: "RecurrenceException" },
                                ownerId: { from: "OwnerID", defaultValue: 1 },
                                isAllDay: { type: "boolean", from: "IsAllDay" }
                            }
                        }
                    }
                }
            });
        });
        function scheduler_move(e) {
            var startdate = formatDate(e.start);
            var enddate = formatDate(e.end);
            var template = "your custom template. from:- " + startdate + " - " + enddate;
            $(".k-event-drag-hint").html(template);
        }
        function formatDate(date) {
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var strTime = hours + ':' + ('0' + minutes).slice(-2);
            return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + "  " + strTime;
        }


        var myVar;
        var starttimer;
        var endtimer;

        function myTimer() {
            if (starttimer && endtimer) {
                $(".k-scheduler-marquee .k-label-top").html(starttimer);
                $(".k-scheduler-marquee .k-label-bottom").html(endtimer);
            }
        }


        function scheduler_resize(e) {
            starttimer = formatTime(e.start);
            endtimer = formatTime(e.end);

        }
        function formatTime(date) {
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var strTime = hours + ':' + ('0' + minutes).slice(-2);
            return strTime;
        }

        function scheduler_resizeStart(e) {
            myVar = setInterval(function () { myTimer() }, 2);
        }

        function scheduler_resizeEnd(e) {
            clearInterval(myVar);
        }

    </script>

</body>
</html>

如有任何疑问，请告诉我。

Kendo 拖动时的调度程序时间格式

Kendo Scheduler Time Format When Dragging

kendo-ui

kendo-scheduler