Question

我使用dnCalendar使用dayClick事件每天获取事件。 github参考：dnCalendar。我在做ajax call＆amp;获取HTML响应并附加到HTML页面到目前为止这很好，但我的问题是我无法将“活动”类添加到当前在日历中单击的日期。如果我尝试使用下面的代码，则在控制台中显示错误“未捕获的TypeError：无法读取未定义的属性'target'”

我试过以下代码：

dayClick: function(date, view, event) {
 $(".note").removeClass("note");
 $(event.target).addClass("note"); 
}

在控制台中显示错误：未捕获的TypeError：无法读取未定义的属性“target”

我的代码：

$(document).ready(function() {
    var my_calendar = $("#dncalendar-container").dnCalendar({
    minDate: "2016-01-15",
    maxDate: "2100-12-31",
    monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
    monthNamesShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'Mey', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
    dayNames: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
    dayNamesShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
    notes: [ ],
    showNotes: true,
    startWeek: 'monday',
    dayClick: function(date, view, event) {
      $(".note").removeClass("note"); // I added these first 2 lines to add 'note' as my active class
      $(event.target).addClass("note");
      var eDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      $.ajax({
         url: "<?= base_url() ?>index.php/ajax/getSingleEventData",
         type: "POST",
         data: {e_date : eDate},
         success: function(response){
           console.log(response);
           $("#eventsHTML").html('');
           $('.show_calenderData').hide();
           $("#eventsHTML").html(response);
         }
      });    
     }
   });
   my_calendar.build();
});

HTML

<div class="row">
            <div class="col-md-5">
                <div class="block calender_box">
                    <div id="dncalendar-container"></div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="block calender_content text-left">
                      <div id="eventsHTML">
                       ------------
                       ------------
                      </div> <!-- id="eventsHTML" -->
                    </div>
                </div> <!-- class="row" -->
            </div> <!-- class="col-md-7" -->
</div> <!-- class="row" -->

在我的情况下，'active'类意味着'note'类。任何人都可以告诉如何在点击日期添加活动类？感谢。

Answer 1

$(document).ready(function() {
    var my_calendar = $("#dncalendar-container").dnCalendar({
    minDate: "2016-01-15",
    maxDate: "2100-12-31",
    monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
    monthNamesShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'Mey', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
    dayNames: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
    dayNamesShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
    notes: [{date: "2018-8-14"},{date: "2018-8-15"},{date: "2018-8-16"}],
    showNotes: true,
    startWeek: 'monday',
    dayClick: function(date, view, event) {
      $(".note").removeClass("note"); // I added these first 2 lines to add 'note' as my active class
      $(event.target).addClass("note");
      var eDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      $.ajax({
         url: "<?= base_url() ?>index.php/ajax/getSingleEventData",
         type: "POST",
         data: {e_date : eDate},
         success: function(response){
           console.log(response);
           $("#eventsHTML").html('');
           $('.show_calenderData').hide();
           $("#eventsHTML").html(response);
         }
      });    
     }
   });
   my_calendar.build();
});

> Blockquote

**And for day Click you can do like this**

如何在dnCalendar的dayClick事件中添加活动类？

1 个答案: