Dynamic custom calendar where day cell is text area Using Jquery.

custom_calendar.js

  $( document ).on('turbolinks:load', function() {
	var deferentMonth = 0;
	var prevEl = document.getElementById('ac-prev'), // get the ID of the prev month button
	    nextEl = document.getElementById('ac-next'), // get the date of the next month button
	    daysEl = document.getElementById("custom_calndar2");
		const months = [
	   		"JANUARY",
	        "FEBRUARY",
	        "MARCH",
	        "APRIL",
	        "MAY",
	        "JUNE",
	        "JULY",
	        "AUGUST",
	        "SEPTEMBER",
	        "OCTOBER",
	        "NOVEMBER",
	        "DECEMBER"];
		create_calendar();
		if( prevEl != null){
			prevEl.addEventListener("click", prev_ac);
		}
		if ( nextEl != null ){
			nextEl.addEventListener("click", next_ac);
		}

		function prev_ac() {
		  	deferentMonth--;
		  	create_calendar();
		}

		function next_ac() {
		  	deferentMonth++;
		  	create_calendar();
		}
		function create_calendar() {
			var d = new Date();
		  	var n = d.getDate();
		  	d.setMonth(d.getMonth() + deferentMonth);
		  	var year = d.getFullYear(),
		    month = d.getMonth(),
		    dayCount = (new Date(year, month + 1, 0)).getDate(),
		    dayStart = (new Date(year, month, 1)).getDay(); 
			if (dayStart === 0){
		        dayStart = 7;
		    }
			var today = null;
		   
		    if (deferentMonth === 0) {
		   		today = d.getDate();
		    }
			generate_calendar(dayCount, today, dayStart, year, month, start_date='', end_date='');
		}
			function generate_calendar(count, today, start, year, month, start_date, end_date){
			 var obj_daysOfWeek = [
	   			'Sunday',
	   			'Monday',
	   			'Tuesday',
	   			'Wednesday',
	   			'Thursday',
	   			'Friday',
	   			'Saturday',];
	   			var html = '<table class="" id="availability_custom_cal"><thead><tr>'
	   			$.each( obj_daysOfWeek, function( index, value ) {
				 	var new_week_days = value.slice(0,3);
					html += '<th>'+ value +'</th>';
				});
		 	 	html += '</tr></thead><tbody>';
			   	if (start > 0){
			  	html += '<td colspan="'+ start +'" class="">&nbsp;</td>'; 
			   	}
			 	for (var i = 1; i <= count; i++) {
			 		if (start == 7) {
			       		start = 0;
			       		html += '</tr><tr>';
					}
//             creating formated date using momentJS
   					var loop_date = moment(i+' '+months[month]+' '+year).format(); //format the date optional
   					var day = moment(loop_date).format("DD MMM"); //get the day and month abriviation optional
   					var day_of_week = moment(loop_date).format("ddd"); //get the day of the week optional
   					day_of_week = day_of_week.toLowerCase(); //optional
   					html += '<td><div class="textarea_main"><textarea class="calendar-row" name="cal_schedules[]"></textarea><span>'+day+'</span></div>'
   					start++;
 				}
				$('#month_name').text(''+months[month]+','+year+'');
			$('#custom_calendar_here').html(html); // put the the calendar inside the #custom_calendar_here <div>
		}



  });