使用Jquery，谁能帮助我在完整日历中突出显示日期颜色(在一周视图中) [英] Using Jquery,Can anyone help me with highlighting color of date(In a week view) in full calendar

问题描述

我有新的要求，使用Jquery，当Datepicker选择日期时，谁能帮我突出显示完整日历中日期的颜色(在一周视图中).

I got new requirement,Using Jquery,Can anyone help me with highlighting color of date(In a week view) in full calendar,when date got selected by a Datepicker.

$(document) .ready(function () {
        $(function() {
          $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function(dateText,inst){  

            var vals  = dateText.split("/"),eventDate =new Date(Number(vals[2]),Number(vals[1]), Number(vals[0]));
            //this.dayhighlight = eventDate;
         $('#calendar').fullCalendar( 'gotoDate', Number(vals[2]), Number(vals[1])-1, Number(vals[0]));  

            var eventDate1 =new Date(Number(vals[2]),Number(vals[1])-1,Number(vals[0]));

            var reqDate = new Date(eventDate1);  
            var dd = reqDate.getDate();
            var mm = reqDate.getMonth()+1;
            var yyyy = reqDate.getFullYear();                 

            dayRender: function(daysOfWeek, cell){                 

                 if(reqDate.getDate()==daysOfWeek.getDate())
                  {
                      $(cell).addClass('fc-state-highlight');
                  }
                  else
                  {
                      $(cell).removeClass('fc-state-highlight');
                  }
              }     
           }

        });  

       });
   });

我的代码功能正在运行.它将在FullCalendar中的WeekView中到达该特定日期，但是我无法突出显示该日期的单元格颜色，我正在使用JQuery v1，在这里尝试使用dayRender()，但是无法正常工作，任何人都可以帮我这个忙.

My code functionality is working.It is going to that particular date in a WeekView in FullCalendar but I am unable to highlight that cell color of the date,I am using JQuery v1,here trying to use dayRender() but it is not working,Can anyone help with me this please.

推荐答案

将dayRender属性放在datepicker的onSelect函数中.这可能会崩溃(检查您的控制台)，因为您无法在datepicker的回调函数中设置fullCalendar属性.

You put the dayRender property within the onSelect function of the datepicker. This will probably crash(check your console) as you can't set a fullCalendar property within a callback function of datepicker.

您的代码应如下所示:

$(document).ready(function() {
    // first set the selected date to null so there is no highlighted date
    var selected_date = null;

    // initialize the calendar (including the dayRender callback)
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultView: 'basicWeek',
        dayRender: function(date, cell){ 
            if (selected_date == $.datepicker.formatDate('yy-mm-dd', date)){
                $(cell).addClass('fc-highlight');
            }
        }
    });

    // initialize the date picker
    $( "#from" ).datepicker({
        onSelect: function( dateText, inst ) {
            // when the date changes, we update the selected_date
            var date = new Date(dateText);
            selected_date = $.datepicker.formatDate('yy-mm-dd', date);
            // call the goToDate method on fullCalendar
            $('#calendar').fullCalendar( 'gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
            // call render on calendar (so that the dayRender is called and the selected date is highlighted
            $('#calendar').fullCalendar('render'); 
        }
    });     
});

这是一个解决方案: JSFiddle

Here is an solution: JSFiddle

这篇关于使用Jquery，谁能帮助我在完整日历中突出显示日期颜色(在一周视图中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！