[SOLVED] calendar

AV1611 · September 17, 2008

Before I go out and design one from scratch does anyone have a suggestion or snippets for a simple calendar that I can display on a page? I need to display a monthly training calendar. I can design or use a backend as needed. I simply want a calendar to show up on a page with events... I don't even care if the events are clickable.

Just thought I'd ask before I go and reinvent the wheel...

F1Fan · September 17, 2008

Here's one I wrote:

<?php
$date = isset($_REQUEST['date'])?$_REQUEST['date']:date('Y-m-d');

$thismonthyear = date('F Y',strtotime($date));
$thismonth = date('n',strtotime($date));
$thisyear = date('Y',strtotime($date));
$firstday = date('Y-m-d',mktime(0,0,0,$thismonth,1,$thisyear));
$next = date('Y-m-d',strtotime($firstday." +1 month"));
$last = date('Y-m-d',strtotime($firstday." -1 month"));
$lastday = date('Y-m-d',mktime(0,0,0,$thismonth,date('t',strtotime($firstday)),$thisyear));
$nday = date('w',strtotime($firstday));
switch ($nday){
case 0:
	$curdate = date('Y-m-d',strtotime($firstday));
	break;
case 1:
	$curdate = date('Y-m-d',strtotime($firstday." -1 days"));
	break;
case 2:
	$curdate = date('Y-m-d',strtotime($firstday." -2 days"));
	break;
case 3:
	$curdate = date('Y-m-d',strtotime($firstday." -3 days"));
	break;
case 4:
	$curdate = date('Y-m-d',strtotime($firstday." -4 days"));
	break;
case 5:
	$curdate = date('Y-m-d',strtotime($firstday." -5 days"));
	break;
case 6:
	$curdate = date('Y-m-d',strtotime($firstday." -6 days"));
	break;
}
$nday = date('w',strtotime($lastday));
switch ($nday){
case 0:
	$enddate = date('Y-m-d',strtotime($lastday." +6 days"));
	break;
case 1:
	$enddate = date('Y-m-d',strtotime($lastday." +5 days"));
	break;
case 2:
	$enddate = date('Y-m-d',strtotime($lastday." +4 days"));
	break;
case 3:
	$enddate = date('Y-m-d',strtotime($lastday." +3 days"));
	break;
case 4:
	$enddate = date('Y-m-d',strtotime($lastday." +2 days"));
	break;
case 5:
	$enddate = date('Y-m-d',strtotime($lastday." +1 days"));
	break;
case 6:
	$enddate = date('Y-m-d',strtotime($lastday));
	break;
}

?>
<input type="hidden" id="timeout" value="">
<table width="70%" align="center" cellspacing="0">
<tr>
	<td>
		 
	</td>
	<td class="prevmonth" onclick="document.location='main.php?page=events&date=<?=$last?>'" onmouseover="this.className='aprevmonth'" onmouseout="this.className='prevmonth'">
		<- Last Month
	</td>
	<td colspan="5" class="main_title">
		<?=$thismonthyear?>
	</td>
	<td class="nextmonth" onclick="document.location='main.php?page=events&date=<?=$next?>'" onmouseover="this.className='anextmonth'" onmouseout="this.className='nextmonth'">
		Next Month ->
	</td>
	<td>
		 
	</td>
</tr>
<tr>
	<td class="leftcal">
		 
	</td>
	<td class="caldaytitle">
		Sunday
	</td>
	<td class="caldaytitle">
		Monday
	</td>
	<td class="caldaytitle">
		Tuesday
	</td>
	<td class="caldaytitle">
		Wednesday
	</td>
	<td class="caldaytitle">
		Thursday
	</td>
	<td class="caldaytitle">
		Friday
	</td>
	<td class="caldaytitle">
		Saturday
	</td>
	<td class="rightcal">
		 
	</td>
</tr>
<tr>
	<td class="leftcal">
		 
	</td>
<?php
while ($curdate<=$enddate){
	if ($curdate==date('Y-m-d')){
		$b1 = "<b><u>";
		$b2 = "</u></b>";
	}
	else{
		$b1 = "";
		$b2 = "";
	}
	if ($thismonth!=date('n',strtotime($curdate))){
		$notthismon = "ntm";
	}
	else $notthismon = "";
	$events = GetDayEvents($curdate);
	?>
	<td class="calday<?=$notthismon?>" onmouseover="this.className='acalday',changeTextColor('<?=$curdate?>','adom')" onmouseout="this.className='calday<?=$notthismon?>',changeTextColor('<?=$curdate?>','dom<?=$notthismon?>')">
		<table width="100%" height="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td class="dom<?=$notthismon?>" id="<?=$curdate?>1" valign="top" height="15">
					<?=$b1.date('j',strtotime($curdate)).$b2?>
				</td>
			</tr>
			<tr>
				<td class="dom<?=$notthismon?>" id="<?=$curdate?>2" valign="top" align="right">
					<?php
					if (count($events)==0) echo " \n";
					else{
						if (count($events)>1) $br = "<br>";
						else $br = "";
						foreach ($events as $event){
							if ($event['l_address']!=""){
								$string = str_replace(" ","+",$event['l_address']).",".str_replace(" ","+",$event['l_city']).",".str_replace(" ","+",$event['l_state']).",".str_replace(" ","+",$event['l_zip']);
							}
							?>
							<span <?php if (isset($string)){ ?> 
							onclick="window.open('http://maps.google.com/maps?f=q&hl=en&geocode=&q=<?=$string?>',
							'_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=790,height=550')"
							<?php } ?> onmouseover="onlyShow('detail<?=$event['id']?>'),setTimeoutId('detail<?=$event['id']?>')" 
							onmouseout="unsetTimeoutId(),setTimeout('hideEventDetails(\'detail<?=$event['id']?>\')',1500)">
								<?=$event['l_name']?> 
							</span><br>
							<div class='eventdetail' style="display:none;" id='detail<?=$event['id']?>' 
							onmouseover="setTimeoutId('detail<?=$event['id']?>')" onmousemove="setTimeoutId('detail<?=$event['id']?>')" 
							onmouseout="unsetTimeoutId(),setTimeout('hideEventDetails(\'detail<?=$event['id']?>\')',1500)" 
							<?php if (isset($string)){ ?>onclick="window.open('http://maps.google.com/maps?f=q&hl=en&geocode=&q=<?=$string?>',
							'_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=790,height=550')"<?php } ?>>
								<?php if (isset($string)){ ?><b>Click for a map and directions</b><br><?php } ?>
								From <?=date('g:i a',strtotime("$curdate {$event['start_time']}"))?>
								to <?=date('g:i a',strtotime("$curdate {$event['end_time']}"))?><br>
								<?=$event['description']!=""?$event['description']."<br>":""?>
								<?=$event['l_address']!=""?$event['l_address']."<br>":""?>
								<?=$event['l_city']!=""&&$event['l_state']!=""&&$event['l_zip']!=0?$event['l_city'].
								", ".$event['l_state']." ".$event['l_zip']."<br>":""?>
								<?=$event['l_phone']!=0?"(".substr($event['l_phone'],0,3).") ".substr($event['l_phone'],3,3).
								"-".substr($event['l_phone'],6,4)."<br>":""?>
							</div><?=$br?>
							<?php
						}
					}
					?>
				</td>
			</tr>
		</table>
	</td>
	<?php
	if (date('w',strtotime($curdate))==6&&$curdate!=$enddate) echo "
	<td class=\"rightcal\">
		 
	</td>
</tr>
<tr>
	<td class=\"leftcal\">
		 
	</td>\n";
	$curdate = date('Y-m-d',strtotime($curdate." +1 day"));
}
?>
	<td class="rightcal">
		 
	</td>
</tr>
</table>

You'll have to remove some of that stuff. Here's the CSS:

body{
background-color: #000000;
color: #BFDFDF;
margin: 0px;
}
.startstop{
position: absolute;
right: 20px;
top: 0px;
z-index: 1;
border: #000000 solid 5px;
font-family: Verdana;
font-weight: bold;
font-size: 10px;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
}
.link{
border: #000000 solid 5px;
font-family: Verdana;
font-weight: bold;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
}
.alink{
border: #000000 solid 5px;
font-family: Verdana;
font-weight: bold;
background-color: #BFDFDF;
color: #000000;
cursor: pointer;
}
.main_title{
font-family: Verdana;
font-size: 24px;
font-weight: bold;
background-color: #000000;
color: #BFDFDF;
text-align: center;
height: 50px;
}
.smmain_title{
font-family: Verdana;
font-size: 14px;
font-weight: bold;
background-color: #000000;
color: #BFDFDF;
text-align: center;
height: 50px;
}
.leftcal{
border-style: solid;
border-color: #BFDFDF;
border-width: 0px 1px 0px 0px;
width: 8%;
}
.rightcal{
border-style: solid;
border-color: #BFDFDF;
border-width: 0px 0px 0px 1px;
width: 8%;
}
.regulartd{
font-family: Verdana;
font-size: 10px;
text-align: center;
background-color: #000000;
color: #BFDFDF;
}
.caldaytitle{
font-family: Verdana;
font-size: 10px;
text-align: center;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.texttd{
font-family: Verdana;
font-size: 12px;
background-color: #000000;
color: #BFDFDF;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.calday{
font-family: Verdana;
font-size: 10px;
text-align: center;
width: 100px;
height: 80px;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.acalday{
font-family: Verdana;
font-size: 10px;
text-align: center;
width: 100px;
height: 80px;
background-color: #BFDFDF;
color: #000000;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.caldayntm{
font-family: Verdana;
font-size: 10px;
text-align: center;
width: 100px;
height: 80px;
background-color: #505050;
color: #C0C0C0;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.smcalday{
font-family: Verdana;
font-size: 10px;
text-align: center;
width: 20px;
height: 20px;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.smacalday{
font-family: Verdana;
font-size: 10px;
text-align: center;
width: 20px;
height: 20px;
background-color: #BFDFDF;
color: #000000;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.smcaldayntm{
font-family: Verdana;
font-size: 10px;
text-align: center;
width: 20px;
height: 20px;
background-color: #505050;
color: #C0C0C0;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 1px;
}
.dom{
font-family: Verdana;
font-size: 10px;
color: #BFDFDF;
cursor: pointer;
}
.domntm{
font-family: Verdana;
font-size: 10px;
color: #C0C0C0;
cursor: pointer;
}
.adom{
font-family: Verdana;
font-size: 10px;
color: #000000;
cursor: pointer;
}
.prevmonth{
font-family: Verdana;
font-size: 10px;
text-align: left;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
}
.nextmonth{
font-family: Verdana;
font-size: 10px;
text-align: right;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
}
.aprevmonth{
font-family: Verdana;
text-decoration: underline;
font-size: 10px;
text-align: left;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
}
.anextmonth{
font-family: Verdana;
text-decoration: underline;
font-size: 10px;
text-align: right;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
}
.songtitle{
font-family: Verdana;
font-size: 15px;
font-weight: bold;
text-align: center;
background-color: #000000;
color: #BFDFDF;
cursor: pointer;
border: solid #BFDFDF 1px;
}
.songtitlesorted{
font-family: Verdana;
font-size: 15px;
font-weight: bold;
text-align: center;
background-color: #BFDFDF;
color: #000000;
cursor: pointer;
border: solid #BFDFDF 1px;
}
.song{
font-family: Verdana;
font-size: 11px;
text-align: center;
background-color: #000000;
color: #BFDFDF;
border: solid #BFDFDF 1px;
}
.eventdetail{
z-index: 1;
position: absolute;
font-family: Verdana;
font-size: 12px;
text-align: center;
background-color: #BFDFDF;
color: #000000;
cursor: pointer;
border-style: solid;
border-color: #BFDFDF;
border-width: 10px;
}

AV1611 · September 17, 2008

I'm thinking this is exactly what I wanted ...except...

$events = GetDayEvents($curdate);

GetDayEvents function is not defined... can I get that snippet?

Thanks

:-*

F1Fan · September 17, 2008

Sure thing.

function GetDayEvents($date){
$query = "SELECT * FROM events WHERE date = '$date' ORDER BY date, start_time";
$result = mysql_query($query);
$data = array();
while ($row = mysql_fetch_array($result)){
	if ($row['l_name']==""){
		$locdata = GetLocation($row['l_id']);
		$row['l_name'] = $locdata['name'];
		$row['l_address'] = $locdata['address'];
		$row['l_city'] = $locdata['city'];
		$row['l_state'] = $locdata['state'];
		$row['l_zip'] = $locdata['zip'];
		$row['l_phone'] = $locdata['phone'];
	}
	array_push($data,$row);
}
return $data;
}

AV1611 · September 17, 2008

I intend to use this on a site I'm getting $ to do... do I have your permission to use this code?

F1Fan · September 17, 2008

Sure. Enjoy. Let me know if there's anything else on there that needs explaining.

AV1611 · September 17, 2008

Hey a million thanks.

I can understand it well.. I find it hard to get all the "this month starts on what day" stuff... you did that. Thanks. I can handle the rest, and I can write a form the end user can use to manage his events.

I own you one

AV1611 · September 17, 2008

Um... sorry... missed on question:

what format does $date need to be?

F1Fan · September 17, 2008

date('Y-m-d') or YYYY-MM-DD

AV1611 · September 17, 2008

Yea... I found it here:

changeTextColor('2008-09-04','adom')"... et al.

I have no database yet but if I did does it display the data in the cell or pop it up or what's normal. Is the site you made publicly viewable? I'd love to see it.

F1Fan · September 17, 2008

It lists all the events of that day in the table cell. I was in the middle of writing this site, and it's not complete, so please be forgiving. Also, Google thinks it's a hack site, and I haven't had a chance to clear its name, but here ya go:

http://chrisandjillshenk.com/mattshenk/main.php?page=events

AV1611 · September 17, 2008

Thanks a million.

AV1611 · September 17, 2008

Ok, I give up.

The array $data... how does the calendar match the events for the months?

I don't know what the table fields are...

And I don't know where you are matching whatever table field to the numeric day of the month..

help...

AV1611 · September 17, 2008

I feel stupid... I figured it out...

that function loops back to the current day...

solved.

Sign In

[SOLVED] calendar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information