2017-08-19 13 views
0

現在のビューに表示されている日を選択タグ内のオプションとして表示しようとしています(たとえば、現在のビューに8月13日〜8月19日その日のそれぞれは選択ドロップダウンの一部として表示されます)選択コントロール(DHTMLXスケジューラ)への現在のビューの日数

クライアント側では、scheduler.getState().min_datescheduler.getState().max_dateで現在のビューの最小日と最大日を取得できますが、これを取得する方法はわかりません私EJSの下にtempalteと日を反復処理する内部情報:

<!doctype html> 
<head> 
    <title>MealMate</title> 
    <script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script> 
    <link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"> 
    <link rel="stylesheet" href="/stylesheets/main.css"> 
</head> 

<script type="text/javascript" charset="utf-8"> 
    function init() { 
     scheduler.config.xml_date="%Y-%m-%d %H:%i"; 
     scheduler.config.first_hour = 7; 
     scheduler.config.last_hour = 19; 
     scheduler.config.start_on_monday = false; 
     scheduler.init('scheduler_here',"","week"); 

     scheduler.templates.xml_date = function(value) { return new Date(value); }; 
     scheduler.load("/calendar/data", "json"); 

     var dp = new dataProcessor("/calendar/data"); 
     dp.init(scheduler); 
     dp.setTransactionMode("POST", false); 

    } 
</script> 

<body onload="init();"> 

    <div class="ui form" id="addForm"> 
     <div class="inline field"> 
      <label for="date">Date:</label> 
       <select class="ui dropdown" name="date" id="date"> 
        <option selected disabled hidden>Choose one</option> 
        //ITERATION OF DAYS IN CURRENT VIEW HERE// 
       </select> 
     </div> 

     <div class="inline fields"> 
      <input type="button" name="save" value="Save" id="save" style='width:100px;' onclick="save_form()"> 
      <input type="button" name="close" value="Close" id="close" style='width:100px;' onclick="close_form()"> 
      <input type="button" name="delete" value="Delete" id="delete" style='width:100px;' onclick="delete_event()"> 
     </div> 
    </div> 

    <div id="scheduler_here" class="dhx_cal_container"> 
     <div class="dhx_cal_navline"> 
      <div class="dhx_cal_prev_button">&nbsp;</div> 
      <div class="dhx_cal_next_button">&nbsp;</div> 
      <div class="dhx_cal_today_button"></div> 
      <div class="dhx_cal_date"></div> 
      <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div> 
      <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> 
      <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div> 
      <div class="dhx_cal_tab ui blue button" id="addButton" name="add"></div> 
     </div> 
     <div class="dhx_cal_header"> 
     </div> 
     <div class="dhx_cal_data"> 
     </div> 
    </div> 

    <script src="/calendarLogic.js"></script> 
</body> 

私はこのような何かをしようとした場合私はscheduler is undefinedを取得します。

+0

グローバル実行コンテキストから取得するためにwindow.schedulerを使用しなければならなかった... – Flip

答えて

0

テンプレートレベルで実行できるかどうかわかりません。私は、最も単純な解決策は、テンプレートに空の要素を入れ、クライアントサイドJSを使ってオプションを設定することだと思います。

スケジューラのonViewChangeまたはonBeforeViewChangeイベントをキャプチャしてみ - ユーザーは、スケジューラビューまたは日付を変更したとき、彼らは火。ハンドラの内部では、表示されている日付範囲を取得し、ドロップダウンのオプションを生成できます。

あなたは日を反復処理するために、scheduler.dateヘルパーを使用することができ、ここでデモがある(HTMLタブを参照してください): http://snippet.dhtmlx.com/afbdc33fb

関連API:

関連する問題