Kendo計劃程序時間格式拖動時

我希望能夠更改拖動事件時看到的時間格式。例如，它以12小時格式顯示開始和結束時間，但我想以24小時格式顯示它。Kendo計劃程序時間格式拖動時

有人在劍道論壇建議：

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

但是選擇不返回元素。有任何想法嗎？

來源

2015-08-09 Scott Walter

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

讓我知道是否有任何問題。

來源

2015-08-10 12:14:57

這適用於移動事件，但不適用於調整事件大小。我把你的代碼應用到沒有運氣的resize事件中。我假設有一些調整大小時使用的類。 –

Kendo計劃程序時間格式拖動時

回答

相關問題