Question

我试图将当前视图中显示的日期列为选择标记内的选项（例如，如果当前视图具有8月13日星期日至8月19日星期六，则那些日期中的每一天都将作为选择的一部分出现下拉）。

在客户端，我可以通过scheduler.getState().min_date和scheduler.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。

Answer 1

我不确定你是否可以在模板级别进行。我认为最简单的解决方案是在模板中有一个空元素，并使用客户端JS用选项填充它。

尝试捕获调度程序的 onViewChange 或 onBeforeViewChange 事件 - 当用户更改调度程序视图或日期时，它们会触发。在处理程序内部，您可以获取显示的日期范围并为下拉列表生成选项。

您可以使用 scheduler.date 帮助程序来迭代几天，这是一个演示（请参阅HTML标签）： http://snippet.dhtmlx.com/afbdc33fb

当前视图中的天数进入选择控件（DHTMLX Scheduler）

1 个答案: