Question

我正在使用W3widgets calendar，我想通过Python / Django动态设置日期。在JavaScript钩子中输入值标记后，它只选择一个日期，并且有多个日期条目。如何选择所有日期条目并在日历上显示？

以下是html / JavaScript代码和源代码。

HTML：

 <!-- Responsive calendar - START -->
    <div class="responsive-calendar">
    <div class="controls">
        <a class="pull-left" data-go="prev"><div class="btn btn-primary">Prev</div></a>
        <h4><span data-head-year></span> <span data-head-month></span></h4>
        <a class="pull-right" data-go="next"><div class="btn btn-primary">Next</div></a>
    </div><hr/>
    <div class="day-headers">
      <div class="day header">Mon</div>
      <div class="day header">Tue</div>
      <div class="day header">Wed</div>
      <div class="day header">Thu</div>
      <div class="day header">Fri</div>
      <div class="day header">Sat</div>
      <div class="day header">Sun</div>
    </div>
    <div class="days" data-group="days">

    </div>
  </div>
  <!-- Responsive calendar - END -->
</div>

<!--where Django for loop starts -->
 {% for bring_out_date in bring_out_dates %}

<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
      //here's the tag I'm talking about
        "{{ bring_out_date.booked_dates|date:"Y-m-d"}}": {"number":  {{bring_out_date.id}}}}
      });
    });
 </script>

{% empty %}

    <p> no date selected. update your calendar </p>

    {% endfor %}

它在源代码中的外观：

<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-03-11": {"number":12}}
    });
  });
 </script>

<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-03-12": {"number":13}}
    });
  });
</script>


<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2013-01-09": {"number":31}}
    });
  });
</script>

<script type="text/javascript">
   $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-04-03": {"number":15}}
     });
   });
  </script>


 <script type="text/javascript">
   $(document).ready(function () {
     $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-04-09": {"number":19}}
     });
   });
 </script>

如何选择所有日期条目并在日历上显示？这可能是jQuery没有选择所有其他的forloop吗？

Answer 1

我通过将for循环放入事件中来实现它：feeder -

events: {
{% for vDate, vClass, vBadges in cal_list %}
"{{vDate}}": {"class":"{{vClass}}", {% if vBadges != 0 %}"number": "{{vBadges}}",         
"badgeClass": "badge-primary"{% endif %}},{% endfor %}

jQuery首先在forloop上运行，而不是在Django中使用其他forloop元素

1 个答案: