jameshibbard/simple_calendar.html

## simple_calendar.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #calendar{ font-size:14px; }

      .day{
        display: inline-block;
        width:30px;
        text-align:center;
        margin-right:10px;
      }

      .row{
        display:block;
        border-top:solid 1px gray;
        height:3px;
        margin-top:3px;
        width: 190px;
      }
    </style>
  </head>

  <body>
    <div id="calendar"></div>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      (function ( $ ) {
        $.fn.calendarize = function( options ) {

          function daysInMonth(month,year) {
            return new Date(year, month, 0).getDate();
          }

          var settings = $.extend({
                styles: {'color': '#8DAE10', 'font-weight': 'bold', 'text-decoration': 'none'},
                link: "http://www.google.com",
                heading: "My Awesome Calendar",
                language: "EN"
              }, options ),

              i,
              heading,
              daySpan,
              curDayLink,
              today = new Date(),
              day = today.getDate(),
              month = today.getMonth() + 1,
              year = today.getFullYear(),
              noDays = daysInMonth(month, year),
              month = new Array();

              switch(settings.language){
                case "GER":
                  month[0]="Januar";
                  month[1]="Februar";
                  month[2]="März";
                  month[3]="April";
                  month[4]="Mai";
                  month[5]="Juni";
                  month[6]="Juli";
                  month[7]="August";
                  month[8]="September";
                  month[9]="Oktober";
                  month[10]="November";
                  month[11]="Dezember";
                  break;
                default:
                  month[0]="January";
                  month[1]="February";
                  month[2]="March";
                  month[3]="April";
                  month[4]="May";
                  month[5]="June";
                  month[6]="July";
                  month[7]="August";
                  month[8]="September";
                  month[9]="October";
                  month[10]="November";
                  month[11]="December";
              }

          $('<h3>', {
            html: settings.heading + '<br />' + month[today.getMonth()] + ', '  + year
          }).appendTo(this);

          for(i= 1; i < noDays +1; i++){
            daySpan = $('<span>', {
              class: 'day',
              text: i
            })

            if (i === day){
              daySpan.text('');

              curDayLink = $('<a>', {
                href: settings.link,
                text: i
              })

              $.each( settings.styles, function( property, value ) {
                curDayLink.css( property, value );
              });

              curDayLink.appendTo(daySpan);
            }

            daySpan.appendTo(this);

            if (i%5 === 0){
              $('<div>', {
                class: 'row'
              }).appendTo(this);
            }
          }

          return this;
        };
      }( jQuery ));

      $("#calendar").calendarize({language: "DE"});
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	#calendar{ font-size:14px; }

	.day{
	display: inline-block;
	width:30px;
	text-align:center;
	margin-right:10px;
	}

	.row{
	display:block;
	border-top:solid 1px gray;
	height:3px;
	margin-top:3px;
	width: 190px;
	}
	</style>
	</head>

	<body>
	<div id="calendar"></div>

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script>
	(function ( $ ) {
	$.fn.calendarize = function( options ) {

	function daysInMonth(month,year) {
	return new Date(year, month, 0).getDate();
	}

	var settings = $.extend({
	styles: {'color': '#8DAE10', 'font-weight': 'bold', 'text-decoration': 'none'},
	link: "http://www.google.com",
	heading: "My Awesome Calendar",
	language: "EN"
	}, options ),

	i,
	heading,
	daySpan,
	curDayLink,
	today = new Date(),
	day = today.getDate(),
	month = today.getMonth() + 1,
	year = today.getFullYear(),
	noDays = daysInMonth(month, year),
	month = new Array();

	switch(settings.language){
	case "GER":
	month[0]="Januar";
	month[1]="Februar";
	month[2]="März";
	month[3]="April";
	month[4]="Mai";
	month[5]="Juni";
	month[6]="Juli";
	month[7]="August";
	month[8]="September";
	month[9]="Oktober";
	month[10]="November";
	month[11]="Dezember";
	break;
	default:
	month[0]="January";
	month[1]="February";
	month[2]="March";
	month[3]="April";
	month[4]="May";
	month[5]="June";
	month[6]="July";
	month[7]="August";
	month[8]="September";
	month[9]="October";
	month[10]="November";
	month[11]="December";
	}

	$('<h3>', {
	html: settings.heading + '<br />' + month[today.getMonth()] + ', ' + year
	}).appendTo(this);

	for(i= 1; i < noDays +1; i++){
	daySpan = $('<span>', {
	class: 'day',
	text: i
	})

	if (i === day){
	daySpan.text('');

	curDayLink = $('<a>', {
	href: settings.link,
	text: i
	})

	$.each( settings.styles, function( property, value ) {
	curDayLink.css( property, value );
	});

	curDayLink.appendTo(daySpan);
	}

	daySpan.appendTo(this);

	if (i%5 === 0){
	$('<div>', {
	class: 'row'
	}).appendTo(this);
	}
	}

	return this;
	};
	}( jQuery ));

	$("#calendar").calendarize({language: "DE"});
	</script>
	</body>
	</html>