创建“今天”按钮

Question

尝试创建自己的“今日”按钮，如以下示例所示：Bootstrap Calendar。

但是，我无法复制相同的结果。如果已选择“上一个月”按钮或“下一个月”按钮，我试图保持计数并将计数传递给我的重置按钮。但是，一旦返回到当前月份，我将无法重置计数。

还是有更好的方法返回到当前月份？

如果这不是一个可接受的问题，请告诉我，我将调整我的问题或将其删除。

谢谢。

$(document).ready(function(){

				var CURRENT_DATE = new Date();
				var d = new Date();
				var count = 0;

				var content = 'January February March April May June July August September October November December'.split(' ');
				var weekDayName = 'SUN MON TUES WED THURS FRI'.split(' ');
				var daysOfMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

				// Returns the day of week which month starts (eg 0 for Sunday, 1 for Monday, etc.)
				function getCalendarStart(dayOfWeek, currentDate) {
				  var date = currentDate - 1;
				  var startOffset = (date % 7) - dayOfWeek;
				  if (startOffset > 0) {
					startOffset -= 7;
				  }
				
				  return Math.abs(startOffset);
				}

				// Render Calendar
				function renderCalendar(startDay, totalDays, currentDate) {
				  var currentRow = 1;
				  var currentDay = startDay;
				  var $table = $('table');
				  var $week = getCalendarRow();
				  var $day;
				  var $span;
				  
				  for (var i = 1; i <= totalDays; i++) {
					$day = $week.find('td').eq(currentDay);
					$day.text(i);
									
					if (i === currentDate) {
						if( i <= '9'){
							$day.addClass('today').append("<div class='circle1'><div style='position: relative; height: 56px;'>&nbsp;</div></div>");
						}else if(i >= '10' && i < '20'){
							$day.addClass('today').append("<div class='circle2'><div style='position: relative; height: 56px;'>&nbsp;</div></div>");
						}else{
							$day.addClass('today').append("<div class='circle3'><div style='position: relative; height: 56px;'>&nbsp;</div></div>");
						}
					}
					
					if(i != currentDate){
						$day.addClass('not-today' + i);
						var dayHovered = $day;
						if( i <= '9'){
							dayHovered.hover(function(e){
								var id = e.target.id;
								$(this).append("<div class='circle4'><div style='position: relative; height: 56px;'>&nbsp;</div></div>").css("color","white");
								}, function(){
								$(this).find( "div" ).remove();
								$(this).removeAttr("style");
							  });
						}else if(i >= '10' && i < '20'){
							dayHovered.hover(function(){
								$(this).append("<div class='circle5'><div style='position: relative; height: 56px;'>&nbsp;</div></div>").css("color","white");
								}, function(){
								$(this).find( "div" ).remove();
								$(this).removeAttr("style");
							  });
						}else{
							dayHovered.hover(function(){
								$(this).append("<div class='circle6'><div style='position: relative; height: 56px;'>&nbsp;</div></div>").css("color","white");
								}, function(){
								$(this).find( "div" ).remove();
								$(this).removeAttr("style");
							  });
						}
					}

					// +1 next day until Saturday (6), then reset to Sunday (0)
					currentDay = ++currentDay % 7;

					// Generate new row when day is Saturday, but only if there are
					// additional days to render
					if (currentDay === 0 && (i + 1 <= totalDays)) {
					  $week = getCalendarRow();
					  currentRow++;
					}
					
					//Add Events on certain days
					
				  }
				}
				
				// Clear generated calendar
				function clearCalendar() {
				  var $trs = $('tr').not(':eq(0)');
				  $trs.remove();
				  $('.month-year').empty();
				}

				// Generates table row used when rendering Calendar
				function getCalendarRow() {
				  var $table = $('table');
				  var $tr = $('<tr/>');
				  for (var i = 0, len = 7; i < len; i++) {
					$tr.append($('<td/>'));
				  }
				  $table.append($tr);
				  return $tr;
				}

				function myCalendar() {
				  var month = d.getUTCMonth();
				  var day = d.getUTCDay();
				  var year = d.getUTCFullYear();
				  var date = d.getUTCDate();
				  var totalDaysOfMonth = daysOfMonth[month];
				  var counter = 1;
					
				  var $h2 = $('<h2>');

				  $h2.text(content[month] + ' ' + year);
				  $h2.appendTo('.month-year');

				  var dateToHighlight = 0;

				  // Determine if Month && Year are current for Date Highlight
				  if (CURRENT_DATE.getUTCMonth() === month && CURRENT_DATE.getUTCFullYear() === year) {
					dateToHighlight = date;
				  }

				  //Getting February Days Including The Leap Year
				  if (month === 1) {
					if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
					  totalDaysOfMonth = 29;
					}
				  }

				  // Get Start Day
				  renderCalendar(getCalendarStart(day, date), totalDaysOfMonth, dateToHighlight);
				  
				  //Today function
				  updateTodayButton();
				};
				
				//Today Button
				function updateTodayButton(){
					var day = d.getUTCDay(), month = d.getUTCMonth(), year = d.getUTCFullYear();
					
					if (CURRENT_DATE.getUTCMonth() === month && CURRENT_DATE.getUTCDay() === day && CURRENT_DATE.getUTCFullYear() === year) {
						$("#todayButton").prop('disabled',true).css({"cursor":"no-drop", "background-color":"white"});
					}else{
						$("#todayButton").prop('disabled',false).css({"cursor":"pointer", "background-color":"white"});
						reset();
					}
				}	

				function reset(){
					var x = d.getUTCMonth();
					
					if (CURRENT_DATE.getUTCMonth() !== x){
					}
				}

				function navigationHandler(dir) {
				  d.setUTCMonth(d.getUTCMonth() + dir);
				  clearCalendar();
				  myCalendar();
				}

				$(document).ready(function() {
				  
				  // Bind Events
				  $('.prev-month').click(function() {
					navigationHandler(-1);
				  });
				  $('.next-month').click(function() {
					navigationHandler(1);
				  });
				  
				  // Generate Calendar
				  myCalendar();
				});
			});

* {
				margin: 0;
				padding: 0;
			}

			.container {
				margin-top: 80px;
			    border: 1px solid lightgrey;
				border-radius: 5px;
				-webkit-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
				-moz-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
				box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
			}

			th {
				height: 30px;
				text-align: center;
				font-weight: 700;
				font-size: 20px;
				background-color: #6296bb;
				color: white;
			}

			td {
				height: 100px;
				text-align: right;
				font-size: 16px;
			}

			.today {
				/*background-color: gray;*/
				color: white;
			}

			th:nth-of-type(7), td:nth-of-type(7) {
				font-weight: bold;
			}

			th:nth-of-type(1), td:nth-of-type(1) {
				font-weight: bold;
			}
			
			table tr:nth-child(odd) td{
				background-color: ;
			}
			
			table tr:nth-child(even) td{
				background-color: ;
			}
			
			.arrowRight{
				float:right;
				/*border: 1px solid #a7cb45;
				margin-right: 10px;*/
				width: 80px;
				height: 42px;
				/*-webkit-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
				-moz-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
				box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);*/
			}
			
			.arrowLeft{
				float:left;
				/*border: 1px solid #a7cb45;
				margin-left: 100px;*/
				width: 80px;
				height: 42px;
				/*-webkit-box-shadow: 2px 2px 10px rgba(98, 150, 187, 1);
				-moz-box-shadow: 2px 2px 10px rgba(98, 150, 187, 1);
				box-shadow: 2px 2px 10px rgba(98, 150, 187, 1);*/
			}
			
			.fa-chevron-left, .fa-chevron-right{
				color: #a7cb45;
				text-align: center; 
				margin-top: 15px;
				cursor: pointer;
				text-shadow: 3px 3px 16px #6296bb;
			}
			
			.fa-chevron-left:hover, .fa-chevron-right:hover{
				color: #f4f9fc;
			}
			
			/***********If there are Events***********/
			.ring-container {
				position: relative;
			}

			.circle {
				width: 15px;
				height: 15px;
				background-color: #62bd19;
				border-radius: 50%;
				position: absolute;
				top: 23px;
				left: 23px;
			}

			.ringring {
				border: 3px solid #62bd19;
				-webkit-border-radius: 30px;
				height: 25px;
				width: 25px;
				position: absolute;
				left: 15px;
				top: 15px;
				-webkit-animation: pulsate 1s ease-out;
				-webkit-animation-iteration-count: infinite; 
				opacity: 0.0
			}
			
			@-webkit-keyframes pulsate {
				0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
				50% {opacity: 1.0;}
				100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
			}
			/**********************************************/
			
			.circle1{
				font-size: 15px;
				margin: -5px;
				min-width: 19px;
				padding: 10px;
				text-align: center;
				width: 30px;
				height: 30px;
				margin-left: -20px;
				background-color: #a7cb45;
				/*opacity: .4;
				*/border-radius: 50%;
				float: right;
			}
			
			.circle2{
				font-size: 15px;
				margin: -5px;
				min-width: 19px;
				padding: 10px;
				text-align: center;
				width: 30px;
				height: 30px;
				margin-left: -23px;
				background-color: #a7cb45;
				/*opacity: .4;
				*/border-radius: 50%;
				float: right;
			}
			
			.circle3{
				font-size: 15px;
				margin: -5px;
				min-width: 19px;
				padding: 10px;
				text-align: center;
				width: 30px;
				height: 30px;
				margin-left: -24px;
				background-color: #a7cb45;
				/*opacity: .4;
				*/border-radius: 50%;
				float: right;
			}
			
			.circle4{
				font-size: 15px;
				margin: -5px;
				min-width: 19px;
				padding: 10px;
				text-align: center;
				width: 30px;
				height: 30px;
				margin-left: -20px;
				background-color: lightgrey;
				/*opacity: .4;
				*/border-radius: 50%;
				float: right;
			}
			
			.circle5 {
				font-size: 15px;
				margin: -5px;
				min-width: 19px;
				padding: 10px;
				text-align: center;
				width: 30px;
				height: 30px;
				margin-left: -23px;
				background-color: lightgrey;
				/*opacity: .4;
				*/border-radius: 50%;
				float: right;
			}
			
			.circle6 {
				font-size: 15px;
				margin: -5px;
				min-width: 19px;
				padding: 10px;
				text-align: center;
				width: 30px;
				height: 30px;
				margin-left: -24px;
				background-color: lightgrey;
				/*opacity: .4;
				*/border-radius: 50%;
				float: right;
			}
			
			#todayButton{
				float: right;
				margin-top: 25px;
				/*margin-right: 50px;*/
				padding: 1px 14px;
				border: 1px solid #6296bb;
				border-radius: 5px;
				font-size: 18px;
				text-shadow: 3px 3px 16px #6296bb;
				/*cursor: pointer;*/
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

	<div class="container">
	  <i class="prev-month fa fa-chevron-left fa-3x arrowLeft"></i> <i class="next-month fa fa-chevron-right fa-3x arrowRight"></i><button id="todayButton">Today</button>
	  <div class="month-year text-center" style="margin-bottom:22px"><h2></h2></div>
	  <table class="table table-bordered">
		<tr>
		  <th>Sun</th>
		  <th>Mon</th>
		  <th>Tue</th>
		  <th>Wed</th>
		  <th>Thu</th>
		  <th>Fri</th>
		  <th>Sat</th>
		</tr>
	  </table>
	</div>

更新：

如果有人对此感兴趣，我可以进行以下操作：

$("#todayButton").click(function() {
      var currentMonth = CURRENT_DATE.getMonth(), currentYear = CURRENT_DATE.getFullYear();

        var monthOn = d.getMonth(), yearOn = d.getFullYear();

        if(currentMonth === 0 || monthOn === 0){
            currentMonth++;
            monthOn++;
        }
        var numberOfMonths;

        numberOfMonths = (yearOn - currentYear) * 12 + (monthOn - currentMonth);

        navigationHandler(numberOfMonths * -1)
  });