剣道スケジューラカスタムタイムマーカー

Question

剣道UIスケジューラコンポーネントを使用しており、現在の時間マーカーのようなカスタムタイムマーカーを表示する必要があります。

これは可能なのですか、それを行う正しい方法は何でしょうか？

Answer 1

私はこれを達成すると考えることができる唯一の方法は、jQueryのを使用してdiv.k-scheduler-timesにdiv要素を挿入します

$("<div class='new-time-marker'></div>").prependTo("tr:nth-child(2) .k-scheduler-times"); 

あなたはそのスタイルは、通常のマーカーに似ているようにCSSで属性を設定することができます。位置はスケジューラのプロパティに基づいて計算され、次にdivに適用されます。

スケジューラがロードされた後にタイムマーカーを追加できます。たとえば、ドキュメントに表示されるメソッド（$("#scheduler").kendoScheduler({...});）を使用する場合、そのブロックの直後に時間マーカーを追加できます。

は、タイムマーカーのトップ値を設定するには、あなたが計算できる割合使用することができます。

$(".new-time-marker").css("top", ((9*60+22)*100/(24*60)) + "%"); 

をこの例では、マーカーは、9：22に表示されます。もちろん、このようにそれを行うこともできます。

$(".new-time-marker").css("top", ((9+22/60)*100/24) + "%"); 

は、この1のようなスタイルを追加します。

.new-time-marker { 
    width: 0px; 
    height: 0px; 
    border: 6px solid transparent; 
    border-left-color: blue; 
    position: absolute; 
    transform: translateY(-6px); 
} 

あなたがそれを指摘どこマーカの中心が右であることを確認します変換します。