2017-08-19 157 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.getState().min_date %>我得到scheduler is undefined

+0

不得不使用window.scheduler從全局執行上下文中獲取它... – Flip

回答

0

我不確定您是否可以在模板級別執行此操作。我認爲最簡單的解決方案是在模板中有一個空元素,並使用客戶端JS的選項填充它。

嘗試捕捉調度的onViewChangeonBeforeViewChange事件 - 當用戶更改調度視圖或日期,他們開火。在處理程序中,您可以獲取顯示的日期範圍併爲您的下拉列表生成選項。

您可以使用scheduler.date幫手,以遍歷天,這裏是一個演示(見HTML標籤): http://snippet.dhtmlx.com/afbdc33fb

相關的API:

相關問題