I'm still newbie and trying to make a simple website, one of my feature is calendar.
why is my function nextbutton() is not running?
I also need some critics where and what should i change in coding. thank you so much!
function calendar(){
date = new Date();
month = date.getMonth();
year = date.getFullYear();
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month+1;
var prevMonth = month-1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= nameOftheDays.length-1; count++){
content += "<td>" + nameOftheDays[count] + "</td>";
if(count === nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton(){
if(month != null){
month = month++;
}
}
<div id="calendar"></div>
<script language="JavaScript">
var month=-1;
function calendar(){
date = new Date();
if(month===-1){
month =date.getMonth();
}
year = date.getFullYear();
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month+1;
var prevMonth = month-1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= nameOftheDays.length-1; count++){
content += "<td>" + nameOftheDays[count] + "</td>";
if(count === nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton(){
if(month != null){
document.getElementById("calendar").innerHTML ="";
month++;
calendar()
}
}
</script>
Try this out. I pulled the vars out of the calendar() function, and set your nextButton() function (which works, by the way, just do a console.log to see) to call the calendar function every time. Also, to increment, just do var++
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
function calendar(month) {
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month + 1;
var prevMonth = month - 1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month + 1, 0).getDate();
var num2 = numberOfDays + 1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count = 0; count <= nameOftheDays.length - 1; count++) {
content += "<td>" + nameOftheDays[count] + "</td>";
if (count === nameOftheDays.length - 1) {
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays) {
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton() {
if (month != null) {
console.log(month);
month++;
calendar(month);
}
}
<body onload="calendar(month)">
<div id="calendar">
</div>
<div id="today">
</div>
</body>
nextButton click is not working because it is a dynamically created element.
So we need to attach the click listeners on newly created DOM elements using, addEventListener.
document.getElementsByTagName("button")[1].addEventListener('click', yourFunction);
I have used simple JS prototyping to modify the code slightly, this way you can add more methods to your calendar and have multiple instances of it.
function Calendar(month,date,year) {
this.month = month, this.date = date, this.year = year;
this.nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
this.nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
}
Calendar.prototype.init = function() {
this.date = new Date();
this.month = this.date.getMonth();
this.year = this.date.getFullYear();
this.render();
}
Calendar.prototype.render = function() {
var dayOfweek = this.date.getDay();
var day = this.date.getDate();
var nextMonth = this.month+1;
var prevMonth = this.month-1;
var numberOfDays = new Date(this.year, this.month, 1).getDay();
var TotalNumOfDays = new Date(this.year, this.month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + this.nameOftheMonth[this.month] + " " + this.year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= this.nameOftheDays.length-1; count++){
content += "<td>" + this.nameOftheDays[count] + "</td>";
if(count === this.nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[0].addEventListener('click', (function() {
this.prevButton();
}).bind(this));
document.getElementsByTagName("button")[1].addEventListener('click', (function() {
this.nextButton();
}).bind(this));
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
Calendar.prototype.nextButton = function(){
if(this.month !== null){
this.month += 1;
this.render();
}
}
Calendar.prototype.prevButton = function(){
if(this.month !== null){
this.month -= 1;
this.render();
}
}
var c =new Calendar();
c.init();
<div id="calendar">
</div>
Related
<?php
$servername = "localhost";
$username = "u749668864_PandaHost";
$password = "Effy1234";
$dbname = "u749668864_PandaHost";
$q = $_REQUEST["task"];
$task = $q;
echo $task;
$conn->close();
?>
I've started looking at ajax and I'm really confused how to render a task when
the user submits this form. I've already created a html table and then added
the cells with javascript. When the user clicks the form, I want them to
submit a task and their duration, and then see the task displayed below the
submit button.
<html>
<body>
<table id="table"> <!-- table -->
<th colspan="7" id="month"></th>
</table>
</body>
</html>
<script>
var table = document.getElementById("table");
// check current month
var month = new Date();
var Allmonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
for (var i = 0; i < Allmonths.length; i++) {
if (month.getMonth() == i) {
document.getElementById("month").innerHTML = Allmonths[i];
}
};
// start creating cells
var row;
var cell;
var date = 1;
var newDate = 1;
var i;
var j;
for (i = 0; i < 5; i++) {
row = table.insertRow(-1);
for (j = 0; j < 7; j++) {
cell = row.insertCell(-1);
var newI = i;
var newJ = j;
if (newI >= 4 && newJ >= 3) {
cell.className = "grey-cell";
cell.innerHTML = newDate;
newDate++;
}
else {
cell.className = "cell";
cell.innerHTML = date;
date++;
}
};
};
// on clicking a cell, display a form, and then render the task on submission
$("td").click(function(event){
var box = $("<div>").html(
"<form>" +
"<label for=task>" +
"<input type=text id=task name=task placeholder=Task>" +
"</label>" +
"<label for=duration>" +
"<input type=number id=duration name=duration placeholder=Duration>" +
"</label>" +
"<button id=add type=submit>Add Task</button>" +
"</form>" +
"<p id=task></p>"
)
$(this).append(box);
$("#add").click(function(){
$("#task").load("tasks.php #task", function(responseTxt){
$(this).html(responseTxt)
});
});
})
</script>
The wires are getting a little crossed here. When you create your input form inside of the table cell that has the number, your click event on the cell is applied to the form elements. Better to have that form appear outside of your click event. I moved it to it's own div. To see the results of the form, you have to preventDefault() on the submit button to prevent the page from refreshing. Then you can append a 'tasks' div with the values from your form
var table = document.getElementById("table");
// check current month
var month = new Date();
var Allmonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
for (var i = 0; i < Allmonths.length; i++) {
if (month.getMonth() == i) {
document.getElementById("month").innerHTML = Allmonths[i];
}
};
// start creating cells
var row;
var cell;
var date = 1;
var newDate = 1;
var i;
var j;
for (i = 0; i < 5; i++) {
row = table.insertRow(-1);
for (j = 0; j < 7; j++) {
cell = row.insertCell(-1);
var newI = i;
var newJ = j;
if (newI >= 4 && newJ >= 3) {
cell.className = "date-cell grey-cell";
cell.innerHTML = newDate;
newDate++;
} else {
cell.className = "date-cell cell";
cell.innerHTML = date;
date++;
}
};
};
// on clicking a cell, display a form, and then render the task on submission
$("td.date-cell").click(function(event) {
$("#create-task").html(
"<form>" +
"<label for=task>" +
"<input type=text id=task name=task placeholder=Task>" +
"</label>" +
"<label for=duration>" +
"<input type=number id=duration name=duration placeholder=Duration>" +
"</label>" +
"<button id=add type=submit>Add Task</button>" +
"</form>" +
"<p id=task></p>"
)
$("#add").click(function(e) {
// prevent the page reload
e.preventDefault();
// get data
let duration = $('#duration').val()
let task = $('#task').val()
$('#tasks').append(`<li>Task: ${task}, duration: ${duration}</li>`)
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<!-- table -->
<th colspan="7" id="month"></th>
</table>
<div id='create-task'></div>
<ul id='tasks'></ul>
I want to be able to get the data using ajax without having to load the page to get the up to date data.
Here is the function I'm using to get the data from another page URL (I have to refresh to get the up to date data):
$.ajax({
url: "/data.aspx",
success: function(myObj) {
try {
var d = new Date();
var s = new String();
var Day = d.getDate();
var Month = d.getMonth() + 1;
var Year = d.getFullYear();
s = (Month + "/" + Day + "/" + Year).toString();
var Start = myObj.indexOf("var WPQ1ListData = {");
var End = myObj.indexOf("var WPQ1SchemaData");
var Str = myObj.substring(Start + 19, End - 1);
var Objects = Str.split(',');
var count = 0;
var AllEvents = "";
$("#calendarItems").empty();
for (var i = 0; i < Objects.length; i++) {
if ((Objects[i].indexOf('Title') > -1) || (Objects[i].indexOf('"EventDate"') > -1)) {
count++;
TwoDimObjects = Objects[i].split(":");
AllEvents += TwoDimObjects[1];
if (count % 2 == 0) {
AllEvents += "_-_";
}
}
}
var index1, index2, index3, Split, Decoded, FullDate, Month, YearwithTitle, Title, MonthNum, DayNum,
YearNum, dateParts, months, selectedMonthName, CalendarItem, EventCounter;
EventCounter = 0;
CalendarItem = "";
months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
DiffDate = AllEvents.split('"').join(' ');
DiffDate2 = DiffDate.split("_-_");
for (var j = 0; j < DiffDate2.length - 1; j++) {
Decoded = DiffDate2[j].split("\\u002f").join("\\");
Split = Decoded.substring(2, Decoded.length);
index1 = Split.indexOf(" ");
index2 = Split.indexOf(" ");
YearwithTitle = Split.substr(0, index1) + Split.substr(index2 + 1);
index3 = YearwithTitle.indexOf(" ");
FullDate = YearwithTitle.substring(0, index3);
Title = YearwithTitle.substring(index3 + 1, YearwithTitle.length);
FullDate, dateParts = FullDate.split(/\\|\//), MonthNum = dateParts[0], DayNum = dateParts[1], YearNum = dateParts[2];
ConvertDate = FullDate.split("\\").join("/");
var CurrentDate = new Date(s);
var CalendarItemDate = new Date(ConvertDate);
if (CurrentDate <= CalendarItemDate) {
EventCounter++;
if (EventCounter <= 4) {
selectedMonthName = months[MonthNum];
CalendarItem += '<li>' + selectedMonthName + " " + DayNum + " - " + Title + '</li>';
}
}
}
document.getElementById("calendarItems").innerHTML += CalendarItem;
} catch (err) {
alert(err)
}
}
}
);
Below is the javascript for my clock on my website, it is set 2 weeks into the future however for some reason I am now getting an alert and the letterspacing (to make the calender look more square) is not working either. Can somebody please tell me why this would be? Nothing has changed and it was working perfectly grrrrrrrrrrrrr.
I repeat it worked perfectly and the letters were nicely spaced to make the whole time and date block look like a minimalist square. It is obviously something to do with this line
if(date > day && date > time){
but I do not know how to fix it.
I also have a livelink here. this will be removed for future posterity of the post.
THE JAVASCRIPT IS BELOW
tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
function GetClock() {
var d = new Date(+new Date + 12096e5);
var dx = d.toGMTString();
dx = dx.substr(0, dx.length - 3);
d.setTime(Date.parse(dx))
d.setSeconds(d.getSeconds() + 0);
var nday = d.getDay(),
nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getYear(),
nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds(),
ap;
if (nhour == 0) {
ap = " AM";
nhour = 12;
} else if (nhour < 12) {
ap = " AM";
} else if (nhour == 12) {
ap = " PM";
} else if (nhour > 12) {
ap = " PM";
nhour -= 12;
}
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + "";
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "";
document.getElementById('hour').innerHTML = "" + ap + "";
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
var day = $('#day').width();
var time = $('#time').width() + $('#hour').width() + 10;
var date = $('#date').width();
if(date > day && date > time){
***alert('why does this damn alert keep appearing!! Also my letter spacing isnt working anymore yet the code is untouched!');***
}else if (time > day && time > date){
var lengthDay = $('#day').html().length-1;
var differenceDay = time-day;
var letterDay = differenceDay / lengthDay;
var lengthDate = $('#date').html().length-1;
var differenceDate = time-date;
var letterDate = differenceDate / lengthDate;
$('#day').css({'letter-spacing':letterDay});
$('#date').css({'letter-spacing':letterDate});
}else{
alert('day');
}
}
CSS
.clock {
color:#bbb;
font-size: 44px;
}
#day{
display:inline-block;
}
#time {
display:inline-block;
letter-spacing:3px;
}
#hour {
margin-left:10px;
display:inline-block;
font-size:28px;
}
#date {
font-size:30px;
display:inline-block;
}
.text {
color:#bbb;
font-size: 24px;
}
for sanity sake i warped the time in a span. I tried removing the if statement. So the altered onload JS now looks like this
HTML
<div class="text">GET YOUR CAR BY</div>
<div class="clock" id="day"></div><br>
<span id="timeHour">
<div class="clock" id="time"></div>
<div class="clock" id="hour"></div>
</span> <br>
<div class="clock" id="date"></div>
JS
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
var day = $('#day').width();
var time = $('#timeHour').outerWidth();
var date = $('#date').width();
var lengthDay = $('#day').html().length-1;
var differenceDay = time-day;
var letterDay = differenceDay / lengthDay;
var lengthDate = $('#date').html().length-1;
var differenceDate = time-date;
var letterDate = differenceDate / lengthDate;
$('#day').css({'letter-spacing':letterDay});
$('#date').css({'letter-spacing':letterDate});
}
it seems to work for me. the day and the date now follow the size of the hour. Is that what your looking for?
Whole file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style>
* {
font-family: 'Open Sans', sans-serif;
}
.clock {
color:#bbb;
font-size: 44px;
}
#day{
display:inline-block;
}
#time {
display:inline-block;
letter-spacing:3px;
}
#hour {
margin-left:10px;
display:inline-block;
font-size:28px;
}
#date {
font-size:30px;
display:inline-block;
}
.text {
display: inline-block;
color:#bbb;
font-size: 24px;
}
</style>
</head>
<body>
<script type="text/javascript">
tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
function GetClock() {
var d = new Date(+new Date );
var dx = d.toGMTString();
dx = dx.substr(0, dx.length - 3);
d.setTime(Date.parse(dx))
d.setSeconds(d.getSeconds() + 0);
var nday = d.getDay(),
nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getYear(),
nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds(),
ap;
if (nhour == 0) {
ap = " AM";
nhour = 12;
} else if (nhour < 12) {
ap = " AM";
} else if (nhour == 12) {
ap = " PM";
} else if (nhour > 12) {
ap = " PM";
nhour -= 12;
}
if (nyear < 1000) nyear += 1900;
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + "";
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "";
document.getElementById('hour').innerHTML = "" + ap + "";
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}
window.onload = function () {
GetClock();
setInterval(GetClock, 1000);
var text = $('#text').width();
var day = $('#day').width();
var time = $('#timeHour').width();
var date = $('#date').width();
var lengthDay = $('#day').html().length-1;
var differenceDay = time-day;
var letterDay = differenceDay / lengthDay;
var lengthDate = $('#date').html().length-1;
var differenceDate = time-date;
var letterDate = differenceDate / lengthDate;
var lengthText = $('#text').html().length-1;
var differenceText = time-text;
var letterText = differenceText / lengthText;
$('#day').css({'letter-spacing':letterDay});
$('#date').css({'letter-spacing':letterDate});
$('#text').css({'letter-spacing':letterText});
}
</script>
<div class="text" id="text">GET YOUR CAR BY</div><br>
<div class="clock" id="day"></div><br>
<span id="timeHour">
<div class="clock" id="time"></div>
<div class="clock" id="hour"></div>
</span> <br>
<div class="clock" id="date"></div>
</body>
</html>
I added letterText to the js and an id and a line break to the html and displayed .text inline-block
I am having a problem regarding with viewing my custom calendar display on ipad or iphone. It work perfectly on desktop, iMac and android device but not ipad or iphone which is ios based.
The problem is the <tr></tr> seems not working as the calendar is viewing with a straight line rather than making a new line after reaching the end of the week. I'm thinking that the it might be the javascript compatibility issue between the two platform.
Below is the script to generate the calendar.
<script>
function calendar(month) {
var padding = "";
var totalFeb = "";
var i = 1;
var testing = "";
var current = new Date();
var cmonth = current.getMonth();
var day = current.getDate();
<?php if (isset($_GET['year']))
{
$year = $_GET['year'];
?>
var year = <?php echo $year ?>;
<?php
}
else
{
?>
var year = current.getFullYear();
<?php }
?>
var tempMonth = month + 1;
var prevMonth = month - 1;
if (month == 1) {
if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
totalFeb = 29;
} else {
totalFeb = 28;
}
}
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var totalDays = ["31", "" + totalFeb + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
var tempDate = new Date(tempMonth + ' 1 ,' + year);
var tempweekday = tempDate.getDay();
var tempweekday2 = tempweekday;
var dayAmount = totalDays[month];
while (tempweekday > 0) {
padding += "<td class='premonth' bgcolor='#E0E0DF'></td>";
//preAmount++;
tempweekday--;
}
while (i <= dayAmount) {
var paramM = <?php echo $a; ?>;
var paramY = <?php echo $yearcalendar; ?>;
var totalParam = ""+paramY+"-"+paramM+"-"+i+"";
if (tempweekday2 > 6) {
tempweekday2 = 0;
padding += "</tr><tr>";
}
if (tempweekday2 == 0 || tempweekday2 == 6)
{
if (i == day && month == cmonth) {
padding += "<td class='weekends' onMouseOver='this.style.background=\"#00FF00\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"#F2F2F2\"; this.style.color=\"#F2F2F2\"' ><div class='textarea-container2'>" + i + "<a href='http://www.ssic.com.my/e-system/e-driver/form.php?date="+totalParam+"' class='various' data-fancybox-type='iframe'><textarea readonly>click</textarea></div></td>";
}
else {
padding += "<td class='weekends' onMouseOver='this.style.background=\"#F2F2F2\"' onMouseOut='this.style.background=\"#F2F2F2\"'><div class='textarea-container4'>" + i + "<a href='http://www.ssic.com.my/e-system/e-driver/form.php?date="+totalParam+"' class='various' data-fancybox-type='iframe'><textarea readonly>click</textarea><div class='test'></div></div></td>";
}
}
else
{
if (i == day && month == cmonth) {
padding += "<td bgcolor='#A9D1FA' class='currentday' onMouseOver='this.style.background=\"#6699FF\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"#A9D1FA\"; this.style.color=\"#FFFFFF\"'><div class='textarea-container3'>" + i + "<a href='http://www.ssic.com.my/e-system/e-driver/form.php?date="+totalParam+"' class='various' data-fancybox-type='iframe'><textarea readonly>Today's Date</textarea></a></div></td>";
}
else {
padding += "<td bgcolor='#fff' class='currentmonth' onMouseOver='this.style.background=\"#F2F2F2\"' onMouseOut='this.style.background=\"#FFFFFF\"'><div class='textarea-container2'>" + i + "<a href='http://www.ssic.com.my/e-system/e-driver/form.php?date="+totalParam+"' class='various' data-fancybox-type='iframe'><textarea readonly>click here</textarea></a><div class='test'></div></div></td>";
}
}
tempweekday2++;
i++;
}
var calendarTable = "<table class='calendar' bgcolor='E0E0DF'> <tr class='currentyear'><th class='blue' colspan='7'><?php echo"<a href='view.php?a=$previousM&year=$previousY' STYLE='TEXT-DECORATION: NONE'><<</a>"; ?> " + monthNames[month] + " " + year + " <?php echo"<a href='view.php?a=$nextM&year=$nextY' STYLE='TEXT-DECORATION: NONE'>>></a>"; ?></th></tr>";
calendarTable += "<tr class='weekdays'> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr>";
calendarTable += "<tr>";
calendarTable += padding;
calendarTable += "</tr></table>";
document.getElementById("calendar").innerHTML += calendarTable;
}
function go12() {
for (i = <?php echo $i ?>; i < <?php echo $a ?>; i++) {
calendar(i);
}
}
if (window.addEventListener) {
window.addEventListener('load', go12, false);
} else if (window.attachEvent) {
window.attachEvent('onload', go12);
}
</script>
I'll appreciate any help or comment regarding with this issue. Thanks!
Is it possible to get it through javascript?
You can get the current time from the web server, from the local machine, or by calling a web service. While that last choice is possible, it would be the slowest and least performant.
<script type="text/javascript">
var d_names = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_day = d.getDay();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
{
sup = "st";
}
else if (curr_date == 2 || curr_date == 22)
{
sup = "nd";
}
else if (curr_date == 3 || curr_date == 23)
{
sup = "rd";
}
else
{
sup = "th";
}
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
console.log(d_names[curr_day] + " " + curr_date + "<SUP>"
+ sup + "</SUP> " + m_names[curr_month] + " " + curr_year);
</script>
This is how you get the values through javascript. Not sure what you mean by without using system time
From http://www.webdevelopersnotes.com/tips/html/formatting_time_using_javascript.php3
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "AM";
}
else
{
a_p = "PM";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>