Ethiopian calendar with pure JavaScript

Advertisement

 

ብዙ ጊዜ ካሌንደር በላይብረሪ ነው የሚሰራው፡፡ እኔ ራሱ በወመዘክር ነው የሰራሁት ሃሃሃ የሆነ ጊዜ ካሌንደር ያለ ላይበረሪ መስራት “ትሬንድ" እንደመሆን ጀምሮ ነበር፡፡ እኔም ያኔ ነው የኛን ካሌንዳር ያለ ላይብረሪ መስራትን የተቀላቀልኩት፡፡ እዚህ ገፅ ላይ ቴክኒካል ነገር ፅፌ ባላውቅም ካሌንደር የገፄ መለያም ነውና እዚሁ እንዴት ካሌንደሩን እንደሰራሁት ላሳይ፡፡ ቴክኒክ ክፍል ገፄንም እየጎበኛችሁ ሃሃሃ Topazion Collection አንዳንዶች ሲጠይቁኝ ዛሬ ነገ ስል የነበረው እንደ መተየብ የሚሰለቸኝ ስራ ስለሌለ ነው፡፡ ክረምቱ ምስጋና ይግባውና ይኧው ገባሁበት፡፡

ለማሳያ ያህል ቀጥሎ የምንሰራውን ካላንደር እዚሁ ገፅ footer ላይ መመልከትም እንችላለን። እንደ አማራጭም በቀጣዩ ሊንኮች ተመልከቱ .... 

፩) ካሌንደር ያለ ኤቨንት ካሌንደር አንድ

፪) ኤቨንት ያለበት ካላንደር 1 ካሌንደር ሁለት

፫) ኤቨንት ያለበት ካሌንደር 2 ካሌንደር ሶስት

መጀመሪያ ከቀኑ እንጀምራለን

“ዛሬ ቀኑ ደስ ይላል" እንበል ሶስት ጊዜ ሃሃሃ እሺ እንቀጥል፡፡ ዛሬ ለምሳሌ ቀኑ ሐምሌ 7 2017 ዓ.ም ነው፡፡ ካሌንደሬም ላይ ሰዓቶቼም ላይ የምታዩት ነገር ነው፡፡ አንዳንዶች ከሌላ ላይበረሪ ካሌንደር “ኮል" እያረኩ የማመጣው ይመስላቸዋል፡፡ ግን የራሴ “ስክሪፕት" ነው፡፡ ስክሪፕት ስል የፊልም የሚመስለው እንዳይኖር ሃሃሃ በነገራችን ላይ የኛን ቀን “ኮል” ማድረግ እኔ በሞከርኩት ሰዓት ብዙ ችግር ነበረበት፡፡ በትንሹ ዓ.ም የሚለውን የሚለውን ከመፃፍ ጀምሮ… ሌላም ሌላም ችግሮች ነበሩበት፡፡ እኔ ቼክ ካረኩት ውጪ አሁን ሌሎች ሊኖሩ ይችላሉ ብዬ ተስፋ አደርጋለሁ፡፡ ብቻ ወደ ስክሪፕቱ እንሂድ፡፡ 

እጅግ ለማቅለል “ፈንክሸናችንን በኢፍ ሉፕ" ነው የምንጠቀመው፡፡ ኮምፒተር በቀዳሚነት የሚረዳው የነጮቹን ካሌንደር ስለሆነ፣ እሱን ወደኛ ማዕቀፍ መቀየር ነው የመጀመሪያ ስራችን የሚሆነው፡፡

ምሳሌ በፈረንጆች አንድ ሙሉ ወር ውስጥ የኛ ሁለት ወራት ይፈራረቃሉ፡፡ እንደ ምሳሌ “ጁላይ” ላይ የኛ ሰኔም ሐምሌም አሉ፡፡ ጁላይ 7 ጀምሮ ወደኋላ 1 ድረስ የኛ ሰኔ ነው፡፡ 23 እየጨመረ ይመጣል፡፡ ምሳሌ፦ ጁላይ 7 በኛ 23 ደምሮ ሰኔ 30 ነው፤ ጁላይ 6 በኛ 23 ደምሮ ሰኔ 29 ነው፡፡

ጁላይ 8 ጀምሮ እስከ 30 ድረስ ደግሞ የኛ ሐምሌ ነው፡፡ 7 እየቀነሰ ይመጣል፡፡ ምሳሌ፦ ጁላይ 8 በኛ 7 ቀንሶ ሐምሌ 1 ነው፤ ጁላይ 9 በኛ 7 ቀንሶ ሐምሌ 2 ነው፡፡

ስለዚህ የጁላይ ወርን ቀናት በፈንክሽን የሚከተለው ነው:: function ken() ቀን የሚሰራልን ነው፡፡

function ken(){

if (today.getMonth() === 6 &&

today.getDate() <= 7){

day = today.getDate()+23;

return day;}

if (today.getMonth() === 6 &&

today.getDate() >= 8){

day = today.getDate()-7;

return day;} .......

"leap year" ላይ ጷግሜ 6 የምትሆንበት ማለት ላይ ቀኑ ስለሚለወጥ ሌላ “if" እንጨምራለን፡፡ እንደምሳሌ “ኦክቶበርን” እንውሰድ፡፡

function ken(){

if ((currentYear-1) % 4 !== 3){

if(today.getMonth() === 10 &&

today.getDate() <= 9){

day = today.getDate()+21;

return day;}

if (today.getMonth() === 10 &&

today.getDate() >= 10){

day = today.getDate()-9;

return day;}

ወደ ወር ስናልፍ

የኛን 1 ወር በአንድ ቦታ ለማቀፍ የነጮቹን ሁለት ወራት እንጠቀማለን፡፡ እንደ ምሳሌ ሚያዝያ ወርን ብንወስድ April እና May ወርን እንጠቀማለን። function wer() ወር የሚሰራልን ነው፡፡ ከታች ለምሳሌ return 7 (ሰባትን ስጠኝ) የምንለው ሚያዝያ ወርን ነው፡፡ ሚያዝያ ስምንተኛው ወር ቢሆንም ኮምፒውተር ከዜሮ ስለሚጀምር ሰባት ነው፡፡ ከላይ በቀን እንዳየነው leap year ላይ ሌላ if... እንጨምራለን፡፡

function wer(){

if ((today.getDate() >= 9 && today.getMonth() === 3) || (today.getDate() <= 8 && today.getMonth() === 4)){ return 7;}

For leap year

if ((currentYear-1) % 4 !== 3) {

if ((today.getDate() >= 10 && today.getMonth() === 11) || (today.getDate() <= 8 && today.getMonth() === 0)){ return 3;}}.....

ወደ አመት ስንሄድ…

አመታችን ደግሞ ከJanuary በፊት በ7 ያንሳል፡፡ ከJanuary በኋላ ደግሞ በ8 ያንሳል፡፡ function amet() አመት የምንሰራበት ነው፡፡ አመት ውስጥ ከላይ ያየነውን function wer() ስለምንጠቀመው ከታች currentMonth === 0 የተባለው የኛው መስከረም ነው፡፡

function amet(){

var currentMonth = wer();

var d = today.getFullYear();

if (currentMonth === 0){

d = today.getFullYear()-7;

return d;}

if (currentMonth === 6){

d = today.getFullYear()-8;

return d;}.....

አጠቃላይ ስክሪፕታችን ይሄን ይመስላል

<div id="ethiopic">

<script type="text/javascript">

var today = new Date();

var currentMonth = wer();

var currentYear = amet();

var emonth = ["መስ", "ጥቅ", "ሕዳ", "ታህ", "C", "९५", "003", "0", "77", "66", "ሐም", "ነሐ", "ጳጕ"];

var monthName = emonth[wer()];

function ken(){

if (today.getMonth() === 5 &&

today.getDate() <= 7){

day = today.getDate()+23;

return day;}

if(today.getMonth() === 5 &&

today.getDate() >= 8){

day = today.getDate()-7;

return day;}

if (today.getMonth() === 6 &&

today.getDate() <= 7){

day = today.getDate()+23;

return day;}

if (today.getMonth() === 6 &&

today.getDate() >= 8){

day = today.getDate()-7;

return day;}

if (today.getMonth() === 7 &&

today.getDate() <= 6){

day = today.getDate()+24;

return day;}

if (today.getMonth() === 7 &&

today.getDate() >= 7){

day = today.getDate()-6;

return day;}

if (today.getMonth() === 8 &&

today.getDate() <= 5){

day = today.getDate()+25;

return day;}

if (currentMonth === 12){

if (today.getMonth() === 8 &&

today.getDate() >= 6 && today.getDate()

<= 10){

day = today.getDate()-5;

return day;}}

if ((currentYear-1) % 4 == 3){

if (today.getMonth() === 8 &&

today.getDate() === 11){

day = 6;

return day;}

}

if ((currentYear-1) % 4 !== 3){

if (today.getMonth() === 8 &&

today.getDate() >= 11){

day = today.getDate()-10;

return day;}

}

if ((currentYear-1) % 4 !== 3){

if (today.getMonth() === 9 &&

today.getDate() <= 10){

day = today.getDate()+20;

return day;}

if (today.getMonth() === 9 &&

today.getDate() >= 11){

day = today.getDate()-10;

return day;}

}

if ((currentYear-1) % 4 !== 3){

if (today.getMonth() === 10 && 

today.getDate() <= 9){

day = today.getDate()+21;

return day;}

if (today.getMonth() === 10 &&

today.getDate() >= 10){

day = today.getDate()-9;

return day;}

}

if ((currentYear-1) % 4 !== 3) {

if (today.getMonth() === 11 &&

today.getDate() <= 9){

day = today.getDate()+21;

return day;}

if (today.getMonth() === 11 &&

today.getDate() >= 10){

day = today.getDate()-9;

return day;}

}

if ((currentYear-1) % 4 !== 3){

if (today.getMonth() === 0 &&

today.getDate() <= 8){

day = today.getDate()+22;

return day;}

if (today.getMonth() === 0 &&

today.getDate() >= 9){

day = today.getDate()-8;

return day;}

}

if ((currentYear-1) % 4 !== 3){

if (today.getMonth() === 1 &&

today.getDate() <= 7){

day = today.getDate()+23;

return day;}

if(today.getMonth() === 1 &&

today.getDate() >= 8){

day = today.getDate()-7;

return day;}

}

if (today.getMonth() === 2 &&

today.getDate() <= 9){

day = today.getDate()+21;

return day;}

if (today.getMonth() === 2 &&

today.getDate() >= 10){

day = today.getDate()-9;

return day;}

if (today.getMonth() === 3 &&

today.getDate() <= 8){

day = today.getDate()+22;

return day;}

if (today.getMonth() === 3 &&

today.getDate() >= 9){

day = today.getDate()-8;

return day;}

if(today.getMonth() === 4 &&

today.getDate() <= 8){

day = today.getDate()+22;

return day;}

if (today.getMonth() === 4 &&

today.getDate() >= 9){

day = today.getDate()-8;

return day;}

if ((currentYear-1) % 4 == 3){

if (today.getMonth() === 8 &&

today.getDate() >= 12){

day = today.getDate()-11;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 9 &&

today.getDate() <= 11){

day = today.getDate()+19;

return day;}

if (today.getMonth() === 9 &&

today.getDate() >= 12){

day = today.getDate()-11;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 10 &&

today.getDate() <= 10){

day = today.getDate()+20;

return day;}

if (today.getMonth() === 10 &&

today.getDate() >= 11){

day = today.getDate()-10;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 11 &&

today.getDate() <= 10){

day = today.getDate()+20;

return day;}

if(today.getMonth() === 11 &&

today.getDate() >= 11){

day = today.getDate()-10;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 0 &&

today.getDate() <= 9){

day = today.getDate()+21;

return day;}

if (today.getMonth() === 0 &&

today.getDate() >=10){

day = today.getDate()-9;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 11 &&

today.getDate() <= 10){

day = today.getDate()+20;

return day;}

if(today.getMonth() === 11 &&

today.getDate() >= 11){

day = today.getDate()-10;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 0 &&

today.getDate() <= 9){

day = today.getDate()+21;

return day;}

if (today.getMonth() === 0 &&

today.getDate() >=10){

day = today.getDate()-9;

return day;}

}

if((currentYear-1) % 4 == 3){

if (today.getMonth() === 1 &&

today.getDate() <= 8){

day = today.getDate()+22;

return day;}

if(today.getMonth() === 1 &&

today.getDate() >=9){

day = today.getDate()-8;

return day;}

}

}

function wer(){

if ((today.getDate() >= 9 &&

today.getMonth() === 3) ||

(today.getDate() <= 8 &&

today.getMonth() === 4)){

return 7;}

if((today.getDate() >= 9 &&

today.getMonth() === 4) ||

(today.getDate() <=7 && today.getMonth() === 5))

{

return 8;}

if ((today.getDate() >= 8 && today.getMonth() === 5) || (today.getDate() <= 7 && today.getMonth() === 6)){ return 9;}

if ((today.getDate() >= 8 && today.getMonth() === 6) || (today.getDate() <= 6 && today.getMonth() === 7)){ return 10;}

if ((today.getDate() >= 7 && today.getMonth() === 7) || (today.getDate() <= 5 && today.getMonth() === 8)){ return 11;}

if (today.getDate() >= 6 && today.getDate() <= 10 && today.getMonth() === 8) { return 12;}

if ((currentYear-1) % 4 == 3)

{

if (today.getDate() >= 6 && today.getDate() <= 11 && today.getMonth() === 8) { return 12;}

}

if ((today.getDate() >= 11 && today.getMonth() === 8) || (today.getDate() <= 10 && today.getMonth() === 9)){ return 0;}

if ((today.getDate() >= 11 && today.getMonth() === 9) || (today.getDate() <= 9 && today.getMonth() === 10)){ return 1;}

if ((today.getDate() >= 10 && today.getMonth() === 10) || (today.getDate() <= 9 && today.getMonth() === 11)){ return 2;}

if ((currentYear-1) % 4 !== 3){

if ((today.getDate() >= 10 && today.getMonth() === 11) || (today.getDate() <= 8 && today.getMonth() === 0)){ return 3;}}

if ((currentYear-1) % 4 !== 3){

if ((today.getDate() >= 9 && today.getMonth() === 0) || (today.getDate() <= 7 && today.getMonth() === 1)){

return 4;}}

if ((currentYear-1) % 4 !== 3){

if ((today.getDate() >= 8 && today.getMonth() === 1) || (today.getDate() <= 9 && today.getMonth() === 2)){ return 5;}}

if ((today.getDate() >= 10 && today.getMonth() === 2) || (today.getDate() <= 8 && today.getMonth() === 3)){ return 6;}

if ((currentYear-1) % 4 == 3)

{

if ((today.getDate() >= 12 && today.getMonth() === 8) || (today.getDate() <= 11 && today.getMonth() === 9)){

return 0;}}

if ((currentYear-1) % 4 == 3)

{

if ((today.getDate() >= 12 &&

today.getMonth() === 9) ||

(today.getDate() <= 10 && today.getMonth() === 10)){

return 1;}}

if ((currentYear-1) % 4 == 3)

{

if ((today.getDate() >= 11 &&

today.getMonth() === 10) ||

(today.getDate() <= 10 && today.getMonth() === 11)){

return 2;}}

if ((currentYear-1) % 4 == 3)

{

if ((today.getDate() >= 11 && today.getMonth() === 11) || (today.getDate() <= 9 && today.getMonth() === 0)){

return 3;}}

if ((currentYear-1) % 4 == 3)

{

if ((today.getDate() >= 10 && today.getMonth() === 0) || (today.getDate() <= 8 && today.getMonth() === 1)){

return 4;}}

if ((currentYear-1) % 4 == 3)

{

if ((today.getDate() >= 9 &&

today.getMonth() === 1) || (today.getDate() <= 9 && today.getMonth() === 2)){

return 5;}}

}

function amet(){

var currentMonth = wer();

var d = today.getFullYear();

if (currentMonth === 0){

d = today.getFullYear()-7;

return d;}

if (currentMonth === 1){

d = today.getFullYear()-7;

return d;}

if (currentMonth === 2){

d = today.getFullYear()-7;

return d;}

if (currentMonth === 3 && today.getDate()

<= 8){

d = today.getFullYear()-8;

return d;}

if ((currentYear-1) % 4 3)

{

if (currentMonth === 3 && today.getDate()

<= 9){

d = today.getFullYear()-8;

return d;}

}

if (currentMonth === 3 && today.getDate()

>= 10){

d = today.getFullYear()-7;

return d;}

if ((currentYear-1) % 4 == 3)

{

if (currentMonth === 3 && today.getDate()

>= 11){

d = today.getFullYear()-7;

}

return d;}

if (currentMonth === 4){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 5){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 6){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 7){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 8){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 9){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 10){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 11){

d = today.getFullYear()-8;

return d;}

if (currentMonth === 12){

d = today.getFullYear()-8;

return d;}

}

document.write(monthName+" "+ken()+",

"+amet());

</script>

</div>

ወደ ካላንደር ግንባታው ስንሸጋገር

በመጀመሪያ የካሌንደሩን user interface እንሰራለን፡፡ የኔ ካሌንደር 4 ነገሮችን ይዟል፡፡

፩) የካሌንደሩ ሰንጠረዥ

ከእሁድ እስከ ቅዳሜ ያሉ ሰባት ቀናት

የሚደረደሩበት headings

፪) ወራትን የምናይበት previous እና next buttons

፫) ዛሬ ወር ላይ የሚመልሰን today button

፬) የፈለግነው አመትና ወርን የሚያሳየን drop-down menu

የካሌንደራችንን body ዝምብለን አንሰራውም፡፡ ቴብል ውስጥ የሚኖሩትን “ሴሎች" ስንፈጥራቸው፣ የካሌንደሩ ቴብል በራሱ ይሞላል፡፡ ይሄን እንዴት እንደምናረግ ቀጥሎ እናያለን።

የካሌንደራችንን ፕሮግራም እንፃፍ

ፕሮግራማችን ብዙ ፈንክሽኖች ይኖሩታል፡፡ እናያቸዋለን፡፡ በመጀመሪያ ግን ወር እና አመት የሚያሳየውን ፈንክሽን ነው የምንሰራው፡፡ showCalendar (month, year):: ይሄንን ፈንክሽን አንዴ ስንጠራው (call ስናደርግ) ዳይናሚካሊ ካሌንደራችንን በHTML ይፈጥርልናል፡፡

ይሄን ካሌንደር ስሰራ የያዘኝ ይሄን የአመቱን መጀመሪያ ቀን የምፈጥርበት መንገድ ነበር፡፡ ብዙ በሙከራ ላይ የነበሩ ባለሙያዎችም ችግራቸው ይሄ ነው፡፡ የምንጊዜም ዘላቂ የፈጠርኩት ፎርሙላዬ ቀጣዩ ነው፡፡ 

var firstDayOfYear = new Date((currentYear), 8, 6).getDay()+2;

var firstDay = (currentMonth - 1)*2 + firstDayOfYear > 7? ((currentMonth - 1)*2 + firstDayOfYear) % 7: (currentMonth -1)*2 + firstDayOfYear;

ከዚህ በኋላ for loop መስራት ይቀለናል፡፡ ሁሉንም የቴብላችንን ሴሎች በቀጣዩ ፎር ሉፕ ነው የምንፈጥራቸው ቀጥሎ አብራራዋለሁ፡: // creating all cell የሚለውን ተመልከቱ፡፡ 

function showCalendar (month, year) {

var firstDayOfYear = new

Date((currentYear), 8, 6).getDay()+2; var firstDay = (currentMonth - 1)*2 + firstDayOfYear > 7? ((currentMonth - 1)*2 + firstDayOfYear) % 7: (currentMonth -1)*2 + firstDayOfYear;

tbl =

document.getElementById("calendar-

body");

tbl.innerHTML = "";

monthAndYear.innerHTML =

months [month] + + yearet();

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 (currentMonth === 7){

if ((date === (today.getDate()+22) && month === today.getMonth()+3) || (date === (today.getDate()-8) && month === today.getMonth()+4)) {cell.className = "date-picker selected";

}}

if (currentMonth === 8){

if ((date === (today.getDate()+23) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-8) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected"; }}

if (currentMonth === 9){

if ((date === (today.getDate()+23) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-7) && month === today.getMonth()+4 && year === today.getFullYear()-8)) {cell.className = "date-picker selected"; }}

if (currentMonth === 10){

if ((date === (today.getDate()+24) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-7) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if (currentMonth === 11){

if ((date === (today.getDate()+25) && month === today.getMonth()+3 && year = today.getFullYear()-8) || (date === (today.getDate()-6) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if (currentMonth === 12){

if ((date === (today.getDate()+22) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-5) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 0) && ((currentYear-1) % 4 !== 3))

{

if ((date === (today.getDate()+20) && today.getMonth() === 9 && year === today.getFullYear()-7) || (date === (today.getDate()-10) && today.getMonth() === 8 && year === today.getFullYear()-7)) {cell.className = "date-picker selected";

}}

if ((currentMonth === 1) && ((currentYear-1) % 4 !== 3))

{

if ((date === (today.getDate()+21) && today.getMonth() === 10 && year === today.getFullYear()-7) || (date === (today.getDate()-10) && today.getMonth() = = 9 && year === today.getFullYear()-7)) {cell.className = "date-picker selected";

}}

if ((currentMonth === 2) && ((currentYear-1) % 4 !== 3))

{

if ((date === (today.getDate()+21) && today.getMonth() === 11 && year === today.getFullYear()-7) || (date === (today.getDate()-9) && today.getMonth() === 10 && year === today.getFullYear()-7))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 3) && ((currentYear-1) % 4 !== 3))

{

if ((date === (today.getDate()+22) && today.getMonth() === 0 && year === today.getFullYear()-8) || (date === (today.getDate()-9) && today.getMonth() === 11 && year === today.getFullYear()-7))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 4) && ((currentYear-1) % 4 !== 3))

{

if ((date === (today.getDate()+23) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-8) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 5) && ((currentYear-1) % 4 !== 3))

{

if ((date === (today.getDate()+21) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-7) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if (currentMonth === 6){

if ((date === (today.getDate()+22) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-9) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 0) && ((currentYear-1) % 4 == 3))

{

if ((date === (today.getDate()+19) && today.getMonth() === 9 && year === today.getFullYear()-7) || (date === (today.getDate()-11) && today.getMonth() === 8 && year === today.getFullYear()-7)) {cell.className = "date-picker selected";

}}

if ((currentMonth === 1) && ((currentYear-1) % 4 == 3))

{

if ((date === (today.getDate()+20) && today.getMonth() === 10 && year === today.getFullYear()-7) || (date === (today.getDate()-11) && today.getMonth() === 9 && year === today.getFullYear()-7)) {cell.className = "date-picker selected";

}}
if ((currentMonth === 2) && ((currentYear-1) % 4 == 3))

{

if ((date === (today.getDate()+20) && today.getMonth() === 11 && year === today.getFullYear()-7) || (date === (today.getDate()-10) && today.getMonth() === 10 && year === today.getFullYear()-7)) {cell.className = "date-picker selected";

}}

if ((currentMonth === 3) && ((currentYear-1) % 4 == 3))

{

if ((date === (today.getDate()+21) && today.getMonth() === 0 && year === today.getFullYear()-8) || (date === (today.getDate()-10) && today.getMonth() 11 && year === today.getFullYear()-7))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 4) && ((currentYear-1) % 4 == 3))

{

if ((date === (today.getDate()+22) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-9) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 5) && ((currentYear-1) % 4 == 3))

{

if ((date === (today.getDate()+21) && month === today.getMonth()+3 && year === today.getFullYear()-8) || (date === (today.getDate()-8) && month === today.getMonth()+4 && year === today.getFullYear()-8))

{cell.className = "date-picker selected";

}}

if ((currentMonth === 3) && ((currentYear-1) % 4 !== 3))

{

if (date === 29)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 3) && ((currentYear-1) % 4 == 3))

{

if (date === 28)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 4) && ((currentYear-1) % 4 == 3))

{

if (date === 11)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 4) && ((currentYear-1) % 4 !== 3))

{

if (date === 11)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 5) && ((currentYear-1) % 4 == 3))

{

if (date === 23)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 5) && ((currentYear-1) % 4 !== 3))

{

if (date === 23)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 7) && ((currentYear-1) % 4 == 3))

{

if (date === 23 || date ===27)

{cell.className = "date-piccker selected";

}}

if ((currentMonth === 7) && ((currentYear-1) % 4 !== 3))

{

if (date === 23 || date ===27) {cell.className = "date-piccker selected";

}}

if ((currentMonth === 8) && ((currentYear-1) % 4 == 3))

{

if (date === 20) {cell.className = "date-piccker selected";

}}

if ((currentMonth === 8) && ((currentYear-1) % 4 !== 3))

{

if (date === 20) {cell.className = "date-piccker selected";

}}

if ((currentMonth === 9) && ((currentYear-1) % 4 == 3))

{

if (date === 9) {cell.className = "date-piccker selected";

}}

if ((currentMonth === 0) && ((currentYear-1) % 4 !== 3))

{

if (date === 1 || date === 17) {cell.className = "date-piccker selected";

}}

if ((currentMonth === 0) && ((currentYear-1) % 4 == 3))

{

if (date === 1 || date === 17) {cell.className = "date-piccker selected";

}}

if ((currentMonth === 7) && (currentYear === 2016))

{

if (date === 25)

{cell.className = "date-piccker

selected";

}} if ((currentMonth === 7) && (currentYear === 2017))

{

if (date === 10 || date := 12)

{cell.className = "date-piccker selected";

}} if ((currentMonth === 7) && (currentYear === 2018))

{ if (date === 2 || date === 4)

{cell.className = "date-piccker selected"; }}

if ((currentMonth === 7) && (currentYear === 2019))

{

if (date === 22 || date === 24)

{cell.className = "date-piccker

selected";

}}

if ((currentMonth === 7) && (currentYear === 2020))

{

if (date === 6 || date === 8)

{cell.className = "date-piccker

selected";

}}

row.appendChild(cell);

date++;

}

}

tbl.appendChild(row);

}

እንደምታዩት nested for loop ተጠቅሚያለሁ፡፡ ምክንያቱም ለቴብላችን 7 column እና 6 row ስለሚያስፈልገን ነው፡፡ outer loop ላይ እስከ ስድስት የሚደርስ tr (table row) እንፈጥራለን) ከዛ በinner loop እያንዳንዱ ካሌንደር ቴብላችን ላይ የሚታተሙ ቀኖቻችንን እንፈጥራለን፡፡ ቀኑ ተጀምሮ ማለቁን date በተባለ variable እንቆጣጠራለን፡፡ በእያንዳንዱ iteration ውስጥ ሶስት if conditions አሉ፡፡

የመጀመሪያው if መጀመሪያው row ላይ ያሉትን የቴብል አባላት ይሞላል 

ሁለተኛው if ቀኑ 30 ሲሞላ መሙላቱን አቁሞ break ያደርጋል፡፡


ሶስተኛው ቀኑ 30 ካልሞላ መሙላቱን ይቀጥላል፡፡

በመጨረሻም ቀን ወሩና አመቱ ከዛሬው ቀን ጋር ሲገጥሙ የካላንደሩን የዕለቱ ቀን ላይ የተለየ ቀለም የሚጠቀም date-picker ተጠቅሚያለሁ፡፡ 

አሁን የፈለግነው አመትና ወር ላይ የሚመላልሰንን ፈንክሽን እንስራ፡፡ መጀመሪያ currentYear እና currentMonth የሚሉ variables እናዘጋጃለን። ፕሮግራሙ run ሲያደርግ showCalendar (currentMonth, currentYear) የዛሬውን ወርና አመት ይሰጠናል፡፡

function previous()፣ function next()፣ function zare() በተመሳሳይ መልኩ showCalendar (currentMonth, currentYear) call በማድረግ ነው የሚሰሩት፡፡

function next() {

currentYear = (currentMonth === 12) ?

currentYear + 1: currentYear;

13; currentMonth = (currentMonth + 1) %

showCalendar (currentMonth, currentYear); }

function previous() {

currentYear = (currentMonth === 0) ?

currentYear - 1: currentYear;

currentMonth = (currentMonth === 0) ?

12: currentMonth - 1;

showCalendar (currentMonth,

currentYear);

}

function zare() {

currentYear = amet();

currentMonth = wer();

showCalendar (currentMonth,

currentYear);

}

function jump() {

currentYear =

parseInt(select Year.value);

currentMonth =

parseInt(selectMonth.value);

showCalendar (currentMonth,

currentYear);

}

በወር ውስጥ ያሉ ቀናትን የሚያሳየው function ቀጥሎ ያለው ነው፡፡ 12 ወራት 30 ቀናት አላቸው፡፡ ጷግሜ ደግሞ አንዴ 5 አንዴ ስድስት ትሆናለች፡፡ ሰባት የምትሆንበትን አንኖርም ብዬ ነው ሃሃሃሃ

function daysInMonth(){

if (currentMonth === 12){

if ((currentYear-8) % 4 == 3) { return 6; } }

else return 5;}

else return 30;}

Style css highlight ይኖራችሁ ዘንድ

የሚከተለው ነው፡፡

<style>

#calendar th {background-color:#dedede;

color:#000000;}

#month{color:black;font-weight:bold;}

#year{color:black;font-weight:bold;}

.gregori{float:right;font-weight:bold;

background: #ffffff;

color: #585858;

border: 1px solid #555555;

border-radius: 3px;

padding: 3px 1em;

}

#ethiopic{display:inline-block;font-

weight:bold;

background: #ffffff;

color: #585858;

border: 1px solid #555555;

border-radius: 3px;

padding: 3px 1em;

}

#zare{float:left;

display: inline-block;

background: #00a2b7;

color: #fff;

border: 1px solid #bfc5c5;

border-radius: 3px;

padding: 5px 1em;

font-weight:bold;

}

@media screen and (max-width: 380px){

#ethiopic, .gregori{padding:2px .5em;}

#zare {padding:3px 1em;}

}

@media screen and (max-width: 320px){

#ethiopic, .gregori {padding:1px 0em;}

#zare {padding:2px 1em;}

.button-container-calendar

#monthAndYear{padding:2px 0.5em;}

}

#monthAndYear{display:inline-block;font-

weight:bold;

margin-top:0em;

background: #ffffff;

color: #585858;

border: 1px solid #555555;

border-radius: 3px;

padding: 3px 1em;

}

.maseriya{text-align:center;margin-

top:2em;}

html {

font-family: sans-serif;

font-size: 15px;

line-height: 1.4;

color: #444;

}

body {

margin: 0;

font-size: 1em;

}

.wrapper {

margin: 15px auto;

max-width: 1100px;

}

.container-calendar {

background:#000;

padding: 15px;

max-width: 475px;

margin: 0 auto;

overflow: auto;

}

.button-container-calendar button {

cursor: pointer;

display: inline-block;

zoom: 1;

background: #00a2b7;

color: #fff;

border: 1px solid #0aa2b5;

border-radius: 4px;

padding: 5px 10px;

font-weight:bold;

}

.table-calendar {

border-collapse: collapse;

width: 100%;

background-color:#fff;

}

.table-calendar td, .table-calendar th {

padding: 5px;

border: 1px solid #555555;

text-align: center;

vertical-align: top;

}

.date-picker.selected {

font-weight: bold;border: 2px solid

black;

background-color:#b5fe18;

}

.date-picker.selected span {

}

.date-piccker.selected {

font-weight: bold;border: 2px solid

black;

background-color:#d00;

}

.date-piccker.selected span {color:#fff;

}

/* sunday */

.date-picker:nth-child(1) {

color: red;

}

/* friday */

.date-picker:nth-child(6) {

color: green;

}

.button-container-calendar {

position: relative;

margin-top:0.5em;

margin-bottom: 0em;

overflow: hidden;

clear: both;

text-align:center;

font-weight:bold;

}

#previous {

float: left;

}

#next {

}

float: right;

.footer-container-calendar {

margin-top: 0em;

text-align:center;

padding: 10px 0;

}

.footer-container-calendar select {

cursor: pointer;

display: inline-block;

zoom: 1;

background: #ffffff;

color: #585858;

border: 1px solid #555555;

border-radius: 3px;

padding: 5px 1em;

}

.clippings, .holes{

display:flex;

flex-direction:row;

align-items: left;

justify-content:space-between;

width:98%;

height:40px;

position: relative;

margin-top:-1em;

}

.rings{

width:40px;

height:40px;

border-radius:50%;

border:10px solid #235;

transform-origin:100% 100%;

transform:skewx(-20deg) rotatey (40deg)

translatex(5px);

border-right:none;

border-bottom:none;

}

.hole{

width:30px;

height:30px;

border-radius:50%;

background:#222;

transform-origin:50% 50%;

}

</style>