event calendar

Hello I created a basic calendar where the admin can put in events. I’m new to php so I used a tutorial for the beginning.

The view of the calender is realy simply:

ma di wo do vr za zo
1 2 3 4 5 6 7

If there’s an event, the date becomes blue. But I wont to change the calendar; if there’s an event the title must be seen in the calender itself instead of under the calender. I hope you understand :smiley: Can someone help me? Here is the code!

<html>
	<head>
    <div id="kalender">
    <h1> Kalender </h1>
    <p> Klik op een blauwe datum om de details weer te geven </p>
    
    	<script>
			function goLastMonth(month, year){
				if(month == 1) {
				--year;
				month = 13;
				}
						--month
var monthstring= ""+month+"";
var monthlength = monthstring.length;
if(monthlength <=1){
monthstring = "0" + monthstring;
}
document.location.href ="<?php echo $_SERVER['PHP_SELF'];?>?month="+monthstring+"&year="+year;
				}
function goNextMonth(month, year){
if(month == 12) {
++year;
month = 0;
}
++month
var monthstring= ""+month+"";
var monthlength = monthstring.length;
if(monthlength <=1){
monthstring = "0" + monthstring;
}
document.location.href ="<?php $_SERVER['PHP_SELF'];?>?month="+monthstring+"&year="+year;
}
		</script>
        <style>
			.today {
				background-color: #00ff00;
				}
			.event {
				background-color: #0000ff;	
				}
				
		</style>
        <style type="text/css">
.myTable { background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white; }
.myTable td, .myTable th { border:1px solid #000; }
.myTable a {color: #000000;text-decoration: none;}
</style>
    </head>
	<body>
    
    	<?php
		if(isset($_GET['day'])){
			$day = $_GET['day'];
			}else{
				$day = date("j");
				}
		if(isset($_GET['month'])) {
			$month = $_GET['month'];
			} else {
				$month = date("m");
				}
		if(isset($_GET['year'])) {
			$year = $_GET['year'];
			} else {
				$year = date("y");
				}
				
				
				
			//kalender variable
			  $currentTimeStamp = strtotime("$year-$month-$day");
   $monthName = date("F", $currentTimeStamp);
			$numDays = date("t", $currentTimeStamp);
			$counter = 0;
			?>
        
        
        <?php
			//code moet onder datum variable
			if(isset($_GET['add'])){
				$title = $_POST['txttitle'];
				$detail = $_POST['txtdetail'];
				
				$eventdate = $day."/".$month."/".$year;
				
				
				$sqlinsert = "insert into eventcalender (Title,Detail,eventDate,dateAdded) values ('".$title."','".$detail."','".$eventdate."',now())";
				
				$resultinsert = mysql_query($sqlinsert);
				if ($resultinsert) {
					echo "Evenement is succesvol toegevoegd.";
					}else {
						echo "Er is iets misgelopen...";
						}
				
				}
		?>
        
    	<table class="myTable" align="center">
        	<tr>
            	<th><input style='width:50px;' type='button' value='<'name='previousbutton' onclick ="goLastMonth(<?php echo $month.",".$year?>)"></th>
                <th colspan='5'>  <?php   echo $monthName.", ".$year; ?></th>
                <th><input style='width:50px;' type='button' value='>'name='nextbutton' onclick ="goNextMonth(<?php echo $month.",".$year?>)"></th>
            </tr>
            <tr>
            	<td width = '50px'>Ma</td>
                <td width = '50px'>Di</td>
                <td width = '50px'>Wo</td>
                <td width = '50px'>Do</td>
                <td width = '50px'>Vr</td>
                <td width = '50px'>Za</td>
                <td width = '50px'>Zo</td>
            </tr>
            <?php
			echo "<tr>";
				
				for($i = 1; $i < $numDays+1; $i++, $counter++) {
					$timeStamp = strtotime("$year-$month-$i");
					if ($i == 1) {
							$firstDay = date("w",  $timeStamp);
							$firstDay = $firstDay -1;
						for($j = 0; $j <$firstDay; $j++,$counter++)	{
							//blank space
							echo "<td>&nbsp;</td>";
							}
						}
						if($counter % 7 == 0) {
							echo"</tr><tr>";
							}
						$monthstring = $month;
						$monthlength = strlen($monthstring);
						$daystring = $i;
						$daylength = strlen($daystring);
						if($monthlength <= 1){
							$monthstring = "0".$monthstring;
							}
						if($daylength <=1){
							$daystring = "0".$daystring;
							}
				$todaysDate = date("d/m/y");
				$dateToCompare = $daystring . '/' . $monthstring . '/'.$year;
			
							echo "<td align ='center'";
							if ($todaysDate == $dateToCompare) {
								echo "class= 'today'";
								}else{
									$sqlCount = "select * from eventcalender where eventDate='".$dateToCompare."'";
									$noOfEvent = mysql_num_rows(mysql_query($sqlCount));
									if ($noOfEvent >= 1) {
										echo "class='event'";
										}
									}
									
							echo " ><a href='".$_SERVER['PHP_SELF']."?month=".$monthstring."&day=".$daystring."&year=".$year."&v=true'>".$i."</a></td>";
}
				
				echo "</tr>";
			?>
        </table>       
        <?php
		
			if(isset($_GET['v'])){
				echo "<a href='".$_SERVER['PHP_SELF']."?month=".$month."&day=".$day."&year=".$year."&v=true&f=true'>Evenement toevoegen</a>";
				if(isset($_GET['f'])) {
					include ("eventform.php");
					}
					$sqlEvent = "select * from eventcalender where eventDate = '".$day."/".$month."/".$year."'";
					$resultEvents = mysql_query ($sqlEvent);
				
					while($events=mysql_fetch_array($resultEvents)){
					echo "<br> <br>";
					echo "Datum :".$day."/".$month."/".$year."<br>";
					echo "Titel : ".$events['Title']."<br>";
					echo "Omschrijving : ".$events['Detail']."<br>";	
					echo "Evenement nummer:".$events['ID']."<br>";
					echo "<hr>";
					}
				}
					
             ?> 
        <br> <Br>
         <?php
		 $id=$_POST['txtverwijder'];
			if(isset($_GET['v'])){
				echo "<a href='".$_SERVER['PHP_SELF']."?month=".$month."&day=".$day."&year=".$year."&v=true&f=true'>Evenement verwijderen</a>";
				if(isset($_GET['f'])) {
					include ("eventformdelete.php");
					}
					$sqlEvent = "delete from eventcalender where id = '$id'";
					$resultEvents = mysql_query ($sqlEvent);
					}
				
		?>
       
    </div>
    </body>
</html>

Have you tried using CSS? You could just give .event a position style.
position: relative;
top: 0;

Or playing with margin works sometimes. You can use negative values.

It really depends where you want the event text to show because it may end up that you have to alter the source code by changing the order that .event comes in the code. Sometimes using CSS isn’t the right solution, but merely a bandaid.

Sponsor our Newsletter | Privacy Policy | Terms of Service