---
title: "Kalender till hemsidan"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/94498-kalender-till-hemsidan"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "mr.mainline"
published: "2004-01-10T21:58:45.000Z"
updated: "2004-01-11T11:31:00.000Z"
replies: 9
views: 816
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/94498-kalender-till-hemsidan"
---

# Kalender till hemsidan

## #1 — mr.mainline, 2004-01-10T21:58Z

Finns det en kalender som denna gjord i javascript <http://www.srrs.org/>  (den till höger på sidan) och isåfall var kan jag hitta en sådan.

Tack i förhand.

Permalänk: https://www.webforum.nu/p/94498

## #2 — Cheguelin, 2004-01-10T22:04Z

En i javascript hittar du här: <http://webfx.eae.net/dhtml/datepicker/datepicker.html>

Permalänk: https://www.webforum.nu/p/1247050

## #3 — mr.mainline, 2004-01-10T22:08Z

tack men gärna fler förslag.

Permalänk: https://www.webforum.nu/p/1247051

## #4 — mr.mainline, 2004-01-11T09:57Z

Kan någon hjälpa mig att få igång detta javascript

Förklara på ett enkelt sätt :-))

\<!-- TWO STEPS TO INSTALL THIS SCRIPT --\>

\<!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js	 --\>

\<!-- This script and many more are available free online at --\>
\<!-- The JavaScript Source!! <http://javascript.internet.com> \--\>

\<!-- Begin
//  SET ARRAYS
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.getYear();	    // 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 --\>

\<!--  STEP TWO: Place this into the BODY of the HTML document where you want the calendar  --\>
\<!--  Make sure the '.js' and '.html' files are in the same directory.  --\>

\<BODY\>

\<SCRIPT SRC="calendar.js"\>\</SCRIPT\>

\<p\>\<center\>
\<font face="arial, helvetica" size"-2"\>Free JavaScripts provided\<br\>
by \<a href="http://javascriptsource.com"\>The JavaScript Source\</a\>\</font\>
\</center\>\<p\>

\<!-- Script Size:  4.15 KB --\>

Permalänk: https://www.webforum.nu/p/1247233

## #5 — @nders, 2004-01-11T09:59Z

Till att börja med får du gärna kasta in lite \[kod\]-taggar, så man kan läsa koden utan att bli självmordsbenägen.

mvh

Permalänk: https://www.webforum.nu/p/1247234

## #6 — Jojoxx, 2004-01-11T10:10Z

(Försök att hålla ihop trådar med samma fråga. Det blir enklare att följa diskussionen då. Trådarna ihopslagna)

```
<script type="text/javascript">
// This script and many more are available free online at
// The JavaScript Source!! [url]http://javascript.internet.com[/url]

// SET ARRAYS
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.getYear(); // 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);
</script>
```

... bara att klistra in det som ligger i kod-blockat på din sida där du vill ha kalendern.

Permalänk: https://www.webforum.nu/p/1247238

## #7 — mr.mainline, 2004-01-11T11:12Z

jag är nybörjare,vilket är kod-blockat??

Permalänk: https://www.webforum.nu/p/1247262

## #8 — solbulle, 2004-01-11T11:15Z

All den kod som Jojoxx skrivit mellan:

```
 och
```

Permalänk: https://www.webforum.nu/p/1247265

## #9 — mr.mainline, 2004-01-11T11:26Z

ok,nu är det fixat,kan jag ändra storleken på kalendern ?

Permalänk: https://www.webforum.nu/p/1247271

## #10 — Jojoxx, 2004-01-11T11:31Z

Scriptet är inte skrivet för att du enkelt skall kunna göra det med en variabel, men du hittar **width=...** på 3 ställen i scriptet. Öka dessa värden med X.

Permalänk: https://www.webforum.nu/p/1247276

---

Tråden på webben: https://www.webforum.nu/amne/javascript/94498-kalender-till-hemsidan