How To Add Calender To Wapka Site

Today, I'm Sharing A Wapka Calender code, which display calender in your wapka site.
It is a simple and stylish calender which allow users to check dates.

you can add this Calender to your site for your users benefit and to keep them engage. which means they don't have to leave your website to have access to calender, right from your site can view a calender.

</>

How To Add Calender To Your Wapka Site.
To Add the calender widget to your wapka site.
&gt login your wapka site.
==> you can create a new page for the calender or you can use any other page.
Go To edit site and select xml/html.
copy and paste the below code via the xml/html box and save.

wapka Calender Code

<p align="center">
<b>CALENDER BY ABU4RISAY</b><br />
</p>
<html><br />
<head><br />
</head><br />
<body><br />
<center>
<script language="javascript" type="text/javascript">
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

//  DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();

var year = Calendar.getFullYear();     // Returns year
var month = Calendar.getMonth();    // Returns month (0-11)
var today = Calendar.getDate();    // Returns day (1-31)
var weekday = Calendar.getDay();    // Returns day (1-31)

var DAYS_OF_WEEK = 7;    // "constant" for number of days in a week
var DAYS_OF_MONTH = 31;    // "constant" for number of days in a month
var cal;    // Used for printing

Calendar.setDate(1);    // Start the calendar day at '1'
Calendar.setMonth(month);    // Start the calendar month at now

/* VARIABLES FOR FORMATTING
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
      tags to customize your caledanr's look. */

var TR_start = '
<tr>';
var TR_end = '</TR>
';
var highlight_start = '<td WIDTH="30"><table CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC>
<tr><td WIDTH=20><b><center>
';
var highlight_end   = '</CENTER></TD></TR>
</TABLE></B>';
var TD_start = '<td WIDTH="30"><center>
';
var TD_end = '</CENTER></TD>';

/* BEGIN CODE FOR CALENDAR
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
tags to customize your calendar's look.*/

cal =  '<table BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB>
<tr><td>';
cal += '<table BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
cal += '<td COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><center>
<b>';
cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;

//   DO NOT EDIT BELOW THIS POINT  //

// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++)
{

// BOLD TODAY'S DAY OF WEEK
if(weekday == index)
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;

// PRINTS DAY
else
cal += TD_start + day_of_week[index] + TD_end;
}

cal += TD_end + TR_end;
cal += TR_start;

// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + '  ' + TD_end;

// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
  // RETURNS THE NEXT DAY TO PRINT
  week_day =Calendar.getDay();

// START NEW ROW FOR FIRST DAY OF WEEK
  if(week_day == 0)
  cal += TR_start;

if(week_day != DAYS_OF_WEEK)
  {

// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
  var day  = Calendar.getDate();

// HIGHLIGHT TODAY'S DATE
  if( today==Calendar.getDate() )
  cal += highlight_start + day + highlight_end + TD_end;

// PRINTS DAY
  else
  cal += TD_start + day + TD_end;
  }

// END ROW FOR LAST DAY OF WEEK
  if(week_day == DAYS_OF_WEEK)
  cal += TR_end;
  }

// INCREMENTS UNTIL END OF THE MONTH
  Calendar.setDate(Calendar.getDate()+1);

}// end for loop

cal += '</TD></TR>
</TABLE></TABLE>';

//  PRINT CALENDAR
document.write(cal);

//  End -->
</script><br />
</center>
<br/><div style="clear:both">
</div>
<div>
<a target="_blank" href="https://abu4risay.blogspot.com/"><span style="font-size: 8pt; text-decoration: none">Brought to you by Abu4risay</span></a></div>
</body><br />
</html>

Now you have added the stylish calender to your wapka site.

Author ==> Abu4risay

Read Also: wapka online Currency Converter Tool
==> how to add online calculator to wapka

Friday 9 March 2018

Share this

About Abu4risay

No comments:

Send Us Message

Popular Posts

ADVERTISEMENTS

Facebook

Search This Blog

Contact Form

SUBSCRIBE TO OUR POST