在SelectDate

Question

我需要在某一天开发一个带有事件关联的日历。我使用datePicker制作并查看我的日历：

我创建了一些活动（总共3个），第1,2和3天的颜色是活动当天！当我点击某个事件的某一天时，它会将事件信息显示在特定的div中。

一切都好，那就行了，但是当我点击带元素的一天时，我的div为事件的颜色消失了。

检查我的代码：

UICollectionView

当我点击日期时，我的(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 );消失了..

是的，有人能帮帮我吗？

我也想每天添加多个活动..但我不知道该怎么做。

非常感谢你的帮助。

Answer 1

这里的问题是每次选择日期时，日历都会刷新＆＃34;。这个答案将分为三个部分，最后一个演示代码在Codepen上：

在SelectDate

上停止重绘

有了这个，我们确保附加元素在实际日历视图中保持可见，在您选择功能集inst-inline上为false：

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)
  })
}

使用datePicker的日历事件 - 停止刷新

1 个答案:

在SelectDate

在更改月份时重绘

CodepenDemo

一天多个活动

CodepenDemo