Главная » 2009 » Сентябрь » 7 » Календарь с возможностью выбора форматов (Javascript)
07.09.2009, 11:29

Календарь с возможностью выбора форматов



Это календарь с возможность выбора форматов недель между европейским и американским. Т.е. в европейском формате неделя начинается в понедельника, а в американском - с воскресенья.

Бросаем это в head:

Code
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Doug Lawson (dlawson@clark.net) -->

<!-- Begin
var calStartDOW = 0;
var holidays = new Array();
holidays["1 Jan 2000"] = true;
holidays["17Jan 2000"] = true;
holidays["21 Feb 2000"] = true;
holidays["21 Apr 2000"] = true;
holidays["29 May 2000"] = true;
holidays["3 Jul 2000"] = true;
holidays["4 Jul 2000"] = true;
holidays["4 Sep 2000"] = true;
holidays["10 Nov 2000"] = true;
holidays["23 Nov 2000"] = true;
holidays["24 Nov 2000"] = true;
holidays["25 Dec 2000"] = true;
holidays["31 Dec 2000"] = true;
   
var months = new Array( "Jan","Feb","Mar", "Apr","May","Jun", "Jul","Aug","Sep","Oct", "Nov", "Dec");

var longmonths = new Array( "Январь", "Февраль", "Март",
  "Апрель", "Май", "Июнь",
  "Июль", "Август", "Сентябрь",
  "Октябрь", "Ноябрь", "Декабрь" );  

var leapdays = new Array(31,29,31, 30,31,30, 31,31,30, 31,30,31);  
var yeardays = new Array(31,28,31, 30,31,30, 31,31,30, 31,30,31);  

var dow = new Array("ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ");  

var globalCalWidth = "95%";  

var colorWhite = "#FFFFFF";  
var colorDarkRed = "#800000";
var colorMedRed = "#B00000";  
var colorLightGrey = "#E0E0E0";  
var colorMedGray = "#808080";  
var colorOffWhite = "#F8F8F8";  
var colorDkBlue = "#0000E0";  

var holidayColor = colorMedRed;  
var dowBGColor = colorLightGrey;  
var dowFGColor = colorDkBlue;  
var calHdrBGColor = colorMedGray;  
var calHdrFGColor = colorOffWhite;  

var myDate = new Date();  

var thisMonth = myDate.getMonth();  
var thisYear = myDate.getFullYear();  

var URLargs = getURLArgs(true);  
if (URLargs.year) { thisYear = parseInt(URLargs.year); }  
if (URLargs.month) { thisMonth = (parseInt(URLargs.month)%12); }  
if (URLargs.starton) { calStartDOW = (parseInt(URLargs.starton)%7); }
function isLeapYear( year ){

  return ( (0 == (year%4)) && ( (0 != (year%100)) || (0 == (year%400))));  
   
}  
function isValidDayOfMonth( day, month, year)  
{  

  if (day <= 0) { return false; }
  if (isLeapYear(year)) { return (day <= leapdays[month])}
  return ( day <= yeardays[month]);  
}  
function canonicalDate(day, month, year)  
{  
   
  var canonDate = 0;
   
  var mday = myDate.getDate();  
  var mmon = myDate.getMonth();  
  var myr = myDate.getFullYear();  
  if( arguments.length > 0 ) { mday = arguments[0]; }  
  if( arguments.length > 1 ) { mmon = arguments[1]; }  
  if( arguments.length > 2 ) { myr = arguments[2]; }  
  if(myr >= 2000)  
  { canonDate += mday;  
  while(mmon > 0) { canonDate += isLeapYear(myr) ? leapdays[mmon]: yeardays[mmon]; mmon--;}  
  while(myr > 2000){ canonDate += isLeapYear(myr) ? 366: 365; myr--; }  
  }  
  else
  { canonDate -= isLeapYear(myr) ? leapdays[mmon] - mday: yeardays[mmon] - mday;  
  while(mmon < 11) { mmon++; canonDate -= isLeapYear(myr) ? leapdays[mmon]: yeardays[mmon];}  
  while(myr < 1999){ myr++; canonDate -= isLeapYear(myr) ? 366: 365;}  
  }  
  return canonDate;  
}  
function dateDiff(firstDate, secondDate)  
{  

  var days= ( canonicalDate(secondDate.getDate(), secondDate.getMonth(), secondDate.getFullYear()) -  
  canonicalDate(firstDate.getDate(), firstDate.getMonth(), firstDate.getFullYear()));  
  return days;  
}  
function shiftArray(myArray)  
{  
   
  if(-1 != navigator.appVersion.indexOf("MSIE")) {  
  var myVal = myArray[0];
  for(i=0; i<(myArray.length -1); i++)
  { myArray[i] = myArray[i+1];}
  myArray.length = myArray.length -1;  
  return myVal; }  
  else return myArray.shift();  
}  
function isHoliday(year,mon,mday)
{  

  var dStr = mday + " " + mon + " " + year;  
  if(holidays[dStr]) { return true; }  
  return false;  
}  
function isWeekend( year, mon, mday)  
{  
  var mDate = new Date(mday + " " + mon + " " + year);  
  return ( ( 0 == mDate.getDay()) || ( 6 == mDate.getDay() ));  
}  
function calculateWorkDays( startDate, endDate)  
{  

  var myEndDate = canonicalDate(endDate.getDate(), endDate.getMonth(), endDate.getFullYear());  
  var counter = 0;  
  var mDay = startDate.getDate();  
  var mMonth = startDate.getMonth();  
  var mYear = startDate.getFullYear();  
  while (canonicalDate(mDay, mMonth, mYear) <= myEndDate)
  {  
  if(! ( isHoliday(mYear,months[mMonth],mDay) || isWeekend(mYear,months[mMonth],mDay)) )  
  { counter++; }  

   
  var omDay = mDay;
  var omMonth = mMonth;  
  var omYear = mYear;  
  mDay = isLeapYear(mYear) ?  
  ((mDay >= leapdays[mMonth]) ? 1 : mDay+1):
  ((mDay >= yeardays[mMonth]) ? 1 : mDay+1);
   
  mMonth = (mDay == 1) ? (mMonth +1) % 12: mMonth;  
   
  mYear = ( (mDay == 1) && (mMonth == 0)) ? mYear + 1: mYear;
   
  }
  return counter;  
}  
function writeCalendar(target, myYear, myMonth, sday, eday)
{  
   
  var calDate = new Date( myYear, myMonth, 1, 0,0,0,0 );  
   
  var mDays = isLeapYear(myYear) ? leapdays[myMonth]: yeardays[myMonth];  
  var i = 0;  
   
  var wkDay = calDate.getDay();  
  var dateBgAtt = "";  
  var dateFontTag = "";
  var fontCloseTag = "";  
  var boldTag = "";
  var unBoldTag = "";  
   
  var useBold = arguments.length >= 5 ? true: false;  
   
  target.write("<CENTER>\n<TABLE BORDER='0' CELLPADDING='6' CELLSPACING='0' WIDTH=\"80%\">\n");
   
  target.write("<TR BGCOLOR=\"", calHdrBGColor, "\">");

  target.write(
  "<TD COLSPAN='5'><FONT COLOR=\"", calHdrFGColor, "\"><STRONG>",
  longmonths[myMonth],
  "</STRONG></FONT></TD>","<TD COLSPAN='2'><FONT COLOR=\"", calHdrFGColor, "\"><STRONG>",  
  myYear,  
  "</STRONG></FONT></TD></TR>\n"
  );  
   
  target.write("<TR BGCOLOR=\"", dowBGColor, "\">");  
  for(i=0; i< 7; i++)  
  { target.write("<TD><FONT COLOR=\"", dowFGColor,  
  "\">", dow[((i+calStartDOW)%7)],  
  "</FONT></TD>");}
  target.write("</TR>\n");
   
  target.write("<TR ALIGN='RIGHT'>");  
  for(i=0 ; i < ((7 - calStartDOW + wkDay)%7); i++)  
  { target.write("<TD> \; \; \;</TD>"); }

  var cmdate = i - ((7 - calStartDOW + wkDay)%7);  

  for( i=i; cmdate < mDays ; i++)  
  {  
   
  cmdate++;  
   
  if(0 == (i%7)){ target.write("</TR>\n<TR ALIGN='RIGHT'>"); }  
   
  if( (isHoliday(calDate.getFullYear(),months[calDate.getMonth()],cmdate))
  || (isWeekend(calDate.getFullYear(),months[calDate.getMonth()],cmdate)) )
  {  
  dateBgAtt = "";  
  dateFontTag = "<FONT COLOR=\"" + holidayColor + "\">";
  fontCloseTag = "</FONT>"; }
  else  
  { dateBgAtt = "";  
  dateFontTag = "";
  fontCloseTag = ""; }  

   
  if( ( useBold ) && (cmdate >= sday) && (cmdate <= eday))
  { boldTag = "<STRONG><EM>";  
  unBoldTag = "</EM></STRONG>"; }  
  else {  
  boldTag = "";  
  unBoldTag = ""; }  
  target.write("<TD ", dateBgAtt, " >", dateFontTag, boldTag, cmdate, unBoldTag, fontCloseTag, "</TD>");
  }
  while(0 != (i%7)) { target.write("<TD> </TD>"); i++; }
  target.write("</TR>");  
  target.write("</TABLE></CENTER>\n");  
}  
function drawCalendar( ourTarget, ourYear, ourMonth, startDay, endDay)
{
   
  var myMonth = myDate.getMonth();  
  var myYear = myDate.getFullYear();  
  var target = document;  

  if(arguments.length >= 1) { target = ourTarget; }
  if(arguments.length >= 2) { myYear = ourYear; }  
  if(arguments.length >= 3) { myMonth = ourMonth; }  
  { writeCalendar(target, myYear, myMonth, startDay, endDay); }
}  
function getURLArgs(caseBool)  
{  

  var casefree = ( (true == caseBool) || (caseBool >= 1)) ? true: false;  
  var args = new Object();  
  var query = location.search.substring(1);  

  var pairs = query.split("&");  
  for(var i = 0; i< pairs.length; i++)  
  {  
  pairs[i]= unescape(pairs[i]);  
  var pos=pairs[i].indexOf('=');  
  if(-1 == pos) continue;  
  var argname;  
  if(true != casefree) { argname = pairs[i].substring(0,pos); }  
  else { argname = pairs[i].substring(0,pos).toLowerCase(); }  
  var value = pairs[i].substring(pos+1);  
  args[argname] = value;  
  }  
  return args;  
}  
function newCalendars(myear, mmonth)
{  

  var myMonth = thisMonth;  
  var myYear = thisYear;  
  if(arguments.length == 2) { myMonth = mmonth; myYear == myear; }  
   
  var lastMonth = (myMonth + 11) % 12;  
  var lmYear = (myMonth == 0)? myYear -1: myYear;  
  var nextMonth = (myMonth +1)%12;  
  var nmYear = (myMonth == 11)? myYear + 1: myYear;

  document.write("<TABLE ALIGN=\"TOP\" WIDTH=\"90\%\"><TR VALIGN=\"TOP\"><TD>");
  var isThisMonth = ((lastMonth == myDate.getMonth())&& (lmYear==myDate.getFullYear()));  
  drawCalendar(document, lmYear, lastMonth,
  (isThisMonth ? myDate.getDate():0),  
  (isThisMonth ? myDate.getDate():0)
  );  
  isThisMonth = ((myMonth == myDate.getMonth())&& (myYear==myDate.getFullYear()));  
  document.write("</TD>\n<TD>");

  drawCalendar(document, myYear, myMonth,  
  (isThisMonth? myDate.getDate():0),  
  (isThisMonth? myDate.getDate():0));  
  document.write("</TD>\n<TD>");

  isThisMonth = ((nextMonth == myDate.getMonth())&& (nmYear==myDate.getFullYear()));  
  drawCalendar(document, nmYear, nextMonth,
  (isThisMonth ? myDate.getDate():0),  
  (isThisMonth ? myDate.getDate():0));  
  document.write("</TD></TR></TABLE>\n");

  var docName = location.pathname;  
  var buttonString = "<INPUT TYPE=\"BUTTON\" VALUE=\"Назад\"" +
  " onClick='document.newCal.month.value=\"" + lastMonth+ "\"; " +  
  "document.newCal.year.value=" + lmYear + "; " +  
  "submit();' > ";  
  document.write("<FORM NAME=\"newCal\" METHOD=\"GET\" ACTION=\"" + docName + "\">");  
  document.write("<INPUT TYPE=\"hidden\" NAME=\"month\" VALUE=\"" + myMonth +"\">");  
  document.write("<INPUT TYPE=\"hidden\" NAME=\"year\" VALUE=\"" + myYear +"\">");  
  document.write("<INPUT TYPE=\"hidden\" NAME=\"startOn\" VALUE=\"" + calStartDOW +"\">");  
  document.write("<CENTER>");  
  document.write( buttonString);  
  buttonString = "<INPUT TYPE=\"BUTTON\" VALUE=\" Вперед \"" +
  " onClick='document.newCal.month.value=" + nextMonth+ "; " +  
  "document.newCal.year.value=" + nmYear + "; " +  
  "submit();' > ";  
  document.write(" ");  
  document.write( buttonString);  
  document.write("</CENTER><P>\n");  
  var calStyleString = "" +  
  "<SMALL>Формат календаря: US" +  
  "<INPUT TYPE='radio' NAME='calStyle' VALUE='us'" +
  ((calStartDOW == 0)? " CHECKED " : " ") +  
  " onClick='document.newCal.startOn.value=\"0\"; " +  
  "document.newCal.submit();'> " +
  "" +  
  "Euro <INPUT TYPE='radio' NAME='calStyle' VALUE='euro'" +
  ((calStartDOW == 1)? " CHECKED " : " ") +  
  " onClick='document.newCal.startOn.value=\"1\"; " +  
  "submit();'></SMALL>";  
  document.write(calStyleString);  
  document.write("</FORM>");  
}  
// End -->
</script>

Это кидаем в body:

Code
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
newCalendars();
// End -->
</script>

Адаптация и перевод: http://webscripts.ucoz.ru

Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Doug Lawson
Категория: JavaScript's | Просмотров: 1900 | Добавил: antisept | Рейтинг: 4.0/1 |
Теги: Календарь с возможностью выбора фор
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]