I want to be able to change the time format you see when dragging an event. For example it shows the start and end time in 12 hour format but I want to show it in 24 hour format.
Someone on the Kendo forum suggested:
function resize(e) {
var template = "your custom template";
$(".k-event-drag-hint").html(template);
}
However the selector doesn't return an elements. Any ideas?
Please try with the below code snippet.
<!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>
Let me know if any concern.