Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

calendar

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

A calendar that higlights the day and changes the month though out the year
you can customize the colors, it will re-size to the text size you use

HTML OBJECT
Below is the example placed in an HTML Object
When you preview your page the calendar will show where you place the HTML Object
This one is using 16px fonts so it's size is 220 wide by 195 high a different font size changes the calendar size

Place this code on your page where want the calender to generate

On the Html tab
in Add HTML
select
HTML Object

That puts the HTML
container on the page

DOUBLE CLICK
on the HTML Object
and paste the code below

Press "OK"
to save

Copy / Paste this in the HTML Object:

<script type="text/javascript">calendar();</script>

Add the code to the HEAD

In "Insert Page HTML" Copy/Paste this code in the HEAD

Click to select all then right click to copy

<style type="text/css">
.calendarTable {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
background-color:silver;
color:black;
border: 1px solid gray;
}
.calendarTable td {
text-align: center;
padding: 2px 4px 2px 4px;
}
.calendarTable td.monthHead {
font-weight: bold;
background-color:darkgray;
border: 1px solid gray;
}
.calendarTable td.weekDay {
font-weight: bold;
}
.calendarTable td.monthDay {
border: 1px solid white;
}
.calendarTable td.currentDay {
font-weight: bold;
color:maroon;
border: 1px solid dimgray;
}
</style>

<script type="text/javascript" language="javascript">
function calendar() {
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var weekDay = new Array('Su','Mo','Tu','We','Th','Fr','Sa');
var days_in_this_month = monthDays[month];

var calendar_html = '<table class="calendarTable">';
calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
calendar_html += '<tr>';
var first_week_day = new Date(year, month, 1).getDay();
for(week_day= 0; week_day < 7; week_day++) {
calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
}
calendar_html += '</tr><tr>';

for(week_day = 0; week_day < first_week_day; week_day++) {
calendar_html += '<td> </td>';
}
week_day = first_week_day;
for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
week_day %= 7;
if(week_day == 0)
calendar_html += '</tr><tr>';
// Do something different for the current day.
if(day == day_counter) {
calendar_html += '<td class="currentDay">' + day_counter + '</td>';
} else {
calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';
}
week_day++;
}
calendar_html += '</tr>';
calendar_html += '</table>';
document.write(calendar_html);
}
</script>

Customizing

In the css style in the HEAD

.calendarTable

16px is the size of the text, that controls the size of the calendar. 12px would make it smaller for example.
silver is the color for the whole calendar
black is the calendar text color
gray is the surrounding border color for the whole calendar

.calendarTable td.monthHead

darkgray is the color of the box behind the Month
gray is that boxes border color

.calendarTable td.monthDay

white is the color of the border on the days

.calendarTable td.currentDay

maroon is the color of the text for the current day of the month
dimgray is that boxes border color

Thank-you

Text effects in Web Studio 5 - Adding a calendar - by Web Studio Next

aaaaaaaaaaaaiii