پیاده سازی تقویم شمسی در شیرپوینت با استفاده از جاوا اسکریپت (قسمت اول)

در مجموعه مقالاتی که خدمت شما ارائه خواهم کرد در مورد پیاده سازی تقویم شمسی با استفاده از امکانات جاوا اسکریپت و Jquery صحبت خواهد شد و به شما آموزش خواهم داد چگونه بدون استفاده از کدهای سمت سرور بتوانید تقویم شمسی را در شیرپوینت مورد استفاده قرار دهید ، این روش ضعف هایی هم دارد ولی به هر حال میتواند کمک زیادی به شما در یادگیری و استفاده از تقویم شمسی داشته باشد .


تغییر تاریخ ها در نمای لیست


در این بخش از مقاله قصد داریم تاریخ هایی که در نمای یک لیست یا کتابخانه اسناد وجود دارد را به شمسی تبدیل نماییم ، در این مثال تقویم سایت را می بایست بر روی تقویم میلادی قرار دهید ، اگر در نمای لیست هایتان ستون هایی از نوع تاریخ داشته باشید ، صفحه ای همچون شکل زیر را مشاهده خواهید نمود :
[IMG]http://www.mediafire.com/convkey/7741/zi9c774v1vx3hmmfg.jpg[/IMG]

همانطور که مشاهده میکنید در این مثال که یک لیست از نوع وظایف را نمایش می دهد دو ستون به نامه های تاریخ شروع و تاریخ انجام وجود دارد که تاریخ های میلادی در این نما کاملا مشخص هستند.


اگر نگاهی به سورس صفحه داشته باشید خواهید دید که هر یک از سطرهای این نما که به صورت جدول ذخیره شده اند دارای TD هایی هستند که مقدار Class آن ها برابر ms-vb2 میباشد .


اگر بخواهیم مقادیر این تاریخ ها رو تغییر دهیم نیاز داریم یک Loop ساده بین تمام تگ های TD این صفحه ایجاد کرده و تاریخ ها رو تشخیص و تغییر دهیم .


برای اینکه این کد قابل دسترسی در تمام لیست ها باشد ، ابتدا شیرپوینت دیزاینر را باز کرده و Master Page پیش فرض سایت را در حالت ویرایش قرار دهید و درست قبل از بسته شدن تگ Body ( مقدار </body> را جستجو کنید ) کد های زیر را وارد نمایید.


[code]
<script type="text/javascript">


// متغیر های مورد نیاز


var Day;


var Month;


var Year;


var pday;


var pmonth;


var pyear;





// الگوی تشخیص مقادیر تاریخ


var RegExPattern = "\\d{4}\\/\\d{2}\\/\\d{2}";





// دریافت تمام تگ های تی دی در صفحه


var tags = document.getElementsByTagName('TD');


for (var i = 0; i < tags.length; i++)


{


// دریافت مقدار کلاس تگ


var TdClassName = tags[i].className;


// چک کردن مقدار


if (TdClassName .indexOf('ms-vb2') != -1)


{


// ذخیره مقدار درون تگ


dateValue = tags[i].innerText;


var regx = new RegExp(RegExPattern, "g");


// چک کردن اینکه آیا مقدار درون تگ از نوع تاریخ می باشد یا خیر


if (regx.test(dateValue))


{





Year = new Number(dateValue.substring(0, 4));


Month = new Number(dateValue.substring(5, 7));


Day = new Number(dateValue.substring(8, 10));





// تبدیل تاریخ میلادی به شمسی


var j = gregorian_to_jd(Year,Month,Day);


perscal = jd_to_persian(j);


pyear = perscal[0];


pmonth = perscal[1];


pday = perscal[2];





if(Number(pmonth) < 10)


pmonth = "0" + pmonth;





if(Number(pday) < 10)


{


pday = "0" + pday;


}


// ذخیره مقدار تاریخ شمسی


var shamsiDate = pyear + "/" + pmonth + "/" + pday;





// جایگذاری مقدار تاریخ میلادی با شمسی


tags[i].innerText = shamsiDate;


}





}


}





// توابع تبدیل تاریخ


var GREGORIAN_EPOCH = 1721425.5;


function leap_gregorian(year) {


return ((year % 4) == 0) &&


(!(((year % 100) == 0) && ((year % 400) != 0)));


}








function gregorian_to_jd(year, month, day) {


return (GREGORIAN_EPOCH - 1) +


(365 * (year - 1)) +


Math.floor((year - 1) / 4) +


(-Math.floor((year - 1) / 100)) +


Math.floor((year - 1) / 400) +


Math.floor((((367 * month) - 362) / 12) +


((month <= 2) ? 0 :


(leap_gregorian(year) ? -1 : -2)


) +


day);


}





function jd_to_persian(jd)


{


var year, month, day, depoch, cycle, cyear, ycycle,


aux1, aux2, yday;








jd = Math.floor(jd) + 0.5;





depoch = jd - persian_to_jd(475, 1, 1);


cycle = Math.floor(depoch / 1029983);


cyear = mod(depoch, 1029983);


if (cyear == 1029982) {


ycycle = 2820;


} else {


aux1 = Math.floor(cyear / 366);


aux2 = mod(cyear, 366);


ycycle = Math.floor(((2134 * aux1) + (2816 * aux2) + 2815) / 1028522) +


aux1 + 1;


}


year = ycycle + (2820 * cycle) + 474;


if (year <= 0) {


year--;


}


yday = (jd - persian_to_jd(year, 1, 1)) + 1;


month = (yday <= 186) ? Math.ceil(yday / 31) : Math.ceil((yday - 6) / 30);


day = (jd - persian_to_jd(year, month, 1)) + 1;


return new Array(year, month, day);


}


</script>
[/code]
همانطور که میدانید در جاوا اسکریپت قابلیت استفاده از regular expression وجود دارد ، ما الگویی را برای تشخیص تاریخ تعریف نمودیم و سپس با استفاده از متد getElementsByTagName مجموعه ای از المنت های TD را در متغیری ذخیره نمودیم . سپس با یک Loop تک به تک تگ ها را چک نمودیم ، برای اینکه کارایی بالاتر رود و تگ های نا مربوط حذف گردند ما یک شرط در اینجا قرار دادیم تا فقط تگ هایی که نام کلاس آن ها ms-vb2 می باشد را مورد بررسی قرار دهد .
سپس مقدار داخلی تگ را در متغیری ذخیره و با متد regx.test چک خواهیم کرد که آیا مقدار تگ از نوع تاریخ است یا خیر ، اگر مقدار از نوع تاریخ باشد با استفاده از توابع تبدیل تاریخ ها ، تاریخ میلادی را به تاریخ شمسی تبدیل و مقدار جدید را جایگزین مقدار قبلی می نماییم .


اگر فایل را ذخیره نمایید و صفحه را مجدد بارگذاری کنید ، تاریخ ها به شکل زیر تغییر خواهند نمود :
[IMG]http://www.mediafire.com/convkey/dbb8/rdexq798iyxuepbfg.jpg[/IMG]
به این شکل در اولین گام تاریخ های میلادی در تمام لیست ها و مخازن اسناد شما به تاریخ شمسی تبدیل شدند !
فکر میکنم هیجان زده شده اید برای تغییر قسمت های دیگر ، مثل لیست های از نوع تقویم و یا Date Picker شیرپوینت . برای شروع همین تمرین را انجام دهید ، در قسمت بعدی به تغییر Date Picker و نحوه ذخیره تاریخ های شمسی خواهیم پرداخت .
امیدوارم که این مقاله برای شما مورد استفاده قرار گرفته باشد .


موفق و پیروز باشید.


رامین احمدی

سلام مرسي رامين جان مقاله خوبي بود فقط من تمامي مراحل رو اجرا كردم و يك كپي از Master Page سايتم گرفتم و Edit كردم تمامي tag بالا هم كپي و به عنوان Master Page Default اجرا كردم ولي هيچ تغيير در تاريخ task سايت اتفاق نيفتاد كجاي كارم اشتباه است از انجايي كه تمام مراحل و يك به يك انجام دادم .

با تشكر از مهندس رامين به خاطر مقاله خوبشون ولي اين كد ظاهرا مشكل دارد و كدي كه كار ميكنه به صورت زير بايد داخل Master Page كپي بشه داخل فروم برنامه نويسان پيدا كردم دوستان استفاده كنيد .

[HTML]<script type="text/javascript"> // متغير هاي مورد نياز var Day; var Month; var Year; var pday; var pmonth; var pyear; // دريافت تمام تگ هاي تي دي در صفحه var tags = document.getElementsByTagName('TD'); for (var i = 0; i < tags.length; i++) { // دريافت مقدار کلاس تگ var TdClassName = tags[i].className; // چک کردن مقدار if (TdClassName.indexOf('ms-vb2') != -1) { // ذخيره مقدار درون تگ dateValue = tags[i].innerText; var d = new Date(dateValue == "" ? "N" : dateValue); // چک کردن اينکه آيا مقدار درون تگ از نوع تاريخ مي باشد يا خير if(!isNaN(d)) { Year = d.getFullYear(); Month = d.getMonth() + 1; Day = d.getDate(); // تبديل تاريخ ميلادي به شمسي var j = gregorian_to_jd(Year, Month, Day); perscal = jd_to_persian(j); pyear = perscal[0]; pmonth = perscal[1]; pday = perscal[2]; if (Number(pmonth) < 10) pmonth = "0" + pmonth; if (Number(pday) < 10) { pday = "0" + pday; } // ذخيره مقدار تاريخ شمسي var shamsiDate = pyear + "/" + pmonth + "/" + pday; // جايگذاري مقدار تاريخ ميلادي با شمسي tags[i].innerText = shamsiDate; } } } // توابع تبديل تاريخ function mod(a, b) { return a - (b * Math.floor(a / b)); } function leap_gregorian(year) { return ((year % 4) == 0) && (!(((year % 100) == 0) && ((year % 400) != 0))); } function gregorian_to_jd(year, month, day) { var GREGORIAN_EPOCH = 1721425.5; return (GREGORIAN_EPOCH - 1) + (365 * (year - 1)) + Math.floor((year - 1) / 4) + (-Math.floor((year - 1) / 100)) + Math.floor((year - 1) / 400) + Math.floor((((367 * month) - 362) / 12) + ((month <= 2) ? 0 : (leap_gregorian(year) ? -1 : -2)) + day); } function persian_to_jd(year, month, day) { var PERSIAN_EPOCH = 1948320.5; var epbase, epyear; epbase = year - ((year >= 0) ? 474 : 473); epyear = 474 + mod(epbase, 2820); return day + ((month <= 7) ? ((month - 1) * 31) : (((month - 1) * 30) + 6) ) + Math.floor(((epyear * 682) - 110) / 2816) + (epyear - 1) * 365 + Math.floor(epbase / 2820) * 1029983 + (PERSIAN_EPOCH - 1); } function jd_to_persian(jd) { var year, month, day, depoch, cycle, cyear, ycycle, aux1, aux2, yday; jd = Math.floor(jd) + 0.5; depoch = jd - persian_to_jd(475, 1, 1); cycle = Math.floor(depoch / 1029983); cyear = mod(depoch, 1029983); if (cyear == 1029982) { ycycle = 2820; } else { aux1 = Math.floor(cyear / 366); aux2 = mod(cyear, 366); ycycle = Math.floor(((2134 * aux1) + (2816 * aux2) + 2815) / 1028522) + aux1 + 1; } year = ycycle + (2820 * cycle) + 474; if (year <= 0) { year--; } yday = (jd - persian_to_jd(year, 1, 1)) + 1; month = (yday <= 186) ? Math.ceil(yday / 31) : Math.ceil((yday - 6) / 30); day = (jd - persian_to_jd(year, month, 1)) + 1; return new Array(year, month, day); }</script>
[/HTML]