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;}
#tody {padding:3px 1em;}
}
@media screen and (max-width: 320px){
#ethiopic, .gregori {padding:1px 0em;}
#tody {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>
ጌታ ይባርክህ ቆንጆ የክረምት ፕሮጀክት ነው የሰጠህኝ!
ReplyDeleteዳኒ ማን አንተ ነህ ክረምቱን ያወክበት ልጄ! ከታች የነ ማሙሽን አስተያየት አየህልኝ ኣ? አንተ ሙዚቃ አሰማም እንጂ ኩኩ ሰብስቤ እኮ…
Delete“ፀጉሩ ገባ ያለ ፀጋ ያለበሰው
እኔስ እወዳለሁ እንደሱ ያለ ሰው” ብላ የዘፈነችው ከቶ ለነማ ነው??? “ልጆቻችን ካሉ አናረጅም እኛ” እያሉ በመዝፈኛቸው ጊዜ ልጅ ልጅ ሲጫወቱ አይገርምልህም? ብቻ ነገሩ ውስብስብ ነው ትላለች ሃና ሃሃሃሃሃ ብቻ ጅብ ይብላህ ብለህ እንዳትራገም፣ ጅብህን እሰር… እንዲህ ስትል እኔም ታረጅብኛለህ ሃሃሃሃሃሃሃሃ
በጣም የሚገርመኝ ነገር ምን እንደሆነ ታውቃለህ ጃ? ኦዲየንሶችህን ቀድመህ ማወቅህ! ለምሳሌ ጋሼ እዚህ ፖስት ስር እንደሚከሰቱ ድሮ ተንብየህ ነበር። ጋቢያቸውን ለብሰው ክረምቱ ክረምቱ እያሉ ከቻሳ አሉ እርግማናቸውን ይያዝልኝ በእቻ ሃሃሃሃሃሃሃሃሃሃሃ አንተ እና ሃና ደሞ ቴክኒካል ነገር ላይ ብታገሉኝም ካላንደር ሲነሳ ሲነሳ ደርጌክስ ደርጌክስ የምትባባሉት ለምን እንደሆነ ዛሬ ይነገረኝ። ሽማግሌ ካስፈለገም አላጣም ሃሃሃሃሃሃ በመጨረሻም ሃናን ፈንቅሎ አንተ ፖስት ስር አስተያየት የሚያሰጥ ፅሁፍ እንደምን ያለው ነው? እስቲ ነብይ ተናገር ሃሃሃሃሃሃ
ReplyDeleteሰላም ጆሊ እንዴት ነህ? ጆሊ ብርድ አይፈራም እያልክ ስትቀናጣ ብቻ ብርድ አጠናፍሮ እንዳይጥልህ ሃሃሃሃሃሃሃሃሃሃሃ ዳኒ ወዶ ይመስልሃል ጋቢ ለብሶ የተነሳው? ፎቶው ቆርጦት እንጂ እግሩም ሙቅ ውሃ ውስጥ ነበር ሃሃሃሃ ያየን የለም እንጂ ያለበስነው የለም አለ ገጣሚ ቤት ይፍጀው ብቻ ሃሃሃሃሃ
Deleteበደርጌክስ ሃኒቾ ሙሉ ቀን ነው የምስቀው ሌላ ነገር መስሎህ ነው ኣ? ሃሃሃሃሃሃሃሃ ይሄኔ መሬት መለካት ቢሆን ኖሮ ባይንህ ብቻ እንቅጩን ታውቀው ነበር ሃሃሃሃሃ ሆድህን ከሚበላህ ልንገርህ ግን …. ካሌንደሬ ላይ ኤቨንት ሳስገባ “ግንቦት 20” ላይ “ደርግ የወደቀበት ቀን” ነው የሚለው… አስበው ካላንደሬ ፉተር ላይ ነው ያለው፣ እና ያንን ሁሉ ብፅፍ ሄደር ድረስ ወጣሁ ማለት አይደል? ሃሃሃሃ እና ባጭሩ ደርግ X አልኩት… ሃኒቾ ደርጌክስ የምትለው ለዛ ነው። አትፍራ ሙያዊ ቋንቋ አይደለም ሃሃሃሃሃሃ
የድሮ ዘፈን ላይ ሰዎች አይን ላይ ነው የሚውሉት… ለምሳሌ ኤፍሬም ታምሩ ባይኔ ላይ ዋልሽሳ ባይኔ ይላል። ኩኩ ሰብስቤ ዋለ ባይኔ ምነው ዋለ ባይኔ ትላለች። ፀጋዬ እሸቱም ተጓዥ ባይኔ ላይ ይላል። አስቱካም ቀን በአይኔ ውል እያልክ ትላለች። ብዙአየሁ ደምሴም ተስለሻል እንዴ ካይኔ ከመሃሉ ይላል….. አየህ ካይን አይወርዱም ነበር አቤት ትህትናቸው ሃሃሃሃሃሃሃሃ የናንተ ጊዜዎች ግን (ልጅ ነኝ ትል አይደል? ጋሽ ዳኒ ና ተመልከት ጉድህን ሃሃሃሃሃሃ) … የናንተ ጊዜዎች ግን ካይን ወርደው አፍ ላይ ናቸው። ለዚህ ምሳሌዬ ሜላት ቀለመወርቅ ነች “ካፌ ላይ ካፌ ላይ ስሙ አይጠፋም” አለች።
ይሄን ለምን አነሳሁ? ሃኒቾን ፈንቅሎ አስተያየት የሚያሰጥ ስላልከኝ ነው። ብቻ በራሷ ቋንቋ ነገሩ ውስብስብ ነው ሃሃሃሃሃሃሃሃሃሃ አስተያየት ስትሰጣጡ ዋሉ ብቻ ሃሃሃሃሃሃሃ
ሰናይ ቀን!!!
ሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃሃ ርጉም እኮ ነህ የተረገምክ ተንከሲስ ምኑን ከምኑ አገናኘኧው ሃሃሃሃሃሃ
ReplyDelete