Calendar

When you want to publish a one-month calendar, the Basic Calendar software can do it for you.

The calendar opens with the current month. The current day is emphasized. It has month and year navigation links easily clicked or tapped to view other months, past or future. (And an easter egg, which I'll talk about in a few moments.)

Basic Calendar was made for my personal portal page. But you can publish the calendar on any web page.

With the computer I used immediately before my current one, a separate desktop had been established for (among other things) a quick-to-reference calendar widget. I decided to omit that entire separate desktop and instead create software for the functions I really wanted and put them on my personal portal page.

The Geographical Area Time article contains software for one of the functions.

This article contains another — an easy to use and quick to access calendar. For reference, not for scheduling.

This article's Basic Calendar software is the answer.

Live Example

Basic Calendar has many style options.

This live example is the style I currently have for my personal portal page:

As you navigate, you'll notice the calendar depth varies. It's something to consider when you place a calendar on your website.

Most calendar months populate 5 weeks. However, if you'll navigate to July 2017, you'll see 6 weeks populated. And at February 2015, only 4 weeks.

The above example does have an easter egg. One that's easily removed from your own installation. (Technically, an easter egg is something you don't know about until it's discovered. But I have to let you know about it in order to describe your options.)

The easter egg is a linked date, the same month and day every year. (The link color in the example calendar is red.)

The Basic Calendar Software

The source code for Basic Calendar has two places to customize, a place to disable the easter egg and a place to specify the style for the calendar. Instructions follow the source code:

<?php
/*
   Basic Calendar
   Version 1.1
   June 1, 2017

   Version 1.1, June 1, 2017, Bug fix; current day number no longer enhanced in previous/next month numbers of current month calendar.
   Version 1.0, May 19, 2017

   Copyright 2017 Will Bontrager Software LLC

   Will Bontrager Software LLC
   https://www.willmaster.com/
   (219) 690-3237
*/

/* Two places to customization */

// Place 1:
// There can be an easter egg in the calendar on 
//    Will Bontrager's birthday (the day is linked).
//    Specify true or false, or delete the line.

$AllowEasterEgg = true;

//Place 2:
// Between the lines containing the word "CSS", 
//   specify CSS style as you would in a CSS file.
$CSS = <<<CSS

#monthly-calendar-table {
   font-size:16px;
   font-family:sans-serif;
   border:4px solid green;
   border-collapse:collapse;
   background-color:white;
   }

#monthly-calendar-table td { 
   vertical-align:middle;
   text-align:center;
   height:1.5em;
   width:2.25em;
   }

#monthly-calendar-table .header-style { 
   border-bottom:3px solid green;
   padding:.25em 1px .25em 1px;
   color:green;
   }

#monthly-calendar-table a {
   text-decoration:none;
   color:red;
   }

#monthly-calendar-table .weekdays {
   color:green;
   }

#monthly-calendar-table .current-day {
   border:1px solid green;
   border-radius:50% 50%;
   padding:0 3px 0 3px;
   background-color:#ffefef;
   }

#monthly-calendar-table .other-month-day {
   background-color:#efffef;
   font-style:italic;
   }

CSS;
/* No customization required after this point. */

date_default_timezone_set('UTC');
list($nowYear,$nowMonth,$nowDay) = explode('-',date('Y-n-j'));
if( empty($_GET['year']) ) { $_GET['year'] = $nowYear; }
if( $_GET['year'] < 100 ) { $_GET['year'] += 2000; }
$Year = intval($_GET['year']);
if( empty($_GET['month']) ) { $_GET['month'] = $nowMonth; }
if( $_GET['month'] < 1 or $_GET['month'] > 12 ) { $_GET['month'] = 1; }
$MonthNumber = intval($_GET['month']);
if( $MonthNumber < 1 or $MonthNumber > 12 ) { $MonthNumber = 1; }
switch( $MonthNumber )
{
   case  1 : $Month = 'January'; break;
   case  2 : $Month = 'February'; break;
   case  3 : $Month = 'March'; break;
   case  4 : $Month = 'April'; break;
   case  5 : $Month = 'May'; break;
   case  6 : $Month = 'June'; break;
   case  7 : $Month = 'July'; break;
   case  8 : $Month = 'August'; break;
   case  9 : $Month = 'September'; break;
   case 10 : $Month = 'October'; break;
   case 11 : $Month = 'November'; break;
   case 12 : $Month = 'December'; break;
}

$dayIncrement = 24 * 60 * 60;
$timestamp = mktime(12,12,30,$MonthNumber,1,$Year);
$firstWeekday = date('w',$timestamp);
$beginStamp = $timestamp - ($dayIncrement*$firstWeekday);

$timestamp = mktime(12,12,30,$MonthNumber,intval(date('t',$timestamp)),$Year);
$lastWeekday = date('w',$timestamp);
$endStamp = $timestamp + ($dayIncrement*(6-$lastWeekday));
$endStamp = mktime(12,12,30,intval(date('n',$endStamp)),intval(date('j',$endStamp)),intval(date('Y',$endStamp)));

$beginat = date('r',$beginStamp);
$endat = date('r',$endStamp);

$prevyear = $Year;
$prevmonth = $MonthNumber - 1;
if( $prevmonth < 1 ) { $prevyear--; $prevmonth=12; }
$prevlink = "{$_SERVER['PHP_SELF']}?year=$prevyear&month=$prevmonth";
$nextmonth = $MonthNumber + 1;
$nextyear = $Year;
if( $nextmonth > 12 ) { $nextyear++; $nextmonth=1; }
$nextlink = "{$_SERVER['PHP_SELF']}?year=$nextyear&month=$nextmonth";
$prevLine = <<<LINE
<div style="float:left;"><a href="$prevlink">&laquo;&thinsp;prev</a></div>
LINE;
$nextLine = <<<LINE
<div style="float:right;"><a href="$nextlink">next&thinsp;&raquo;</a></div>
LINE;
$prevYear = $Year-1;
$nextYear = $Year+1;
$monthyearLine = <<<LINE
<div style="text-align:center; white-space:nowrap;" class="calendar-header">
<a href="{$_SERVER['PHP_SELF']}?year=$prevYear&month=$MonthNumber">&uarr;</a>&thinsp;$Month $Year&thinsp;<a href="{$_SERVER['PHP_SELF']}?year=$nextYear&month=$MonthNumber">&darr;</a>
</div>
LINE;

echo <<<CALENDAR
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<style type="text/css">
body { font-size:100%; margin:0; }
$CSS
</style>
</head>
<body>
<table id="monthly-calendar-table" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7" style="padding:0;">
<div class="header-style">
$prevLine$nextLine
$monthyearLine
<div style="clear:both;"></div>
</div><!-- id="calculator-header-area" -->
</td>
</tr><tr>
<td class="weekdays">Sun</td><td class="weekdays">Mon</td><td class="weekdays">Tue</td><td class="weekdays">Wed</td><td class="weekdays">Thu</td><td class="weekdays">Fri</td><td class="weekdays">Sat</td>
</tr><tr>
CALENDAR;
$weekcolumn = 0;
$flag = $endStamp;
$timestamp = $beginStamp;
$hasLink = false;
while( $timestamp <= $flag )
{
   if( $weekcolumn > 6 )
   {
      $weekcolumn = 0;
      echo '</tr><tr>';
   }
   list($y,$m,$d) = explode(' ',date('Y n j',$timestamp));
   $style = $m == $MonthNumber ? '' : ' class="other-month-day"';
   $thisday = ((!empty($AllowEasterEgg)) and $MonthNumber==6 and $d==8) ? "<a href=\"javascript:alert('Will Bontrager\'s Birthday!')\">$d</a>" : $d;
   $daystring = ($m==$MonthNumber and $nowDay==$d and $nowMonth==$MonthNumber and $nowYear==$Year) ? "<span class='current-day'>$thisday</span>" : $thisday;
   echo "<td$style>$daystring</td>";
   $timestamp += $dayIncrement;
   $weekcolumn++;
}
echo <<<CALENDAR
</tr>
</table>
</body>
</html>
CALENDAR;
?>

Save the above source code as calendar.php or other PHP file name that you prefer. Upload it to your server and types its URL into your address bar.

What you'll see in your browser will be virtually the same as what you see in the above live example.

Further below, I'll have instructions for putting the calendar on your web page. But first, here is how to customize Basic Calendar.

Customizing for easter egg permission and for calendar style —

Easter egg permission:

In the customization area of the source code, you'll see this line where the easter egg permission is adjusted.

$AllowEasterEgg = true;

To refuse permission to the easter egg, change true to false or, if you want to get rid of it permanently so you can't change your mind about it, the line can be deleted from the source code.

Custom calendar style:

In the customization area of the source code, you'll see CSS styles specified. They're colored blue. And they can be changed.

CSS styles are specified between the two lines that contain the word "CSS". The format is the same as you would use for your own external CSS files.

CSS declarations can be changed, added, and deleted.

#monthly-calendar-table
This is the style for the table containing the calendar.

#monthly-calendar-table td
The table td tags are styled here.

#monthly-calendar-table .header-style
The calendar header is the area within the table where the month and year, and navigation links, are published. The header-style class is used to style that area — except the link style, which is addressed next.

#monthly-calendar-table a
The links in the calendar are styled here. Links are within the navigation area of the calendar header and for the calendar day of the easter egg (if you keep the easter egg).

#monthly-calendar-table .weekdays
The weekdays class is for styling the weekday names between the calendar header and the calendar days.

#monthly-calendar-table .current-day
The current-day is a special class for styling the number representing the current day.

#monthly-calendar-table .other-month-day
Most calendar months don't entirely fill up the first and/or last of the weeks they populate. Day numbers from previous and following months are used to fill up the weeks. The other-month-day class is used to style those days.

When changes are complete, re-upload the software to your server. Make a note of its URL as you'll use it when publishing the calendar within a web page.

Implementing Basic Calendar

Publish the calendar on your web page in an iframe.

If the web page is on your hard drive, it will still work, so long as you are connected to the internet. That means, if your personal portal page lives on your hard drive, you can still have the calendar on the page.

Here's the iframe tag to use (customization notes follow):

<iframe 
   src="http://example.com/calendar.php" 
   style="
      height:215px; 
      width:270px; 
      padding:0; 
      background-color:transparent; 
      border:none;">
</iframe>

Customization —

Change the src value http://example.com/calendar.php to the URL of your Basic Calendar installation.

If you changed the calendar style and the calendar size changes, the CSS declarations height:215px; and width:270px; are likely to require changing.

Other CSS declarations may be changed, added, or deleted.

You're done :)

Changing the Easter Egg

To change the easter egg, look for this line in the source code. It's about a dozen lines up from the bottom of the file.

$thisday = ((!empty($AllowEasterEgg)) and $MonthNumber==6 and $d==8) ? "<a href=\"javascript:alert('Will Bontrager\'s Birthday!')\">$d</a>" : $d;

There are 3 changes to make in that line.

1. At $MonthNumber==6, replace 6 with the month number for the location of the easter egg.

2. At $d==8, replace 8 with the day number for the location of the easter egg.

3. Replace Will Bontrager\'s Birthday! with your alert box message.

   Any apostrophe/single-quote characters (') within the alert box message need to be escaped with a preceding \ character — as in Will Bontrager\'s Birthday!

   Any double-quote characters (") within the alert box message need to be replaced with the " HTML entity.

When those changes are complete, you have your own easter egg.

Basic Calendar is a nice calendar, handy to have available. And it can even have an easter egg — just for the fun of it.

(This article first appeared in Possibilities newsletter.)

Will Bontrager