Days in current view into select control (DHTMLX Scheduler)

Question

I"m trying to list the days shown in the current view as options inside a select tag (for example if the current view has Sun Aug 13th through Sat Aug 19th, then each of those days would appear as part of the select dropdown).

On the client-side I can get the min and max days of the current view via scheduler.getState().min_date and scheduler.getState().max_datebut I'm not sure how to get this same information inside my EJS tempalte below and iterate over the days:

<!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>

if I try to do something like this <%= scheduler.getState().min_date %> I get scheduler is undefined.

Had to use window.scheduler to get it from the global execution context... — Flip, Sep 08 '17 at 15:47

score 0 · Answer 1 · answered Aug 25 '17 at 09:31

I'm not sure if you can do it at the template level. I think the simplest solution would be to have an empty element in the template and populate it with options using client-side JS.

Try capturing onViewChange or onBeforeViewChange events of scheduler - they fire when the user changes scheduler view or date. Inside the handler, you can get the displayed date range and generate options for your dropdown.

You can use scheduler.date helper in order to iterate over days, here is a demo (see HTML tab): http://snippet.dhtmlx.com/afbdc33fb

related API:

Days in current view into select control (DHTMLX Scheduler)

1 Answers1