Develop Reference

How to fix it with date format?

In this script it tries to do so that when you choose the date and the given format it shows. Of course, something is wrong with validation . If the "Select date format" option is selected, it will show an error. If you choose the other 2 formats, normally you should do
var nazwamiesiecy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var nazwadni = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let input = document.querySelector("input");
let guzik = document.querySelector("button");
guzik.addEventListener("click", () => {
event.preventDefault();
let wybranaData = new Date(input.value);
let format = document.querySelectorAll("select").value
let opcja1 = document.querySelectorAll("option")[0].value
let opcja2 = document.querySelectorAll("option")[1].value
let opcja3 = document.querySelectorAll("option")[2].value
if (!input.value) {
alert("Enter the date");
return;
}
if (!opcja1) {
alert("Enter the date format")
return;
}
if (!opcja2) {
document.getElementById("dataa").innerHTML = wybranaData.getDate() + " " + nazwamiesiecy[wybranaData.getMonth()] + " " + wybranaData.getFullYear().toString() + " roku";
return;
}
if (!opcja3) {
document.getElementById("dataaa").innerHTML = wybranaData.getDate() + "." + wybranaData.getMonth() + "." + wybranaData.getFullYear().toString();
return;
}
})
<form name="">
<div>
<label for="txtnum1">Date: </label>
<input type="date" name="txtnum1" id="txtnum1">
</div>
<label for="sztos">Date format: </label>
<select name="sztos" id="sztos">
<option value="">Choose a date format</option>
<option value="op">12/04/2000</option>
<option value="xd">12 April 2000</option>
</select>
<button type="submit">Calculate</button>
<div id="dataa"></div>
<div id="dataaa"></div>
</form>

Your opcja tests are wrong,
querySelectorAll returns a nodeList Just test the querySelector("select").value
your format is with dots, not slashes
you are not passing the event in the event listener
no need to use toString on numbers when you concatenate
var nazwamiesiecy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var nazwadni = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let input = document.querySelector("input");
let guzik = document.querySelector("button");
let dataa = document.getElementById("dataa")
guzik.addEventListener("click", (event) => {
event.preventDefault();
if (!input.value) {
alert("Enter the date");
return;
}
let format = document.querySelector("select").value
if (!format) {
alert("Enter the date format")
return;
}
let wybranaData = new Date(input.value);
let dateString = "";
if (format === "xd") {
dateString = wybranaData.getDate() + " " + nazwamiesiecy[wybranaData.getMonth()] + " " + wybranaData.getFullYear() + " roku";
} else if (format === "op") {
dateString = wybranaData.getDate() + "/" + wybranaData.getMonth() + "/" + wybranaData.getFullYear();
}
dataa.innerHTML = dateString;
})
<form name="">
<div>
<label for="txtnum1">Date: </label>
<input type="date" name="txtnum1" id="txtnum1">
</div>
<label for="sztos">Date format: </label>
<select name="sztos" id="sztos">
<option value="">Choose a date format</option>
<option value="op">dd/mm/yyyy</option>
<option value="xd">dd MMMMMM yyyy</option>
</select>
<button type="submit">Calculate</button>
<div id="dataa"></div>
</form>

Astra theme disabling javascript links

I have a working calendar demo. I have tested the code on more than one theme and everything works perfectly. The code however won't work with Astra Theme which is what I am using for my WordPress Website. I am not sure what the problem is at this point maybe someone would help me with this. This code also adds links to the dates. The problem is that Astra Theme strips the dates of the links when you change the date using the navigation buttons or date/month selector. Other themes seem to work perfectly. I checked console for errors and this is what I see:
(index):267 Uncaught TypeError: links is not a function
at previous ((index):267)
at HTMLButtonElement.onclick ((index):182)
The code is
<div class="wrapper">
<div class="container-calendar">
<h3 id="monthAndYear"></h3>
<div class="button-container-calendar">
<button id="previous" onclick="previous()">‹</button>
<button id="next" onclick="next()">›</button>
</div>
<table class="table-calendar" id="calendar" data-lang="en">
<thead id="thead-month"></thead>
<tbody id="calendar-body"></tbody>
</table>
<div class="footer-container-calendar">
<label for="month">Jump To: </label>
<select id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<select id="year" onchange="jump()"></select>
</div>
</div>
</div>
<script>
function generate_year_range(start, end) {
var years = "";
for (var year = start; year <= end; year++) {
years += "<option value='" + year + "'>" + year + "</option>";
}
return years;
}
var today = new Date();
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
var selectYear = document.getElementById("year");
var selectMonth = document.getElementById("month");
var createYear = generate_year_range(2016, 2021);
/** or
* createYear = generate_year_range( 1970, currentYear );
*/
document.getElementById("year").innerHTML = createYear;
var calendar = document.getElementById("calendar");
var lang = calendar.getAttribute('data-lang');
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayHeader = "<tr>";
for (day in days) {
dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>";
}
dayHeader += "</tr>";
document.getElementById("thead-month").innerHTML = dayHeader;
monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
links ()
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
links ()
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
links ()
}
function showCalendar(month, year) {
var firstDay = (new Date(year, month)).getDay();
tbl = document.getElementById("calendar-body");
tbl.innerHTML = "";
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
var date = 1;
for (var i = 0; i < 6; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
cell = document.createElement("td");
cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
} else if (date > daysInMonth(month, year)) {
break;
} else {
cell = document.createElement("td");
cell.setAttribute("data-date", date);
cell.setAttribute("data-month", month + 1);
cell.setAttribute("data-year", year);
cell.setAttribute("data-month_name", months[month]);
cell.className = "date-picker";
cell.innerHTML = "<span>" + date + "</span>";
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.className = "date-picker selected";
}
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row);
}
}
function daysInMonth(iMonth, iYear) {
return 32 - new Date(iYear, iMonth, 32).getDate();
}
function links () {
document.querySelectorAll('td.date-picker > span').forEach(element => {
var year = element.parentElement.getAttribute('data-year');
var month = element.parentElement.getAttribute('data-month');
var day = element.textContent;
if (month.length === 1) {
month = "0" + month;
}
if (day.length === 1) {
day = "0" + day;
}
element.innerHTML = '' + element.textContent + ' '
})
}
links ()
</script>

How to place a callback script in bottom of the body tag?

I am using blogger for few a few months. I found an archive Plain JavaScript from a blogging tutorial blog. Wherever I paste the script, it loads the archive posts successfully. But it takes several seconds to display the output and blocking the remaining page contents.
I want to place the JavaScript in the bottom of the body tag. I haven’t much idea to modify this script to load from the bottom of the body tag. It may not block the other contents if it placed in the bottom of the page.
The HTML
<body>
<header>
</header>
<div class="contents">
<div class="blog-posts"></div>
<div class="static_archive">
Archive output here.
<!-- If I place the script here, it runs ok but blocking the remaing contents of the page untill it loaded. -->
</div>
<aside>
<div class="widget1">
<div class="archive"></div>
</div>
</aside>
</div>
<footer>
</footer>
<script>
//I need Javascript placement here.
</script>
</body>
The JavaScript
<script>
function LoadTheArchive(TotalFeed) {
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if ("entry" in TotalFeed.feed) {
var PostEntries = TotalFeed.feed.entry.length;
for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0, 4));
PostMonths.push(ThisPost.published.$t.substring(5, 7));
PostDays.push(ThisPost.published.$t.substring(8, 10));
var ThisPostURL;
for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
if (ThisPost.link[LinkNum].rel == "alternate") {
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);
}
function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var NumberOfEntries = PostTitles.length;
var currentMonth = "";
var currentYear = "";
for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1]
if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum];
document.write("<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>");
}
var parsed_day = parseInt(PostDays[EntryNum], 10) > 9 ? "" + parseInt(PostDays[EntryNum], 10) : "0" + parseInt(PostDays[EntryNum], 10);
document.write("<div class='dayStyle'>" + parsed_day + ": </div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>");
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1&callback=LoadTheArchive" type="text/javascript">
</script>
I am just a beginner in HTML and JavaScript. Any idea friends?

Creating a Table with the days of the Month

I've several problems at the moment and I can't see to find the solution.
I insert two dates and I have the list of month, year between them.
I'm trying to make a table to with:
Number of Day
Name of Day
and be able to:
select month/year from a combobox (this gives the amount of days in the month)
if it's exists you can use pagination to go to the next month,etc...
MY LAYOUT
First Problem:
I'm using Java to pass a List to JavaScript and I get this in the combobox:
The second problem is basically I cant do anything else without the combobox correct value.
<%
String initialDayEnd = session.getAttribute("initialSystemDate").toString();
String finalDayEnd = session.getAttribute("finalSystemDate").toString();
DateFormat format = new SimpleDateFormat("dd/MM/yyyy", Locale.US);
Calendar beginCalendar = Calendar.getInstance();
Calendar finishCalendar = Calendar.getInstance();
try {
beginCalendar.setTime(format.parse(initialDayEnd));
finishCalendar.setTime(format.parse(finalDayEnd));
} catch (ParseException e) {
e.printStackTrace();
}
List<String> dateList = new ArrayList<String>();
List<String> dateListMonthYear = new ArrayList<String>();
String[] dateSplitted;
while (beginCalendar.before(finishCalendar)) {
// add one month to date per loop
String date = format.format(beginCalendar.getTime()).toUpperCase();
System.out.println(date);
beginCalendar.add(Calendar.MONTH, 1);
dateSplitted = date.split("/");
dateList.add(dateSplitted[0] + "/" + dateSplitted[1] + "/" + dateSplitted[2]);
dateListMonthYear.add(dateSplitted[1] + "/" + dateSplitted[2]);
}
%>
<input type="hidden" id="dates" value="<%=dateListMonthYear%>">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Day</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center">#</th>
<th class="text-center">Day</th>
</tr>
</tfoot>
<tbody class="dayTableBody">
<%--JSON ARRAY CREATES THE TABLE--%>
</tbody>
</table>
JS:
$(document).ready(function() {
var dates = $('#dates').val();
console.log(dates);
$('#dataTable').DataTable({
"lengthMenu" : dates
});
});
var day, month, year;
$('.dates').change(DatesChanged);
DatesChanged();
function DatesChanged() {
var date = $('.dates').val();
var splitDate = date.split("/");
day = splitDate[0];
month = splitDate[1];
year = splitDate[2];
var maxDays = daysInMonth(month, year);
CreateJSONArray(maxDays, date);
}
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function CreateJSONArray(maxDays, date) {
var arr = [];
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var d;
for (var day = 1; day <= maxDays; day++) {
d = new Date(date);
arr.push({
"dayNumber": day,
"dayName": dayNames[d.getDay()],
"monthName": monthNames[month - 1],
"year": d.getYear() + 1900
});
date = d.setDate(d.getDate() + 1);
}
DisplayTable(arr);
console.log(arr);
}
function DisplayTable(data) {
//heading
document.getElementsByClassName("month-year")[0].innerHTML = data[0].monthName + ", " + data[0].year;
//Table
$('.dayTableBody').empty();
$.each(data, function (index, value) {
data += '<tr align="center">';
data += '<td>' + value.dayNumber + '<input type="hidden" name="dayNumber" value="' + value.dayNumber + '">' + '</td>';
data += '<td>' + value.dayName + '</td>';
//get amount of types of Clients
var clientTypes = ["Individual","Corporation"];
for (var i = 0; i < clientTypes.length; i++) {
data += '<td>' + '<input class="text-center amountOfClients" type="number" value="0" name="amountOfClients-' + clientTypes[i] + '" data-error="Please, insert a value" required>' + '</td>'
data += '<div class="help-block with-errors"></div>'
}
data += '</tr>';
});
$('.dayTableBody').append(data);
}
Maybe there is a simpler way to make this?

Scrollable Javascript Calendar

I am trying to make a calendar which can scroll between months using javascript. The calendar, at the moment, displays todays date and builds the months around it. I have a next button, which changes the month title, but the days remain completely unchanged. I have tried inserting "+ dayPerMonth[month+1] +" into the calendar body when 'next' is called, to no avail. It merely states above the table how many days the next month has.
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ( (year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays= nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
function displayCalendar(){
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ( (year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays = nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
// building the calendar html body.
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month]+" "+ year +"</th></tr>";
calendarBody +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody;
}
function next(){
var calendarBody2 = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month++]+" "+ year +"</th></tr>";
calendarBody2 +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>"
;
calendarBody2 += "<tr>";
calendarBody2 += htmlContent ;
calendarBody2 += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody2;
}
.btns{
width: 48%;
height: 5%;
}
#legend{
font-size: 20pt;
}
.ui-content{
margin-top: 1%;
}
.calendar{
width: 100%;
height: 80%;
}
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: black;
text-align: center;
font-size: 20pt;
}
.dayNow{
border: 2px solid black;
color: #FF0000;
text-align: center;
font-size: 20pt;
}
.calendar td{
htmlContent: 2px;
width: 40px;
border: 2px solid black;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #FF0000;
color: #FFFFFF;
text-align: center;
}
<html>
<head>
<title>Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<button class='btns' onclick=prev()>Prev</button>
<button style=margin-left:3.25%; class='btns' onclick=next()>Next</button>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
</html>

Try the below code, I have put the common code into getCal() method and updated little bit.
Similarly, added prev() method for previous
var htmlContent = "";
var FebNumberOfDays = "";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var curMonth = month;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
var curYear = year;
// names of months and week days.
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
// days in previous month and next one , and day of week.
var nextDate, weekdays, weekdays2, numOfDays, nextMonth, prevMonth;
//to set the correct htmlContent
function getCal() {
htmlContent = "";
nextMonth = month + 1; //+1; //Used to match up the current month with the correct start date.
prevMonth = month - 1;
counter = 1;
//Determing if February (28,or 29)
if (month == 1) {
if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
FebNumberOfDays = 29;
} else {
FebNumberOfDays = 28;
}
}
// names of months and week days.
monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
// days in previous month and next one , and day of week.
nextDate = new Date(nextMonth + ' 1 ,' + year);
weekdays = nextDate.getDay();
weekdays2 = weekdays;
numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays > 0) {
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays) {
// When to start new line.
if (weekdays2 > 6) {
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day && month == curMonth && year == curYear) {
htmlContent += "<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " +
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>" + counter + "</td>";
} else {
htmlContent += "<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'" +
" onMouseOut='this.style.background=\"#FFFFFF\"'>" + counter + "</td>";
}
weekdays2++;
counter++;
}
}
function displayCalendar() {
getCal(); // to get the htmlContent
// building the calendar html body.
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML = calendarBody;
}
function next() {
debugger;
if(month+1==12){
++year;
month=-1;
}
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[++month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
getCal(); // to get the htmlContent
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML = calendarBody;
}
function prev() {
if(month-1==-1){
--year;
month=12;
}
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[--month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
getCal(); // to get the htmlContent
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML = calendarBody;
}
.btns {
width: 48%;
height: 5%;
}
#legend {
font-size: 20pt;
}
.ui-content {
margin-top: 1%;
}
.calendar {
width: 100%;
height: 80%;
}
.monthPre {
color: gray;
text-align: center;
}
.monthNow {
color: black;
text-align: center;
font-size: 20pt;
}
.dayNow {
border: 2px solid black;
color: #FF0000;
text-align: center;
font-size: 20pt;
}
.calendar td {
htmlContent: 2px;
width: 40px;
border: 2px solid black;
}
.monthNow th {
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames {
background: #FF0000;
color: #FFFFFF;
text-align: center;
}
<html>
<head>
<title>Calendar</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<button class='btns' onclick=prev()>Prev</button>
<button style=margin-left:3.25%; class='btns' onclick=next()>Next</button>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
</html>