帶datePicker的日曆事件 - 停止刷新

Question

我需要在某天開發一個帶有事件關聯的日曆。我做這個用日期選擇器，看看我的日曆：

我已經創造了一些事件（共3個），並在第1天，2和3是一天活動的顏色;當我用事件點擊某一天時，它會將事件信息顯示到特定的div中。

一切都好，那個工作，但是當我點擊一天的元素，我的div與事件的顏色消失。

檢查我的代碼：

(function($) { 
    $(document).ready(function() { 

     var events = [<?php $nb = 0; 
      $args = array(
       'post_type' => 'evenement', 
       'posts_per_page' => -1 
      ); 
      $loop = new WP_Query($args); 

      while ($loop->have_posts()) : $loop->the_post(); $nb++; 
      $date = get_field('date'); 
      $date_info = explode("/",$date); 
      $year = $date_info[2]; 
      $month = $date_info[0]; 
       $day = $date_info[1]; 
       /** HACK TO GET GOOD DAY/MONTH FORMAT todo: optimise it */ 
       if($day == "01"): $day = '1'; endif; 
       if($day == "02"): $day = '2'; endif; 
       if($day == "03"): $day = '3'; endif; 
       if($day == "04"): $day = '4'; endif; 
       if($day == "05"): $day = '5'; endif; 
       if($day == "06"): $day = '6'; endif; 
       if($day == "07"): $day = '7'; endif; 
       if($day == "08"): $day = '8';endif; 
       if($day == "09"): $day = '9'; endif; 
       if($month == "01"): $month = '1'; endif; 
       if($month == "02"): $month = '2'; endif; 
       if($month == "03"): $month = '3'; endif; 
       if($month == "04"): $month = '4'; endif; 
       if($month == "05"): $month = '5'; endif; 
       if($month == "06"): $month = '6'; endif; 
       if($month == "07"): $month = '7'; endif; 
       if($month == "08"): $month = '8';endif; 
       if($month == "09"): $month = '9'; endif; 
       //if($day == "0".$x): $day = $x; endif;?>{ 
      Title: "<?php echo get_the_title(); ?>", 
      Date: new Date("<?php echo get_field('date'); ?>"), 
      Lieu: "<?php echo get_field('ville'); ?>", 
      Extrait: "<?php echo get_the_excerpt(); ?>", 
      Type: "<?php echo get_field('type'); ?>", 
      Year: "<?php echo $year; ?>", 
      Month: "<?php echo $month; ?>", 
      Day: "<?php echo $day; ?>" 
      }<?php //if(count($nb) == $nb): ?>,<?php //endif; ?><?php endwhile; wp_reset_postdata(); ?>]; 

     $("#cal_content").datepicker({ 
      dayNamesMin: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ], 
      monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ], 
      nextText: "Suivant", 
      prevText: "Précédent", 
      //dateFormat: 'dd-mm-yy', 
      beforeShowDay: function(date) { 
       var result = [true, '', null]; 
       var matching = $.grep(events, function(event) { 
        return event.Date.valueOf() === date.valueOf(); 
       }); 

       if (matching.length) { 
        result = [true, 'highlight', null]; 
       } 
       return result; 


      }, 
      onSelect: function(dateText) { 
       var date, 
        selectedDate = new Date(dateText), 
        i = 0, 
        event = null; 

       // Determine if the user clicked an event: 
       while (i < events.length && !event) { 
        date = events[i].Date; 

        if (selectedDate.valueOf() === date.valueOf()) { 
         //console.log('clicked'); 
         event = events[i]; 
        }else{ 
         //console.log('no clicked'); 
        } 
        i++; 
       } 
       if (event) { 
        // If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. 
        //alert(event.Title); 
        $('#cal_event_content').html(
         '<div class="event type_'+event.Type+'">' 
          +'<span class="title">'+event.Title+'</span>' 
          +'<span class="date">'+event.Day+'/'+event.Month+'/'+event.Year+'</span>' 
          +'<span class="lieu">'+event.Lieu+'</span>' 
          +'<span class="content">'+event.Extrait+'</span>' 
          //+'day : '+event.Day 
         +'</div>' 
        ); 
       } 
      } 
     }); 

     $(".ui-datepicker-calendar .ui-state-default").each(function() { 
      var year = $(".ui-datepicker-year").first().html(); 
      var nb; 
      var month = $(this).parent().attr("data-month"); 
      var real_month = +month +1; // need this hack to get good month id (datepicker put 9 for october per exemple) 
      for (nb = 0; nb < events.length; ++nb) { 
       if (($(this).parent().attr("data-year") == events[nb].Year) && (real_month == events[nb].Month) && $(this).html() == events[nb].Day) { 
        var type = events[nb].Type; 
        $(this).after('<div class="puce_color '+type+'"></div>'); 
       } 
      } 
     }); 

    }); 
})(jQuery); 

當我點擊日期，我puce_color消失..

有人能幫助我嗎？

我很想每天添加多個活動..但我不知道該怎麼做。

非常感謝您的幫助。

Answer 1

這裏的問題是每次您選擇日曆「刷新」的日期。這個答案將在三個部分的最終演示代碼上Codepen可分爲：

停止重繪上SelectDate

有了這個，我們確保附加元素會保留在實際日曆視圖中可見，在您選擇funtion設置inst-inline假：

onSelect: function(dateText, inst) { 
     inst.inline = false; 

^{Related Topic}

---

重繪的變化月份

你也失去了你的附加活動的指標時，因爲事件的月變化只是附着在你可以改變這就像一個函數每次運行負荷您更改月份：

function drawEvents(fnyear, fnmonth, fnobj) { 
    $('#' + fnobj).find(".ui-datepicker-calendar .ui-state-default").each(function() { 
    var nb; 
    for (nb = 0; nb < events.length; ++nb) { 
     if ((fnyear == events[nb].Year) && (fnmonth == events[nb].Month) && $(this).html() == events[nb].Day) { 
     var type = events[nb].Type; 
     $(this).after('<div class="puce_color ' + type + '"></div>'); 
     } 
    } 
    }); 
} 

然後在負載運行的實際日曆日期的功能：

var startdate = $('#cal_content').datepicker('getDate'), 
    startmonth = startdate.getMonth() + 1,    
    startyear = startdate.getFullYear(); 
drawEvents(startyear,startmonth,"cal_content"); 

而且在ChangeMonth執行函數：

onChangeMonthYear: function(year, month, widget) { 
    setTimeout(function(){ 
    drawEvents(year, month, widget.id) 
    }) 
} 

^{注::的setTimeout功能確保了對實際月份的變化--- Related}

---

CodepenDemo

---

在天

檢查多重活動21/10/2016

CodepenDemo