Формат времени планировщика 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

Это работает для перемещения события, но не для изменения размера события. Я взял ваш код и применил его к событию изменения размера без везения. Я предполагаю, что существует некоторый класс, который используется при изменении размера. –

Формат времени планировщика Kendo при перетаскивании

ответ

Смежные вопросы