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>
Related
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?
So, I'm doing a project which includes having a calendar on it.
So I downloaded a template and I customized it.
The problem is, the calendar only has the year "2017" implemented.
My question is, can I auto-generate the following years?
And if I can, how?
Downhere I'm showing you my code (html and Js)
index.html:
<script>
// fill the month table with column headings
function day_title(day_name) {
document.write("<div class='c-cal__col'>" + day_name + "</div>");
}
// fills the month table with numbers
function fill_table(month, month_length, indexMonth) {
day = 1;
// begin the new month table
document.write("<div class='c-main c-main-" + indexMonth + "'>");
//document.write("<b>"+month+" "+year+"</b>")
// column headings
document.write("<div class='c-cal__row'>");
day_title("Dom");
day_title("Seg");
day_title("Ter");
day_title("Qua");
day_title("Qui");
day_title("Sex");
day_title("Sab");
document.write("</div>");
// pad cells before first day of month
document.write("<div class='c-cal__row'>");
for (var i = 1; i < start_day; i++) {
if (start_day > 7) {
} else {
document.write("<div class='c-cal__cel'></div>");
}
}
// fill the first week of days
for (var i = start_day; i < 8; i++) {
document.write(
"<div data-day='2019-" +
indexMonth +
"-0" +
day +
"'class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
}
document.write("</div>");
// fill the remaining weeks
while (day <= month_length) {
document.write("<div class='c-cal__row'>");
for (var i = 1; i <= 7 && day <= month_length; i++) {
if (day >= 1 && day <= 9) {
document.write(
"<div data-day='2019-" +
indexMonth +
"-0" +
day +
"'class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
} else {
document.write(
"<div data-day='2017-" +
indexMonth +
"-" +
day +
"' class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
}
}
document.write("</div>");
// the first day of the next month
start_day = i;
}
document.write("</div>");
}
</script>
<br>
<header>
<div class="wrapper">
<div class="c-monthyear">
<div class="c-month">
<span id="prev" class="prev fa fa-angle-left" aria-hidden="true"></span>
<div id="c-paginator">
<span class="c-paginator__month">JANEIRO</span>
<span class="c-paginator__month">FEVEREIRO</span>
<span class="c-paginator__month">MARÇO</span>
<span class="c-paginator__month">ABRIL</span>
<span class="c-paginator__month">MAIO</span>
<span class="c-paginator__month">JUNHO</span>
<span class="c-paginator__month">JULHO</span>
<span class="c-paginator__month">AGOSTO</span>
<span class="c-paginator__month">SETEMBRO</span>
<span class="c-paginator__month">OUTUBRO</span>
<span class="c-paginator__month">NOVEMBRO</span>
<span class="c-paginator__month">DEZEMBRO</span>
</div>
<span id="next" class="next fa fa-angle-right" aria-hidden="true"></span>
</div>
<span class="c-paginator__year">2019</span>
</div>
</div>
</header>
<div class="c-calendar">
<div class="c-calendar__style c-aside">
<a class=" o-btn " >Anular Senha </a>
<div class="c-aside__day">
<span class="c-aside__num"></span> <span class="c-aside__month"></span>
</div>
</div>
<div class="c-cal__container c-calendar__style">
<script>
// CAHNGE the below variable to the CURRENT YEAR
year = 2017;
// first day of the week of the new year
today = new Date("Janeiro 1, " + year);
start_day = today.getDay() + 1;
fill_table("Janeiro", 31, "01");
fill_table("Fevereiro", 28, "02");
fill_table("Março", 31, "03");
fill_table("Abril", 30, "04");
fill_table("Maio", 31, "05");
fill_table("Junho", 30, "06");
fill_table("Julho", 31, "07");
fill_table("Agosto", 31, "08");
fill_table("Setembro", 30, "09");
fill_table("Outubro", 31, "10");
fill_table("Novembro", 30, "11");
fill_table("Dezembro", 31, "12");
</script>
index.js:
//global variables
var monthEl = $(".c-main");
var dataCel = $(".c-cal__cel");
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var monthText = [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
];
var indexMonth = month;
var todayBtn = $(".c-today__btn");
var addBtn = $(".js-event__add");
var saveBtn = $(".js-event__save");
var closeBtn = $(".js-event__close");
var winCreator = $(".js-event__creator");
var inputDate = $(this).data();
today = year + "-" + month + "-" + day;
If you're looking for a quick solution you don't need to code yourself, you could use something like https://fullcalendar.io/.
You can manually create an Array of years based on the current year and the number of years you want in your template.
The following code should cover the basics for what you need, change variables depending on your requirements.
let currentYear = new Date().getUTCFullYear();
let startYear = 2016;
let endYearIncrement = 3;
let years = [];
for (let i = 0; i <= currentYear - startYear + endYearIncrement; i++) years.push(startYear + i);
The example should generate an array with the following values.
[2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023]
You could also generate the same array using Javascript's Array built-in function Array.from().
let years = Array.from( {length: currentYear - startYear + endYearIncrement + 1}, (v, i) => i + startYear )
Again, you can update the code so that you cover the years that you need.
So I have this function that creates textareas depending on the month. So if it is March, then 31 textareas, April, then 30 textareas and so on. When the user clicks on one textarea and then the submit button, the value of the textarea should be submitted to the db. So if the user marks 2018-02-04, then that date should be inserted into the db. But, my problem right now is that the only value that is submitted is the last date of each month. Not sure why, and dont know how to solve it. Think it might be something with IDs. Or that I need to send the value in as an array. But not sure on how to do it.
Functions:
var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June",
"July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];
function drawTable(forDate) {
var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
var cellsToDraw = daysInMonth;
var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
var table = document.getElementById("table");
table.innerHTML = "";
for (var r = 0; r < (daysInMonth / 7); r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
var day1 = ("0" + (c + 1)).slice(-2);
var textarea = document.createElement("textarea");
textarea.setAttribute("placeholder", day1 );
//textarea.setAttribute("id", some_value); does not work
newRow.appendChild(textarea);
textarea.setAttribute("name", "day");
textarea.setAttribute("day", newdate + "-" + day1 )
textarea.innerHTML = newdate + "-" + day1;
cellsToDraw--;
}
}
}
window.onload = function() {
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable(showDate );
};
function next() {
if (showDate.getMonth() == 11) {
showDate.setMonth( 0 );
showDate.setFullYear( showDate.getFullYear()+1 );
} else {
showDate.setMonth( showDate.getMonth()+1 );
}
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable( showDate );
}
html:
<form class="" action="index.php" method="post">
<table id="table" cellspacing="0" cellpadding="0" border-collapse="collapse";>
<br>
<input id="btn" type="submit" name="" value="Send">
</form>
php:
<?php
include ("connection.php");
$day = mysqli_real_escape_string($conn, $_REQUEST['day']);
$stmt = "INSERT INTO table (day) VALUES('$day')";
if(empty($day)){
$_SESSION['error'] = "Please fill in required fields";
header('Location: index.php', true, 303);
exit();
} else {
if (mysqli_query($conn, $stmt)) {
header('Location: index.php', true, 303);
exit;
}else {
$error= "Error: " .mysqli_error($conn);
echo "$error";
}
}
?>
My test php:
$days = $_request['day'];
$error = array();
foreach ($days as $day) {
$day = mysqli_real_escape_string($conn, $day);
if (empty($day)) {
$error[] = array(
'day' => $day,
'error' => 'day was empty'
);
}
else if (
!mysqli_query(
$conn,
"INSERT INTO table (day) VALUES('$day)')"
)
) {
$error[] = array(
'day' => $day,
'error' => mysqli_error($conn)
);
}
}
if (count($error)) {
print_r($error);
}
header('Location: index.php', true, 303);
All help is appriciated! :)
As I understood, you want to send date selected by user to server but last date of month is getting submitted right now. If this is your purpose and issue respectively then see it
ON JSFIDDLE.NET
https://jsfiddle.net/wyn1cd5b/1/
STACKOVERFLOW SNIPPET
function drawTable(forDate) {
var table = document.getElementById('table')
var year = forDate.getFullYear()
var month = forDate.getMonth() + 1
document.getElementById('date').innerHTML = months[month - 1]
table.innerHTML = ''
var daysInMonth = new Date(year, month, 0).getDate()
for (i = 1; i <= daysInMonth; i++) {
table.insertAdjacentHTML('beforeend', '<textarea class="date-item" onclick="selectThis(this)">' + year + '-' + (month < 10 ? '0' + month : month) + '-' + (i < 10 ? '0' + i : i) + '</textarea>')
}
}
function selectThis(textarea) {
if (typeof selectedDate !== 'undefined')
selectedDate.classList.remove('selected-date')
selectedDate = textarea
selectedDate.classList.add('selected-date')
}
function send() {
if (typeof selectedDate === 'undefined')
alert('No date selected')
else
// I have printed selected here. do whatever you want with it
document.getElementById('info').innerHTML = 'Will send <b>' + selectedDate.value + '</b> to server'
return false
}
function next() {
if (showDate.getMonth() === 11) {
showDate.setMonth(0)
showDate.setFullYear(showDate.getFullYear() + 1)
} else {
showDate.setMonth(showDate.getMonth() + 1)
}
drawTable(showDate)
return false
}
window.onload = function() {
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
// days = ['Sunday', 'Monday', 'Tuseday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
showDate = new Date()
drawTable(showDate)
}
.date-item {
cursor: pointer;
}
.selected-date {
background: #dbdbdb;
}
<form class="" action="index.php" method="post">
<table id="table" cellspacing="0" cellpadding="0" border-collapse="collapse" ;>
<h1 id="date"></h1>
</table>
<p id="info">Select date by clicking on it</p>
<input id="btn" type="submit" name="" onclick="return send()" value="Send">
<input id="btn" type="submit" name="" onclick="return next()" value="Next">
</form>
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?
I'm having some trouble copying the scripts and HTML from the calender on refdesk.com. I need put the JavaScript on a different style sheet and use those functions to recreate the calender on a HTML page. Here is what I have so far, any tips will help. This is a homework assignment so I'm not looking for the answers.
JavaScript -
function initialize()
{
buildCal();
updateCalender();
}
var themonths = ['January','February','March','April','May','June',
'July','August','September','October','November','December'];
var todaydate = new Date();
var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
var curyear = todaydate.getFullYear(); //get current year
function buildCal(month, year, cM, cH, cDW, cD, border)
{
var mn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var dim = [31,0,31,30,31,30,31,31,30,31,30,31];
var firstDaySelectedMonth = new Date(year, month - 1, 1); //DD replaced line to fix date bug when current day is 31st
firstDaySelectedMonth.od=firstDaySelectedMonth.getDay() + 1; //DD replaced line to fix date bug when current day is 31st
var todaydate = new Date(); //DD added
var scanfortoday = (year == todaydate.getFullYear() && month == todaydate.getMonth() + 1) ? todaydate.getDate() : 0; //DD added
dim[1] = (((firstDaySelectedMonth.getFullYear() % 100 != 0) && (firstDaySelectedMonth.getFullYear() %4 == 0)) || (firstDaySelectedMonth.getFullYear() % 400 == 0)) ? 29 : 28;
var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
t += '<td colspan="7" align="center" class="' + cH + '">' + mn[month - 1] + ' - ' + year + '</td></tr><tr align="center">';
for (s = 0; s < 7; s++)
{
t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s,1) + '</td>';
t += '</tr><tr align="center">';
}
for(i = 1;i <= 42; i++)
{
var x = ((i-firstDaySelectedMonth.od >= 0) && (i-firstDaySelectedMonth.od < dim[month -1 ])) ? i-firstDaySelectedMonth.od + 1 : ' ';
if (x == scanfortoday) //DD added
{
x = '<span id="today">' + x + '</span>'; //DD added
t += '<td class="' + cD + '">' + x +'</td>';
}
if(((i) % 7 == 0) && (i < 36))
{
t += '</tr><tr align="center">';
}
}
return t += '</tr></table></div>';
}
// update calender function
function updateCalendar(theSelection)
{
var themonth = parseInt(theSelection[theSelection.selectedIndex].value) + 1;
var calendarstr = buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0);
if (document.getElementById)
{
document.getElementById("calendarspace").innerHTML = calendarstr;
}
document.write('<option value="'+(curmonth - 1) + '" selected="yes">Current Month</option>');
for (i = 0; i < 12; i++) //display option for 12 months of the year
{
document.write('<option value="' + i + '">' + themonths[i] + ' ' + curyear + '</option>');
}
}
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="refdesk.css">
<script src="refdesk.js"></script>
</head>
<body onload="initialize()">
<!-- CALENDAR START -->
<form>
<div id="choicespace">
<p>(This will be replaced with JavaScript-generated HTML)</p>
<select onchange="updatecalendar(this.options)">
<script>
updatecalendar(theselection);
</script>
<option value="1" selected="yes">Current Month</option><option value="0">January 2013</option><option value="1">February 2013</option><option value="2">March 2013</option><option value="3">April 2013</option><option value="4">May 2013</option><option value="5">June 2013</option><option value="6">July 2013</option><option value="7">August 2013</option><option value="8">September 2013</option><option value="9">October 2013</option><option value="10">November 2013</option><option value="11">December 2013</option>
</select>
</div>
<div id="calendarspace">
<p>(This will be replaced with JavaScript-generated HTML)</p>
</div>
</form>
</body>
</html>
First, try to figure how your javascript code really work. Take a look on calendar in javascript as a simple example.
Personally I would indent more to keep things organized. Another thing I would do is just make shorter variables because sometimes i find myself coding wrong because of my huge variable names.