Template:Team:Edinburgh/Code

From 2013.igem.org

(Difference between revisions)
Line 122: Line 122:
}
}
-
.calendarMontYear {
+
.calMonthYear {
color = #cc0033;
color = #cc0033;
 +
font-weight: bold;
}
}
Line 147: Line 148:
.calendar td {
.calendar td {
   width: 35px;
   width: 35px;
 +
text-align: center;
}
}
Line 270: Line 272:
var MonthName=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var MonthName=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var WeekDayName=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday", "Sunday"];
var WeekDayName=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday", "Sunday"];
 +
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-
//Configurable parameters
 
-
var WeekChar=3;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
 
-
var CellWidth=40;//Width of day cell.
 
-
 
-
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
 
-
var WeekHeadColor="#0099CC";//Background Color in Week header.
 
-
var SundayColor="#6699FF";//Background color of Sunday.
 
-
var SaturdayColor="#CCCCFF";//Background color of Saturday.
 
-
var WeekDayColor="white";//Background color of weekdays.
 
-
var FontColor="blue";//color of font in Calendar day cell.
 
-
var TodayColor="#FFFF33";//Background color of today.
 
-
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
 
-
var YrSelColor="#cc0033";//color of font of Year selector.
 
-
var ThemeBg="";//Background image of Calendar window.
 
//end Configurable parameters
//end Configurable parameters
//end Global variable
//end Global variable
Line 304: Line 293:
var vFirstDay;
var vFirstDay;
-
calhtml = "<form name='Calendar'>";
+
calhtml = "";
-
vCalHeader="<table border='1' cellpadding='1' cellspacing='1' align=\"center\" valign=\"top\">\n";
+
vCalHeader="<table class=\"calendar\" border='1' cellpadding='1' cellspacing='1' align=\"center\" valign=\"top\">\n";
//Month Selector
//Month Selector
-
vCalHeader+="<tr>\n<td colspan='7'><table border=0 cellpadding=0 cellspacing=0><tr><td align='left'>\n";
+
vCalHeader+="<tr>\n<td colspan='7'>\n";
vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:Cal.SwitchMth(this.selectedIndex+5);RenderCal();\">\n";
vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:Cal.SwitchMth(this.selectedIndex+5);RenderCal();\">\n";
for (i=5;i<10;i++)
for (i=5;i<10;i++)
Line 316: Line 305:
else
else
SelectStr="";
SelectStr="";
-
vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
+
vCalHeader+="<option "+SelectStr+" >"+MonthName[i]+"\n";
}
}
-
vCalHeader+="</select></td>";
+
vCalHeader+="</select></td></tr>";
//Calendar header shows Month and Year
//Calendar header shows Month and Year
-
vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName()+" "+Cal.Year+"</b></font></td></tr>\n";
+
vCalHeader+="<tr><td class=\"calMonthYear\" colspan='7'>"+Cal.GetMonthName()+" "+Cal.Year+"</td></tr>\n";
//Week day header
//Week day header
-
vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
+
vCalHeader+="<tr class=\"header\">";
for (i=0;i<7;i++)
for (i=0;i<7;i++)
{
{
-
vCalHeader+="<td width="+CellWidth+" align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
+
vCalHeader+="<td >" +WeekDayName[i].substr(0,3)+ "</td>";
}
}
vCalHeader+="</tr>";
vCalHeader+="</tr>";
Line 331: Line 320:
//Calendar detail
//Calendar detail
-
CalDate=new Date(Cal.Year,Cal.Month);
+
vFirstDay=new Date(Cal.Year,Cal.Month, 1);.getDay();
-
CalDate.setDate(1);
+
-
vFirstDay=CalDate.getDay();
+
vCalData="<tr>";
vCalData="<tr>";
if (vFirstDay==0) vFirstDay = 7;
if (vFirstDay==0) vFirstDay = 7;
-
var strCell;
 
for (i=0;i<vFirstDay-1;i++)
for (i=0;i<vFirstDay-1;i++)
{
{
if (vDayCount%7==6)
if (vDayCount%7==6)
-
strCell=GenCell(null,false,SaturdayColor);
+
vCalData += GenCell(null,"saturday");
else if (vDayCount%7==0)
else if (vDayCount%7==0)
-
strCell=GenCell(null,false,SundayColor);
+
vCalData += GenCell(null,"sunday");
else
else
-
strCell=GenCell(null,null,WeekDayColor);
+
vCalData += GenCell(null,"weekday");
-
vCalData=vCalData+GenCell();
+
vDayCount=vDayCount+1;
vDayCount=vDayCount+1;
}
}
Line 356: Line 341:
if (j==Cal.Date)
if (j==Cal.Date)
{
{
-
strCell=GenCell(j,true,SelDateColor);
+
vCalData += GenCell(j,"selected");
}
}
else
else
{  
{  
if (vDayCount%7==6)
if (vDayCount%7==6)
-
strCell=GenCell(j,false,SaturdayColor);
+
vCalData += GenCell(j,"saturday");
else if (vDayCount%7==0)
else if (vDayCount%7==0)
-
strCell=GenCell(j,false,SundayColor);
+
vCalData += GenCell(j,"sunday");
else
else
-
strCell=GenCell(j,null,WeekDayColor);
+
vCalData += GenCell(j,"weekday");
}
}
-
vCalData=vCalData+strCell;
 
if((vDayCount%7==0)*(j<Cal.GetMonDays()))
if((vDayCount%7==0)*(j<Cal.GetMonDays()))
Line 377: Line 361:
//end time picker
//end time picker
calhtml += "\n</table>";
calhtml += "\n</table>";
-
calhtml += "</form>";
 
document.getElementById("calendarPicker").innerHTML = calhtml;
document.getElementById("calendarPicker").innerHTML = calhtml;
}
}
-
function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
+
function GenCell(pValue, css_class)//Generate table cell with value
{
{
-
var PValue;
+
return "<td class='" + css_class + "'><a href=\"javascript:if(" + PValue + ")Cal.Date="+PValue+"; RenderCal();\">"+PValue+"</a></td>";
-
var vColor;
+
-
var vHLstr1;//HighLight string
+
-
var vHlstr2;
+
-
var vTimeStr;
+
-
+
-
if (pValue==null)
+
-
PValue="";
+
-
else
+
-
PValue=pValue;
+
-
+
-
if (pColor!=null)
+
-
vColor="bgcolor=\""+pColor+"\"";
+
-
else
+
-
vColor="";
+
-
if ((pHighLight!=null)*(pHighLight))
+
-
{vHLstr1="color='red'><b>";vHLstr2="</b>";}
+
-
else
+
-
{vHLstr1=">";vHLstr2="";}
+
-
+
-
+
-
var PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:if(" + PValue + ")Cal.Date="+PValue+"; RenderCal();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
+
-
return PCellStr;
+
}
}
Line 414: Line 375:
this.Month=pDate.getMonth();//selected month number
this.Month=pDate.getMonth();//selected month number
this.Year=pDate.getFullYear();//selected year in 4 digits
this.Year=pDate.getFullYear();//selected year in 4 digits
-
 
-
this.Format="ddMMyyyy";
 
-
this.Separator="/";
 
-
}
 
-
 
-
function GetMonthIndex(shortMonthName)
 
-
{
 
-
for (i=0;i<12;i++)
 
-
{
 
-
if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
 
-
{ return i;}
 
-
}
 
}
}
-
Calendar.prototype.GetMonthIndex=GetMonthIndex;
 
function SwitchMth(intMth)
function SwitchMth(intMth)
Line 441: Line 389:
function GetMonDays()//Get number of days in a month
function GetMonDays()//Get number of days in a month
{
{
-
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
return DaysInMonth[this.Month];
return DaysInMonth[this.Month];
}
}
Calendar.prototype.GetMonDays=GetMonDays;
Calendar.prototype.GetMonDays=GetMonDays;
-
 
+
-
function FormatDate(pDate)
+
-
{
+
-
if (this.Format.toUpperCase()=="DDMMYYYY")
+
-
return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
+
-
else if (this.Format.toUpperCase()=="DDMMMYYYY")
+
-
return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
+
-
else if (this.Format.toUpperCase()=="MMDDYYYY")
+
-
return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
+
-
else if (this.Format.toUpperCase()=="MMMDDYYYY")
+
-
return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);
+
-
}
+
-
Calendar.prototype.FormatDate=FormatDate;
+
$(function() {
$(function() {

Revision as of 10:30, 29 September 2013