Выбор нескольких дат в виджете календаря Dojo

#javascript #json #dojo

#javascript #json #dojo

Вопрос:

В настоящее время я использую виджет календаря dojo, как вhttp://dojotoolkit.org/reference-guide/dojox/widget/Calendar.html

Мое требование заключается в следующем:

  1. Выберите несколько дат, чтобы пометить выбранные даты как праздничные и сохранить их в базе данных.
  2. Введите выбранные даты в виде JSON или массива
  3. После выбора даты цвет фона должен быть отмечен каким-либо цветом, чтобы подтвердить, что он выбран.
  4. После отмены выбора цвет фона необходимо изменить обратно на белый, чтобы подтвердить его невыбранность.

Как это можно было бы выполнить? Помощь очень ценится..

-Vinoth

Ответ №1:

Существует экспериментальный виджет MultiSelectCalendar

Комментарии:

1. спасибо, что указали на виджет MultiSelectCalendar. Но это доступно в dojo 1.7, а я использую dojo 1.6: (Мой клиент не одобрит 1.7 в ближайшем будущем. Есть ли способ выделить выбранную дату каким-либо цветом?

2. Эй, это выглядит великолепно! @Vinoth: может быть, ты сможешь взглянуть на этот новый код виджета и переопределить цветовую часть в своей версии 1.6 ?! Я еще не смотрел на это, поэтому понятия не имею, насколько это может быть сложно…

3. @Vinoth, вы можете попробовать посмотреть некоторые из старых исправлений из заявки на улучшение bugs.dojotoolkit.org/ticket/9679 я думаю, что изначально он был разработан для Dojo 1.6.

4. Хм, я мог бы попробовать это. Кстати, могу ли я воспользоваться multiSelectCalendar.js отдельно из 1.7 trunk и объединить его с 1.6? Это сработает или нужно будет сделать что-то дополнительное, чтобы это заработало? Насколько я понимаю, что-то должно быть сделано в dojo.js Я думаю.

5. IIRC, MultiSelectCalendar использует частные API и несовместим с выпусками 1.6 / 1.7, где был проведен серьезный рефакторинг календаря.

Ответ №2:

Вы можете попробовать это :

  <head>
    <script type="text/javascript">
        var selectedDates = {};
    </script>
 </head>
 <body class="soria">
    <style type="text/css">
        @import "dojox/widget/Calendar/Calendar.css";
    </style>
    <div dojoType="dojox.widget.Calendar">
        <script type="dojo/connect" event="onValueSelected" args="date">
            if (!selectedDates[date]) {
                selectedDates[date] = 1;
            } else {
                delete selectedDates[date];
            }
            var list = dojo.byId("selectedDates");
            dojo.attr(list, "innerHTML", "");
            for (var date in selectedDates) {
                if (selectedDates.hasOwnProperty(date)) {
                    dojo.create("li", {"innerHTML":date}, list);
                }
            }

        </script>
    </div>
    <ul id="selectedDates"></ul>
</body>
  

Я еще не понял, как сохранить выбранные ячейки цветными, но это должно быть выполнимо…

Комментарии:

1. Большое спасибо за решение. Сработало идеально, но я не смог изменить цвет для выбора и отмены выбора : (