index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Calendar</title>
<?php
</head>
<body>
<?php
include("css.php");
$k = (isset($_GET['x'])) ? explode('-',$_GET['x']) : "";
$month = (isset($_GET['x'])) ? $k[0] : date('m') + 1;
$year = (isset($_GET['x'])) ? $k[1] : date('Y');
if($month == 14){ $year++ ; $month = 2;};
if($month == 1){ $year-- ; $month = 13;};
$mar_l = $width + $space;
$daysname = array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
echo '<div class="ntfmain">';
echo '<div class="prev" id="prev"
onmouseover=crtHover(this,"prevhover");
onmouseout=crtHover(this,"prev"); onclick=goDate("'.($month -
1).'-'.$year.'");>'
.'<'
.'</div>'
.'<div class="ntfdate">';
$ntfdate = "01"."-".($month - 1)."-".$year." "."00:00:00";
echo date('F Y',strtotime($ntfdate))
.'</div>';
echo '<div class="next" onmouseover=crtHover(this,"nexthover");
onmouseout=crtHover(this,"next"); onclick=goDate("'.($month +
1).'-'.$year.'");>'
.'>'
.'</div>'
.'</div>';
echo '<div class="mainbox">';
for($d = 0; $d < count($daysname); $d++){
$m_l = $mar_l * $d;
echo '<div class="daysname" style="margin-left:'.$m_l.'px;">'.$daysname[$d].'</div>';
}
//----------------------------------------------DIV STYLE------------------------------------------------
include("data.php");
if(isset($_POST['save'])){
$val = array();
$value = (isset($_POST['field'])) ? $_POST['field'] : "";
foreach($value as $key => $v){
$val[] = "'".ucwords($v)."'";
$valx = implode(",",$val);
}
saveData($valx);
}
$event = getData(); // get data
$count_boxes = 0;
$days_so_far = 0;
$strmon
=
array('01'=>'Januari','02'=>'Febuari','03'=>'Mac','04'=>'April','05'=>'Mei','06'=>'Jun','07'=>'Julai','08'=>'Ogos','09'=>'September','10'=>'Oktober','11'=>'November','12'=>'Disember');
echo '<div class="box" id="theBox">';
$days_in_month = date("t", mktime(0,0,0,$month,0,$year));
$first_day_of_month = date ("w", mktime(0,0,0,$month-1,1,$year));
$first_day_of_month = $first_day_of_month + 1;
$x = 0;
$num = array();
for ($i = $first_day_of_month-1; $i < 7; $i++) {
$days_so_far = $days_so_far + 1;
$count_boxes = $count_boxes + 1;
$m_l = $mar_l * $i;
$x = $x + 1;
$x = (strlen($x) == 1) ? '0'.($x) : $x;
$mon = (strlen($month - 1) == 1) ? '0'.($month - 1) : ($month - 1);
$xtodate = $x.$mon.$year;
$class = ($xtodate == date('dmY')) ? "todaybox" : "daysbox";
echo '<div class="'.$class.'" style="margin-left:'.$m_l.'px;">'
.'<span style="color:#fff">'.$x.'</span>';
foreach($event as $edate => $ev){
$z = 14;
for($e = 0; $e < count($ev); $e++){
$id = ($edate == $xtodate) ? $x.$e : 0;
$num[] = $id;
$zx = $z * ($e);
$prtevent = ($edate == $xtodate) ? $ev[$e] : "";
$popDivVal = ($edate == $xtodate) ? str_replace(' ',',',$prtevent).".".$x.",".$strmon[$mon].",".$year : "";
echo '<div class="event" id="prtevent" onmouseover=popup("'.($m_l -
8).'","'.((70) + $zx).'","'.$edate.$e.'","1");
onmouseout=popup("0","0","'.$edate.$e.'","0")>'
.$prtevent
.'</div>';
}
}
echo '<div class="newevent"
onmousedown=newEvent(this,"1","'.$xtodate.'");
onmouseup=newEvent(this,"0","");>+</div>';
echo '</div>';
}
$top = $height + $space;
$boxes = $days_in_month - ($days_so_far);
$rows = ceil($boxes/7);
$extra_boxes = 7 - $count_boxes;
for($r = 0; $r < $rows; $r++){
$m_top = $top * ($r + 1);
$a = ($r == 0) ? ($days_so_far + 1) * ($r + 1) : $a + 7;
$b = (($a + 7) <= $days_in_month) ? $a + 7 : ($days_in_month + 1);
$y = -1;
for ($j = $a; $j < $b; $j++) {
$y = $y + 1;
$m_lb = $mar_l * $y;
$x = $x + 1;
$x = (strlen($x) == 1) ? '0'.($x) : $x;
$mon = (strlen($month - 1) == 1) ? '0'.($month - 1) : ($month - 1);
$xtodate = $x.$mon.$year;
$class = ($xtodate == date('dmY')) ? "todaybox" : "daysbox";
echo '<div class="'.$class.'" style="margin-left:'.$m_lb.'px;margin-top:'.$m_top.'px">'
.'<span style="color:#fff">'.$x
.'</span>';
foreach($event as $edate => $ev){
$z = 14;
for($e = 0; $e < count($ev); $e++){
$id = $x.$e;
$num[] = $id;
$zx = $z * ($e);
$prtevent = ($edate == $xtodate) ? $ev[$e] : "";
echo '<div class="event" id="prtevent" style="margin-top:'.$zx.'px""
onmouseover=popup("'.($m_lb - 8).'","'.(($m_top + 70) +
$zx).'","'.$edate.$e.'","1");
onmouseout=popup("0","0","'.$edate.$e.'","0")>'
.$prtevent
.'</div>';
}
}
$eventdate = substr($xtodate,4,4)."-".substr($xtodate,2,2)."-".substr($xtodate,0,2);
echo '<div class="newevent"
onmousedown=newEvent(this,"1","'.$eventdate.'");
onmouseup=newEvent(this,"0","");>+</div>';
echo '</div>';
}
}
for ($i = 1; $i <= $extra_boxes; $i++) {
//echo "<td width=\"100\" height=\"100\" class=\"afterdayboxes\"> </td>";
}
echo '</div>';
foreach($event as $edatep => $evp){
for($t = 0; $t < count($evp); $t++){
$prteventp = $evp[$t];
echo '<div class="popdiv" id="popdiv'.$edatep.$t.'" style="display:none">';
echo '<div>'.$prteventp.'</div>';
echo '<div>'.substr($edatep,0,2)." ".$strmon[substr($edatep,2,2)]." ".substr($edatep,4,4).'</div>';
echo '</div>';
}
}
echo '<form action="" method="post" name="Event"><div class="addevent" id="addevent" style="display:none">'
.'<div class="close" id="close"
onmouseover=addEvent("3","addevent","");
onmouseout=addEvent("4","addevent","");
onmousedown=addEvent("2","addevent","");
onmouseup=addEvent("0","addevent","");>X</div>';
$label = array("Event","Date Start","Date End");
$ftop = 26;
for($f = 0; $f < count($label); $f++){
$fxtop = $ftop * ($f + 3);
echo '<div style="position:absolute;margin-left:20px;margin-top:'.$fxtop.'px">'.$label[$f].'</div>';
$size = "20";
if($f == 0){$size = "50";}
echo '<div
style="position:absolute;margin-left:120px;margin-top:'.$fxtop.'px"><input
id="eventf'.$f.'" type="text" size="'.$size.'" name="field[]"
style="text-transform:capitalize" /></div>';
}
echo
'<div style="position:absolute;margin-left:200px;margin-top:'.($fxtop
+ 40).'px"><input type="button" value="Save"
onclick=saveEvent("'.$f.'"); /></div>';
/*echo
'<div><input type="text" name="startdate" id="eventdate" />
Until <input type="text" name="enddate" /></div>'
.'<div><input type="text" name="event" /></div>'
.'<div>'
.'<input type="button" value="Save" onclick="saveEvent()" />'
echo '<input type="hidden" name="save" />'
.'</div>';*/
echo '<input type="hidden" name="save" />';
echo '</div>';
echo '</div></form>';
//----------------------------------------------DIV STYLE------------------------------------------------
?>
<script type="text/javascript">
function crtHover(x, y){
x.className = y
}
function goDate(x){
window.location.href = "?x="+x;
}
function popup(left, top, val, ev){
var popdiv = document.getElementById('popdiv'+val);
popdiv.style.marginLeft = left+"px";
popdiv.style.marginTop = top+"px";
popdiv.style.display = (ev == '1') ? "" : "none";
}
function newEvent(x, y, z){
if(y == 1){
x.className = "neweventhover";
for(var i = 1; i <= 2; i++){
var eventdate = document.getElementById('eventf'+i);
eventdate.value = z;
}
}else{
var addEvent = document.getElementById('addevent');
x.className = "newevent";
addEvent.style.display = "";
}
}
function addEvent(x, y, z){
var addEvent = document.getElementById(y);
var cls = document.getElementById('close');
if(x == 1){
addEvent.style.display = "";
}else if(x == 2){
cls.className = "closedown";
}else if(x == 3){
cls.className = "closeover";
}else if(x == 4){
cls.className = "close";
}else{
cls.className = "close";
addEvent.style.display = "none";
}
}
function saveEvent(x){
var y = 0;
for(var i = 0; i < x; i++){
var eventf = document.getElementById('eventf'+i);
if(eventf.value == ""){
y++;
eventf.value = "Wajib";
}
}
if(y == 0){
document.Event.submit();
var addEvent = document.getElementById('addevent');
addEvent.style.display = "none";
}
}
</script>
</body>
</html>
Click links below to continue
data.php
css.php
Nice calendar. The only thing I would prefer to see is to have the days from previous (and coming months) to display in gray (or whatever colour one fancies). It will make the calendar to display in a more solid way.
ReplyDeleteSorry mate. need to think hard to do that.
DeleteAlso, it would be great if you are much more liberal with comments in your code. Right now I am trying to modify it for European calendar, where the week starts on a Monday. Second, I'll try to make the evennts as a "booking" event. Click the date and the color changes status to signal that it is busy.
DeleteThank you