Key words: Calendar (Hebrew) for week, mo<!DOCTYPE html>
<html dir="rtl">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>code.calender</title>
<style>
* {
font-family:Arial;
}
th {
border:thin silver solid;
font-family:Calibri Light;
font-size:24px;
text-align:center;
}
.tdd {
-border:thin silver solid;
font-family:Arial;
font-size:24px;
text-align:center;
}
.tdd:hover {
background-color:navy;
color:white;
cursor:pointer;
}
h1 {
font-size:48px;
background-color: navy;
color:#CCCCCC;
}
</style>
<script>
var wL = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var wS = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var mL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var mS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
function $(el) { return document.getElementById(el); } // Short call
function dayW(w) { return w.getDay(); } // 0-Sunday ..6-Saturday
function firstDay(m,y) { return new Date(y, m-1, 1); } // first day in m
function lastDay(m,y) { return new Date(y, m-1 + 1, 0); } // Last day of m
function daysInMonth(m, y) { return new Date(y, m, 0).getDate(); } // days in month , year
function to2(n) { return (n < 10 ? '0' : '') + n; } // Complet to 2 digits day
// Formated day in dd+"/"+mm+"/"+yyyy;
// d = new Date();
// formatD(d)
function formatD(d)
{
dd = to2( d.getDate() );
mm = to2( d.getMonth()+1 );
yyyy = d.getFullYear();
return dd+"/"+mm+"/"+yyyy;
}
// Formated time
function formatT(t)
{
h = to2(t.getHours());
m = to2(t.getMinutes());
s = to2(t.getSeconds());
return h+":"+m+":"+s;
}
// Convert to Date data type from dd+"/"+mm+"/"+yyyy
function toDate(dateStr) {
var parts = dateStr.split("/")
return new Date(parts[2], parts[1] - 1, parts[0])
}
// The click function in a day of the calender
function calenderClick(dt)
{
var dt1 = toDate(dt);
alert(dt+" - "+wL[dayW(dt1)]+" "+mL[dt1.getMonth()]); // 0 Sunday ... 6 Saturday
}
var cm = 0;
var cy = 0;
// CalCreatData() return current month an year
// CalCreatData(8) return 8 month current year
// CalCreatData(8,2012) return 8 month 2012 year
function CalCreatData(cm1,cy1)
{
if (cm1 === undefined ) { // if month not defined - define month and year
d = new Date();
cm = d.getMonth()+1; // 0..11
cy = d.getFullYear();
} else {
if (cy1 === undefined ) { // if month defined but year not - define year
d = new Date();
cy = d.getFullYear();
cm = cm1;
} else {
cm = cm1;
cy = cy1;
}
}
// Fill in the array of days
var month = [];
var week = [];
var DAY=1;
// Store the first day into the array
week = [0,0,0,0,0,0,0];
var cdw = dayW(firstDay(cm,cy));
if (cdw == 6) { // creat a new week
week[cdw] = 1;
month.push(week);
week = [0,0,0,0,0,0,0];
cdw = 0;
} else {
week[cdw] = 1;
cdw += 1;
}
// Run till the end of the month
// if the week end, add an array and continue
while (DAY < daysInMonth(cm, cy)) {
DAY += 1;
if (cdw <=6 ) { // Fill in the week
week[cdw] = DAY;
} else { // Add a new week
month.push(week);
week = [0,0,0,0,0,0,0];
cdw = 0;
week[cdw] = DAY;
}
cdw += 1;
}
month.push(week); // Add the week to the month
return month;
}
// Build a month (array) display into divid
function CalMonthShow(month,divid)
{
// Creating the table to show
// Add onclick for each cell
str = "<table style='border:thin blue solid'>";
str += "<tr><th>א</th><th>ב</th><th>ג</th><th>ד</th><th>ה</th><th>ו</th><th>ז</th></tr>"; // Header
for (i1=0 ; i1 < month.length ; i1++) {
str += '<tr>';
for (i2=0 ; i2 < 7 ; i2++)
if (month[i1][i2] == 0)
str += '<td></td>'; // leave ampty Not this month
else
str += '<td class="tdd" onclick="calenderClick(`'+month[i1][i2]+'/'+cm+'/'+cy+'`)">'+month[i1][i2]+'</td>';
str += '</tr>';
}
str += "</table>";
$(divid).innerHTML += str;
}
// Build a week (we) display from month in divid
function CalWeekShow(month,we,divid)
{
monthW = month[we]; // Get the week record
str = '<table style="height:150px">';
str += "<tr><th>א</th><th>ב</th><th>ג</th><th>ד</th><th>ה</th><th>ו</th><th>ז</th></tr>";
str += '<tr>';
for (i2=0 ; i2 < 7 ; i2++)
if (monthW[i2] == 0)
str += '<td id="w'+i2+'" style="width:50px;"></td>'; // leave empty
else
str += '<td id="w'+i2+'" style="width:50px; background-color: white;" onclick="calenderClick(`'+monthW[i2]+'/'+cm+'/'+cy+'`)">'+monthW[i2]+'</td>';
str += '</tr>';
str += "</table>";
$(divid).innerHTML = str;
$("w3").innerHTML += '<table style="width: 100%; border-collapse: collapse;" border="1"><tr><td onclick="alert(`08:00`)"> </td></tr>'+
'<tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr></table>';
}
</script>
</head>
<body>
<div align="center">
<h1>לוח שנה עברי</h1>
<table style="border-collapse: collapse;" cellpadding="10">
<tr valign="top">
<td id="1"> </td>
<td id="2"> </td>
<td id="3"> </td>
<td id="4"> </td>
<td id="5"> </td>
<td id="6"> </td>
</tr>
<tr valign="top">
<td id="7"> </td>
<td id="8"> </td>
<td id="9"> </td>
<td id="10"> </td>
<td id="11"> </td>
<td id="12"> </td>
</tr>
</table>
<h1>חודש 12</h1>
<div id="calender"></div>
<br><br>
<h1>לוח שבועי (שבוע 2)</h1>
<div id="calenderw"></div>
</div>
<script>
for (i=1; i<=12 ; i++) {
month = CalCreatData(i);
CalMonthShow(month,i);
}
var month = CalCreatData(12); // Current month
CalMonthShow(month,"calender");
CalWeekShow(month,2,"calenderw"); // Show Week in month
</script>
</body>
</html>