Dynamic Calendar

Over the weekend I developed a dynamic calendar using php for I came across a thread on the internet where a person was having trouble creating their own. I thought to myself that this would be challenging, so I took it upon myself if I could write my own script. I did and it works pretty darn good. I have future plans to have it where a person can make a notation on a certain date to remember an appointment or remember an event. I also plan on adding JavaScript (jQuery) and Ajax into the mix to make it spiffier and where the page doesn’t have to reload. However, I thought I would share some of the code here for people who want to tackle the same thing. It would probably benefit you if you know OOP, but I think you can figure it out how to do it the procedural way if you don’t know OOP. As I side note I even do some of the code in the procedural way.

Here is the main script:
[php]<?php
require(‘lib/includes/utilities.inc.php’);
$monthlyCalendar = array();
$displayCalendar = array();

$myDate = (isset($_POST[‘myDate’])) ? date(‘F Y’, strtotime($_POST[‘myDate’])) : date(‘F Y’);

$month = new MyCalendar();

$displayDate = MyCalendar::dateHumanForm($myDate);

/* This is the important one for it figures out the number of days in the current month */
$daysInMonth = MyCalendar::daysInMonth($myDate);

$displayMonth = MyCalendar::displayMonth($myDate);
$displayDay = MyCalendar::displayDay($myDate); // Day of the Week:

$displayYear = MyCalendar::displayYear($myDate);

$prevMonth = MyCalendar::numericDay($myDate);
$futureMonth = 6 - MyCalendar::numericDay($displayMonth . ’ ’ . $daysInMonth . ', ’ . $displayYear);

/* Calculate the previous number of days from previous month for filler and /
/
day’s location. Then put them in an array /
for ( $y = $prevMonth ; $y > 0; $y-- ) {
$monthlyCalendar[] = ‘’ . MyCalendar::previousMonth($y) . ‘’;
}
/
Since we know the last location of previous month’s day location in the week, /
/
we don’t have to figure out the location for the current month, we just have /
/
to add it on to the existing array. /
for ( $x = 1; $x <= $daysInMonth; $x++ ) {
$monthlyCalendar[] = ‘’ . $x . ‘’;
}
/
If there are any blank days at the end of calendar then put days from next /
/
month into the existing array. This should complete this array. */
for ( $a = 1; $a <= $futureMonth; $a++ ) {
$monthlyCalendar[] = ‘

’ . MyCalendar::futureMonth($a) . ‘’;
}

/* I figure it would be easier to create the calendar using a two-dimensional /
/
array rather than a single-dimensional array. I’m using a old fashion table /
/
I figured it would be easier to style in css and it was. There is nothing /
/
wrong with using tables as long as you aren’t designing the whole website /
/
with tables. The following code I converted the single-dimensional array to /
/
a two-dimensional array. */

/* Initiaze all the variables to zero */
$num = 0;
$b = 0;
$c = 0;

/* Create a while loop in order to create the two-dimensional array */
while ( $num < sizeof($monthlyCalendar) ) {

/* Valuse being put into the two-dimensional array */
$displayCalendar[$b][$c] = $monthlyCalendar[$num]; 

$num += 1; // Increment this variable by one to avoid infinite loop.
$c += 1; // Inside portion of the two dimension array 

/* Check to see if number can be divided by 7 (seven days in a week) */
if ( ( $num % 7 ) == 0 ) {
	$b += 1; // Increment the outer portion of the array by one to get the rows of weeks.
	$c = 0; // Reset back to zero (Remember Arrays are zero based!)
}

}

include(‘lib/html/header.php’);

?>

<?php /* This just uses an array that spits out the Days of the Week in the heading */ for ( $d=0; $d <= 6; $d++) { echo '' .PHP_EOL; } ?> <?php /* This creates the calendar base using the two-dimensional array */ foreach ($displayCalendar as $innerCalendar ) { echo '' .PHP_EOL; foreach ($innerCalendar as $key => $value ) { echo $value .PHP_EOL; } echo '' .PHP_EOL; } ?>
<?= $displayMonth . ' ' . $displayYear; ?>
' . MyCalendar::retrieveDays($d) . '

[/php]

Here is the class that goes along with it:
[php]<?php
class MyCalendar {
protected $monthArray = array();
protected static $day = array( 0 => “Sun”,
1 => “Mon”,
2 => “Tue”,
3 => “Wed”,
4 => “Thu”,
5 => “Fri”,
6 => “Sat”
);
protected $months = array( 0 => “January”,
1 => “February”,
2 => “March”,
3 => “April”,
4 => “May”,
5 => “June”,
6 => “July”,
7 => “August”,
8 => “September”,
9 => “October”,
10 => “November”,
11 => “December”
);
protected static $daysInMonth; // Total Days in a Month:

 protected static $mysqlFormat;
 
 protected static $displayMonth;
 protected static $displayDay;
 protected static $displayYear;
 
 protected static $numericMonth; // 1 through 12 Months:
 protected static $numericDay; // Numeric Day of the Week (0 - 6):
 protected static $displayDate;
 protected static $previousMonth;
 protected static $futureMonth;
 
 public static function retrieveDays($days) {
 	return self::$day[$days];
 }

 public static function numericMonth($date) {
 	return self::$numericMonth = date('n', strtotime($date));		 		 
 }
 
 /* Numeric representatin of the day of the week */
 public static function numericDay($date) {
 	return self::$numericDay = date('w', strtotime($date)); 
 }
 
 public static function daysInMonth($date) {
 	return self::$daysInMonth = date('t', strtotime($date)); 
 }
 
 public static function mysqlFormat($date) {
 	return self::$mysqlFormat = date("Y-m-d H:i:s", strtotime($date)); 
 }
 
 public static function dateHumanForm($date) {
 	return self::$displayDate = date("F j, Y", strtotime($date)); 
 }
 
 public static function displayMonth($date) {
 	return self::$displayMonth = date('F', strtotime($date));
 }
 
 public static function displayDay($date) {
 	return self::$displayDay = date('l', strtotime($date));
 }
 
 public static function displayYear($date) {
 	return self::$displayYear = date('Y', strtotime($date)); 
 }
 
 public static function previousMonth($num) {
 	return self::$previousMonth = date('j', strtotime(self::$displayDate . ' ' . $num . ' days ago')); 
 }
 
 public static function futureMonth($num) {
 	return self::$futureMonth = date('j', strtotime(self::$displayMonth . ' ' . self::$daysInMonth . ', ' . self::$displayYear . ' +' . $num  . ' days'));
 }
 	 
}[/php]

Like I said it would be helpful to know OOP, but I think it could be easily converted over to procedural style like I said.

Enjoy… :wink:

I converted it all over to OOP:

MyCalendar Class:

[php]<?php
class MyCalendar {

protected $monthyCalendar = array();
protected $a, $x, $y;	
protected $displayCalendar = array();
protected $b, $c, $num;		
protected $prevMonth;
protected $calcFutureDays;
protected $previousMonth;
public $generateForm;
public $theForm = NULL;

protected static $day = array( 0 => "Sun",
	1 => "Mon",
	2 => "Tue",
	3 => "Wed",
	4 => "Thu",
	5 => "Fri",
	6 => "Sat"
	);
protected $months = array( 0  => "January", 
	1  => "February", 
	2  => "March", 
	3  => "April",
	4  => "May",
	5  => "June",
	6  => "July",
	7  => "August",
	8  => "September",
	9  => "October",
	10 => "November",
	11 => "December"
	);

 protected static $daysInMonth; // Total Days in a Month:
 
 protected static $mysqlFormat;
 
 protected static $displayMonth;
 protected static $displayDay;
 protected static $displayYear;
 
 protected static $numericMonth; // 1 through 12 Months:
 protected static $numericDay; // Numeric Day of the Week (0 - 6):
 protected static $displayDate;

 protected static $futureMonth;
 
 
 
 public function __construct($date) {
	$this->generateForm = $this->generateForm($date);
 }
 
 protected function generateForm($date) {
	
	$this->prevMonth = self::numericDay($date);
	$this->calcFutureDays = 6 - self::numericDay( self::displayMonth($date) . ' ' . self::daysInMonth($date) . ', ' . self::displayYear($date) );		 

	/* Calculate the previous number of days from previous month for filler and      */
	/* day's location. Then put them in an array                                     */
	for ( $this->y = $this->prevMonth; $this->y > 0; $this->y-- ) {
		
		$this->monthyCalendar[] =  '<td class="smallText">' . $this->previousMonth( $date, $this->y ) . '</td>';
	}
	
	/* Since we know the last location of previous month's day location in the week, */
	/* we don't have to figure out the location for the current month, we just have  */
	/* to add it on to the existing array.                                           */
	for ( $this->x = 1; $this->x <= self::daysInMonth($date); $this->x++ ) {
		$this->monthyCalendar[] =  '<td class="calText">' . $this->x . '</td>';
	}
	
	/* If there are any blank days at the end of calendar then put days from next    */
	/* month into the existing array. This should complete this array.               */
	for ( $this->a = 1; $this->a <= $this->calcFutureDays; $this->a++ )  {
		$this->monthyCalendar[] = '<td class="smallText">' . self::futureMonth($this->a) . '</td>';
	}		 

	/* I figure it would be easier to create the calendar using a two-dimensional    */
	/* array rather than a single-dimensional array. I'm using a old fashion table   */
	/* I figured it would be easier to style in css and it was. There is nothing     */
	/* wrong with using tables as long as you aren't designing the whole website     */
	/* with tables. The following code I converted the single-dimensional array to   */
	/* a two-dimensional array.                                                      */

	/* Initialize all the variables to zero */
	$this->num = 0;
	$this->b = 0;
	$this->c = 0;

	/* Create a while loop in order to create the two-dimensional array */
	while ( $this->num < sizeof($this->monthyCalendar) ) {
		
		/* Values being put into the two-dimensional array */
		$this->displayCalendar[$this->b][$this->c] = $this->monthyCalendar[$this->num]; 
		
		$this->num += 1; // Increment this variable by one to avoid infinite loop.
		$this->c += 1; // Inside portion of the two dimension array 
		
		/* Check to see if number can be divided by 7 (seven days in a week) */
		if ( ( $this->num % 7 ) == 0 ) {
			$this->b += 1; // Increment the outer portion of the array by one to get the rows of weeks.
			$this->c = 0; // Reset back to zero (Remember Arrays are zero based!)
		} // 
	}

	$this->theForm  = '<article class="myGreatCalendar">' . PHP_EOL;
	$this->theForm .= '<table class="tableStyle">' . PHP_EOL;
	$this->theForm .= '<thead>' . PHP_EOL;
	$this->theForm .= '<tr>' . PHP_EOL;
	
	/* Output the Month && Year*/		
	$this->theForm .=	'<th colspan="7" class="tableHeading">' . self::displayMonth($date)  . ' ' . self::displayYear($date).  '</th>' . PHP_EOL;
	$this->theForm .=  '</tr>' . PHP_EOL;
	$this->theForm .=  '<tr>' . PHP_EOL;
	
	/* This just uses an array that spits out the Days of the Week in the heading */
	for ( $d=0; $d <= 6; $d++) {
		$this->theForm .= '<th class="calText">' .self::$day[$d] . '</th>' .PHP_EOL;
	}
	
	$this->theForm .= '</tr>' . PHP_EOL;
	$this->theForm .= '</thead>' . PHP_EOL;
	$this->theForm .= '<tbody>' . PHP_EOL;
	
	/* This creates the calendar base using the two-dimensional array */
	foreach ($this->displayCalendar as $innerCalendar ) {
		$this->theForm .= '<tr>' .PHP_EOL;
		foreach ($innerCalendar as $key => $value ) {
			$this->theForm .=  $value .PHP_EOL;
		}
		$this->theForm .= '</tr>' .PHP_EOL;
	}										  
	
	$this->theForm .= '</tbody>' . PHP_EOL;
	$this->theForm .= '</table>' . PHP_EOL;

	return $this->theForm;
	
}

public static function numericMonth($date) {
	return self::$numericMonth = date('n', strtotime($date));		 		 
}

/* Numeric representatin of the day of the week */
public static function numericDay($date) {
	return self::$numericDay = date('w', strtotime($date)); 
}

public static function daysInMonth($date) {
	return self::$daysInMonth = date('t', strtotime($date)); 
}

public static function mysqlFormat($date) {
	return self::$mysqlFormat = date("Y-m-d H:i:s", strtotime($date)); 
}

public static function dateHumanForm($date) {
	return self::$displayDate = date("F j, Y", strtotime($date)); 
}

public static function displayMonth($date) {
	return self::$displayMonth = date('F', strtotime($date));
}

public static function displayDay($date) {
	return self::$displayDay = date('l', strtotime($date));
}

public static function displayYear($date) {
	return self::$displayYear = date('Y', strtotime($date)); 
}

public function previousMonth($date, $num) {
	return $this->previousMonth = date('j', strtotime($date . ' ' . $num . ' days ago')); 
}

public static function futureMonth($num) {
	return self::$futureMonth = date('j', strtotime(self::$displayMonth . ' ' . self::$daysInMonth . ', ' . self::$displayYear . ' +' . $num  . ' days'));
}

}[/php]

The CSS ( Sorry I use SASS, but at least it saves space. ;D ) for the table design:

.calendarBackground { box-sizing: border-box; position: relative; left: 180px; display: inline-block; width: 100%; max-width: 732px; height: 100%; max-height: 800px; background-color: black; padding: 2px; margin: 0; } .calendarTitle { box-sizing: border-box; float: left; display: block; position: relative; left: 180px; background-color: #df8642; width: 100%; max-width: 100px; height: 40px; text-align: center; padding: 5px; margin: 10px 2px 5px 2px; } .calendarText { font-family: 'Arvo', serif; font-size: 0.8rem; line-height: 30px; color: white; } .calendarBox { box-sizing: border-box; float: left; display: block; background-color: #f5f0ea; width: 100%; max-width: 100px; height: 100%; min-height: 100px; padding: 10px; margin: 2px; } .displayCurrentMonth { color: black; text-align: center; } .smallText, .calText { color: #aaa; font-family: 'PT Sans', sans-serif; font-size: 0.8rem; } .calText { color: black; font-weight: bold; } table { border: 2px solid black; width: 100%; max-width: 500px; margin: 20px auto; } .tableHeading { font-family: 'Arvo', serif; font-size: 1.8rem; line-height: 1.5; } th { border: 2px solid black; text-align: center; width: 30px; padding: 5px; } td { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid black; text-align: left; background-color: #f5f0ea; width: 30px; height: 50px; padding: 3px; }

And finally this is how you would implement it…the easy part:
[php]<?php
require(‘lib/includes/utilities.inc.php’);

$myDate = (isset($_POST[‘myDate’])) ? date(‘F Y’, strtotime($_POST[‘myDate’])) : date(‘F Y’);

$month = new MyCalendar($myDate);

include(‘lib/html/header.php’);

?>

<?= $month->generateForm; ?>
[/php]

I can be such an airhead ;D at times, to figure out future days all you have to do is:

[php] /* If there are any blank days at the end of calendar then put days from next /
/
month into the existing array. This should complete this array. */
for ( $this->a = 1; $this->a <= $this->calcFutureDays; $this->a++ ) {
$this->monthyCalendar[] = ‘

’ . $this->a . ‘’;
} [/php]

While I’m at it, I think it would be easy to change over to using div tags (or any other kind of HTML tags) instead of using a table. This script should be easy to convert and to change the CSS Styling.

OK, I know I’m probably becoming a little annoying, but I have polish off this calendar even more. ;D

It’s pretty well documented with comments (with the exception of the CalendarControls class, but the variable names are very descriptive…I think ;)) , so I’ll just display the scripts/code:
[php]<?php

//
/** Dynamic Calendar Ver 1.0 /
/
Created By John Pepp /
/
Start Date : 08/16/2014 /
/
Revised Date : 08/20/2014 /
/
**/
/
/

require(‘lib/includes/utilities.inc.php’);
/* Page Number is actually Next or Previous Number /
/
This santizes the page once it is executed by user */
$page = isset( $_GET[‘page’] ) ? htmlspecialchars( $_GET[‘page’], ENT_QUOTES | ENT_HTML5, “UTF-8”): 0;

/* This santizes the file name of this file /
/
if you want to, you can just subsitute what is on the right with /
/
the actual name of the file. For example $page = ‘calendar.php’ */
$phpSelf = filter_input(INPUT_SERVER, ‘PHP_SELF’, FILTER_SANITIZE_URL);

/* Set the Calendar Controls to the correct page && path of this file */
$setMonth = new CalendarControls( $page, $phpSelf );

$todaysDate = $setMonth->returnDate;

/* This is the actual calendar for you could subsitute /
/
$todaysDate with you own script in figuring out /
/
today’s date or what have you */
$month = new MyCalendar($todaysDate);

include(‘lib/html/header.php’);

?>

<?php echo $month->generateForm; ?> <?php echo $setMonth->returnControls; ?> [/php] [php]<?php class MyCalendar {
protected $monthyCalendar = array();
protected $a, $x, $y;	
protected $displayCalendar = array();
protected $b, $c, $num;		
protected $prevMonth;
protected $calcFutureDays;
protected $previousMonth;
public $generateForm;
public $theForm = NULL;

protected static $day = array( 0 => "Sun",
	1 => "Mon",
	2 => "Tue",
	3 => "Wed",
	4 => "Thu",
	5 => "Fri",
	6 => "Sat"
	);

 protected static $daysInMonth; // Total Days in a Month:
 
 protected static $mysqlFormat;
 
 protected static $displayMonth;
 protected static $displayDay;
 protected static $displayYear;
 
 protected static $numericMonth; // 1 through 12 Months:
 protected static $numericDay; // Numeric Day of the Week (0 - 6):
 protected static $displayDate;

 protected static $futureMonth;
 
 public function __construct($date) {
	$this->generateForm = $this->generateForm($date);
 }
 
 protected function generateForm($date) {
	
	$this->prevMonth = self::numericDay($date);
	$this->calcFutureDays = 6 - self::numericDay( self::displayMonth($date) . ' ' . self::daysInMonth($date) . ', ' . self::displayYear($date) );		 

	/* Calculate the previous number of days from previous month for filler and      */
	/* day's location. Then put them in an array                                     */
	for ( $this->y = $this->prevMonth; $this->y > 0; $this->y-- ) {
		
		$this->monthyCalendar[] =  '<td class="smallText">' . $this->previousMonth( $date, $this->y ) . '</td>';
	}
	
	/* Since we know the last location of previous month's day location in the week, */
	/* we don't have to figure out the location for the current month, we just have  */
	/* to add it on to the existing array.                                           */
	for ( $this->x = 1; $this->x <= self::daysInMonth($date); $this->x++ ) {
		$this->monthyCalendar[] =  '<td class="calText">' . $this->x . '</td>';
	}
	
	/* If there are any blank days at the end of calendar then put days from next    */
	/* month into the existing array. This should complete this array.               */
	for ( $this->a = 1; $this->a <= $this->calcFutureDays; $this->a++ )  {
		$this->monthyCalendar[] = '<td class="smallText">' . $this->a . '</td>';
	}		 

	/* I figure it would be easier to create the calendar using a two-dimensional    */
	/* array rather than a single-dimensional array. I'm using a old fashion table   */
	/* I figured it would be easier to style in css and it was. There is nothing     */
	/* wrong with using tables as long as you aren't designing the whole website     */
	/* with tables. The following code I converted the single-dimensional array to   */
	/* a two-dimensional array.                                                      */

	/* Initialize all the variables to zero */
	$this->num = 0;
	$this->b = 0;
	$this->c = 0;

	/* Create a while loop in order to create the two-dimensional array */
	while ( $this->num < sizeof($this->monthyCalendar) ) {
		
		/* Values being put into the two-dimensional array */
		$this->displayCalendar[$this->b][$this->c] = $this->monthyCalendar[$this->num]; 
		
		$this->num += 1; // Increment this variable by one to avoid infinite loop.
		$this->c += 1; // Inside portion of the two dimension array 
		
		/* Check to see if number can be divided by 7 (seven days in a week) */
		if ( ( $this->num % 7 ) == 0 ) {
			$this->b += 1; // Increment the outer portion of the array by one to get the rows of weeks.
			$this->c = 0; // Reset back to zero (Remember Arrays are zero based!)
		} // 
	}

	$this->theForm  = '<article class="myGreatCalendar">' . PHP_EOL;
	$this->theForm .= '<table class="tableStyle">' . PHP_EOL;
	$this->theForm .= '<thead>' . PHP_EOL;
	$this->theForm .= '<tr>' . PHP_EOL;
	
	/* Output the Month and Year */		
	$this->theForm .=	'<th colspan="7" class="tableHeading">' . self::displayMonth($date) . ' ' . self::displayYear($date). '</th>' . PHP_EOL;
	$this->theForm .=  '</tr>' . PHP_EOL;
	$this->theForm .=  '<tr>' . PHP_EOL;
	
	/* This just uses an array that spits out the Days of the Week in the heading */
	for ( $d=0; $d <= 6; $d++) {
		$this->theForm .= '<th class="calText dayHeading">' .self::$day[$d] . '</th>' .PHP_EOL;
	}
	
	$this->theForm .= '</tr>' . PHP_EOL;
	$this->theForm .= '</thead>' . PHP_EOL;
	$this->theForm .= '<tbody>' . PHP_EOL;
	
	/* This creates the calendar base using the two-dimensional array */
	foreach ($this->displayCalendar as $innerCalendar ) {
		$this->theForm .= '<tr>' .PHP_EOL;
		foreach ($innerCalendar as $key => $value ) {
			$this->theForm .=  $value .PHP_EOL;
		}
		$this->theForm .= '</tr>' .PHP_EOL;
	}										  
	
	$this->theForm .= '</tbody>' . PHP_EOL;
	$this->theForm .= '</table>' . PHP_EOL;
$this->theForm .= '</article>' . PHP_EOL;
	return $this->theForm;
	
}

public static function numericMonth($date) {
	return self::$numericMonth = date('n', strtotime($date));		 		 
}

/* Numeric representatin of the day of the week */
public static function numericDay($date) {
	return self::$numericDay = date('w', strtotime($date)); 
}

public static function daysInMonth($date) {
	return self::$daysInMonth = date('t', strtotime($date)); 
}

public static function mysqlFormat($date) {
	return self::$mysqlFormat = date("Y-m-d H:i:s", strtotime($date)); 
}

public static function dateHumanForm($date) {
	return self::$displayDate = date("F j, Y", strtotime($date)); 
}

public static function displayMonth($date) {
	return self::$displayMonth = date('F', strtotime($date));
}

public static function displayDay($date) {
	return self::$displayDay = date('l', strtotime($date));
}

public static function displayYear($date) {
	return self::$displayYear = date('Y', strtotime($date)); 
}

public function previousMonth($date, $num) {
	return $this->previousMonth = date('j', strtotime($date . ' ' . $num . ' days ago')); 
}

public static function futureMonth( $calendarDate, $numOfMonths ) {
	
	return self::$futureMonth = date('F Y', strtotime( $calendarDate . ' +' . $numOfMonths . ' months' ));
}

}[/php]
[php]<?php
class CalendarControls extends MyCalendar {

public $returnDate;
public $displayControls;
public $returnControls;
protected static $todaysDate;
protected static $page;
protected static $varPage;
protected static $next;
protected static $previous;

public function __Construct( $page, $phpSelf ) {
	$this->returnDate = $this->todaysDate($page);
	$this->returnControls = $this->calButtons( $phpSelf );
}

protected function todaysDate($page) {
	
	self::$todaysDate = date('F Y'); // Today's Month && Year:
	self::$page = isset( $page ) ? $page : NULL;
	
	self::$varPage = isset( self::$page ) ? self::$page : 0;
	
	self::$previous = isset( self::$page ) ? self::$page - 1 : -1;
	self::$next = isset( self::$page ) ? self::$page + 1 : 1;		
	
	return self::$todaysDate = parent::futureMonth( self::$todaysDate, self::$varPage );
	
}

protected function calButtons($phpSelf) {
	$this->displayControls  = '<div class="controls">' . PHP_EOL;
	$this->displayControls .= '<a class="calBtn leftBtn" href="' . $phpSelf . '?page=' . self::$previous .  '">Previous</a>' . PHP_EOL;
	$this->displayControls .= '<a class="calBtn rightBtn" href="' . $phpSelf . '?page=' . self::$next . '">Next</a>' . PHP_EOL;
	$this->displayControls .= '</div>' . PHP_EOL;
	
	return $this->displayControls;
}

}[/php]

I even prettied up the CSS for it: :wink:

[code] /* Table Styling for Calendar
***********************************************/
table {
border: 2px solid black;
width: 100%;
max-width: 500px;
margin: 20px auto 0 auto;
}

.calendarBackground {
box-sizing: border-box;
position: relative;
left: 180px;
display: inline-block;
width: 100%;
max-width: 732px;
height: 100%;
max-height: 800px;
background-color: black;
padding: 2px;
margin: 0;
}

.calendarTitle {
box-sizing: border-box;
float: left;
display: block;
position: relative;
left: 180px;
background-color: #df8642;
width: 100%;
max-width: 100px;
height: 40px;
text-align: center;
padding: 5px;
margin: 10px 2px 5px 2px;
}

.calendarText {
font-family: ‘Arvo’, serif;
font-size: 0.8rem;
line-height: 30px;
color: white;
}

.calendarBox {
box-sizing: border-box;
float: left;
display: block;
background-color: #f5f0ea;
width: 100%;
max-width: 100px;
height: 100%;
min-height: 100px;
padding: 10px;
margin: 2px;
}

.displayCurrentMonth {
color: black;
text-align: center;
}

.smallText, .calText {
color: #aaa;
font-family: ‘PT Sans’, sans-serif;
font-size: 0.8rem;
}

.calText {
color: black;
font-weight: bold;
}

.markHoliday {
color: green;
font-size: 1.2rem;
font-weight: bold;
}

.dayHeading {
color: white;
background-color: #df8642;
font-size: 1.2rem;
}

.tableHeading {
font-family: ‘Arvo’, serif;
font-size: 1.8rem;
line-height: 1.5;
color: white;
background-color: #1B405A;
}

th {
text-align: center;
width: 30px;
padding: 5px;
}

td {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 2px solid black;
text-align: left;
background-color: #f5f0ea;
width: 30px;
height: 50px;
padding: 3px;
}

.inputDate {
display: block;
position: relative;
width: 200px;
height: 25px;
font-size: 1.2rem;
text-align: center;
margin: 0 auto;
}

/* Controls Styling for Calendar
***********************************************/
.controls {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: block;
width: 100%;
max-width: 500px;
height: 50px;
background-color: #1B405A;
padding: 5px;
margin: 0 auto 30px auto;
}

.rightBtn {
float: right;
position: relative;
right: 60px;
line-height: 40px;
}
.rightBtn:hover {
color: #ffa;
}

.leftBtn {
float: left;
position: relative;
left: 60px;
line-height: 40px;
}
.leftBtn:hover {
color: #ffa;
}

.calBtn {
color: white;
font-family: ‘PT Sans’, sans-serif;
font-size: 1.2rem;
text-decoration: none;
}[/code]

I’ll even throw in my utilities.inc.php auto loader configuration:
[php]// Autoload classes from “classes” directory:
function class_loader($class) {
require(“lib/classes/” . $class . “.php”);
}

spl_autoload_register(“class_loader”);
[/php]

I fixed a small Firefox CSS issue when it comes to tables (Go Figure, it’s usually IE ;)):

[code] /* Table Styling for Calendar
***********************************************/
table {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-collapse: separate !important;
width: 100%;
max-width: 700px;
margin: 20px auto 0 auto;
}

td {
border: 1px solid #df8642;
}

.calendarBackground {
box-sizing: border-box;
position: relative;
left: 180px;
display: inline-block;
width: 100%;
max-width: 700px;
height: 100%;
background-color: black;
padding: 2px;
margin: 0;
}

.calendarTitle {
box-sizing: border-box;
float: left;
display: block;
position: relative;
left: 180px;
background-color: #df8642;
width: 100%;
max-width: 100px;
height: 40px;
text-align: center;
padding: 5px;
margin: 10px 2px 5px 2px;
}

.calendarText {
font-family: ‘Arvo’, serif;
font-size: 0.8rem;
line-height: 30px;
color: white;
}

.calendarBox {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: block;
background-color: #f5f0ea;
width: 100%;
max-width: 100px;
height: 100%;
min-height: 100px;
padding: 10px;
margin: 2px;
}

.displayCurrentMonth {
color: black;
text-align: center;
}

.smallText, .calText {
color: #aaa;
font-family: ‘PT Sans’, sans-serif;
font-size: 0.8rem;
}

.calText {
color: black;
font-weight: bold;
}

.markHoliday {
color: green;
font-size: 1.2rem;
font-weight: bold;
}

.dayHeading {
color: white;
background-color: #df8642;
font-size: 1.2rem;
}

.tableHeading {
font-family: ‘Arvo’, serif;
font-size: 1.8rem;
line-height: 1.5;
color: white;
background-color: #1B405A;
}

th {
text-align: center;
width: 30px;
padding: 5px;
}

td {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: left;
background-color: #f5f0ea;
width: 30px;
height: 50px;
padding: 3px;
}

.inputDate {
display: block;
position: relative;
width: 200px;
height: 25px;
font-size: 1.2rem;
text-align: center;
margin: 0 auto;
}

/* Controls Styling for Calendar
***********************************************/
.controls {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: block;
width: 100%;
max-width: 700px;
height: 50px;
background-color: #1B405A;
padding: 5px;
margin: 0 auto 30px auto;
}

.rightBtn {
float: right;
position: relative;
right: 60px;
line-height: 40px;
}
.rightBtn:hover {
color: #ffa;
}

.leftBtn {
float: left;
position: relative;
left: 60px;
line-height: 40px;
}
.leftBtn:hover {
color: #ffa;
}

.calBtn {
color: white;
font-family: ‘PT Sans’, sans-serif;
font-size: 1.2rem;
text-decoration: none;
}
}
[/code]

Sponsor our Newsletter | Privacy Policy | Terms of Service