Kendo ui 拖动时的剑道计划程序时间格式_Kendo Ui_Kendo Scheduler

Kendo ui 拖动时的剑道计划程序时间格式

kendo-ui

Kendo ui 拖动时的剑道计划程序时间格式,kendo-ui,kendo-scheduler,Kendo Ui,Kendo Scheduler,我希望能够更改拖动事件时看到的时间格式。例如，它以12小时格式显示开始和结束时间，但我想以24小时格式显示剑道论坛上有人建议： function resize(e) { var template = "your custom template"; $(".k-event-drag-hint").html(template); } 但是，选择器不会返回元素。有什么想法吗？请尝试下面的代码片段 <!DOCTYPE html> <html> <head>

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

剑道论坛上有人建议：

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

但是，选择器不会返回元素。有什么想法吗？

请尝试下面的代码片段

<!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>


无标题
$（函数（）{
$（“#调度程序”）.kendoScheduler({
日期：新日期（“2013/6/13”），
开始时间：新日期（“2013/6/13 07:00 AM”），
身高：600，
观点：[
“一天”，
{键入：“工作周”，选中：true}，
“一周”，
“月”，
“议程”，
{键入：“时间线”，事件高度：50}
],
时区：“Etc/UTC”，
移动：移动，
resizeStart:scheduler\u resizeStart，
调整大小：调度程序的大小，
resizeEnd:scheduler\u resizeEnd，
数据源：{
批次：对，
运输：{
阅读：{
url:“http://demos.telerik.com/kendo-ui/service/tasks",
数据类型：“jsonp”
},
更新：{
url:“http://demos.telerik.com/kendo-ui/service/tasks/update",
数据类型：“jsonp”
},
创建：{
url:“http://demos.telerik.com/kendo-ui/service/tasks/create",
数据类型：“jsonp”
},
销毁：{
url:“http://demos.telerik.com/kendo-ui/service/tasks/destroy",
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
}
},
模式：{
型号：{
id:“任务id”，
字段：{
taskId:{from:“taskId”，键入：“number”}，
标题：{from:“title”，defaultValue:“No title”，验证：{required:true}，
开始：{键入：“日期”，从：“开始”}，
结束：{type:“date”，from:“end”}，
startTimezone:{from:“startTimezone”}，
endTimezone:{from:“endTimezone”}，
描述：{from:“description”}，
recurrenceId:{from:“recurrenceId”}，
复发癌：{来自：“复发癌”}，
recurrenceException:{from:“recurrenceException”}，
ownerId:{from:“ownerId”，默认值：1}，
isAllDay:{type:“boolean”，from:“isAllDay”}
}
}
}
}
});
});
函数调度程序_移动（e）{
var startdate=格式化日期（即开始）；
var enddate=格式日期（e.end）；
var template=“您的自定义模板。from:-”+startdate+“-”+enddate；
$（.k-event-drag-hint”）.html（模板）；
}
函数格式日期（日期）{
var hours=date.getHours（）；
var minutes=date.getMinutes（）；
var strTime=hours+'：'+（'0'+minutes）.slice（-2）；
返回日期.getMonth（）+1+“/”+date.getDate（）+“/”+date.getFullYear（）+“+strTime；
}
var-myVar；
var starttimer；
var定时器；
函数myTimer（）{
if（开始计时器和结束计时器）{
$（.k-scheduler-marquee.k-label-top”）.html（starttimer）；
$（.k-scheduler-marquee.k-label-bottom”）.html（endtimer）；
}
}
函数调度程序_调整大小（e）{
starttimer=格式化时间（如开始）；
endtimer=格式化时间（即结束）；
}
函数格式化时间（日期）{
var hours=date.getHours（）；
var minutes=date.getMinutes（）；
var strTime=hours+'：'+（'0'+minutes）.slice（-2）；
返回时间；
}
函数计划程序\调整大小启动（e）{
myVar=setInterval（函数（）{myTimer（）}，2）；
}
函数调度程序_resizeEnd（e）{
净距（myVar）；
}

如果有任何问题，请告诉我。

这适用于移动事件，但不适用于调整事件大小。我把你的代码应用到一个调整大小的事件中，但运气不好。我假设在调整大小时使用了一些类。