'Ajax'에 해당되는 글 1건

  1. 2007.02.22 Ajax로 달력 출력

Ajax로 달력 출력

|

총 4개의 파일로 되어 있습니다.
출력파일, css파일, js파일, php실행파일
달력출력파일에 css,js,php파일을 호출하여 사용하면 됩니다. : )

달력 출력 파일

<form name='x_calendar'>
<input type='hidden' name='xyear' value='<?=date(Y);?>'>
<input type='hidden' name='xmonth' value='<?=date(m);?>'>
</form>
   <?
   echo "<table border='0' cellpadding='5' cellspacing='0' id='t_calendar'>";
   echo "<caption><a href='#' onclick=\"change_calendar('prev',document.x_calendar.xyear.value, document.x_calendar.xmonth.value)\"><</a> <span id='l_year'></span> 년 / <span id='l_month'></span> 월 <a href='#' onclick=\"change_calendar('next',document.x_calendar.xyear.value, document.x_calendar.xmonth.value)\">></a></caption>";
   echo "<tr><td>Sunday</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>";
   echo "</table>";
   ?>
<script>
function change_calendar(division, xyear, xmonth)
{
 AJAX.create();
 AJAX.openXML('POST','statistics_exec.php', true);
 AJAX.setStatusSuccessHandler(calendar_loadData);
 AJAX.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 AJAX.send("division="+division+"&year="+xyear+"&month="+xmonth);
}

 AJAX.create();
 AJAX.openXML('POST','statistics_exec.php', true);
 AJAX.setStatusSuccessHandler(calendar_loadData);
 AJAX.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 AJAX.send(null);
</script>

css 파일

#t_calendar {
  border-collapse:collapse;
  font-size:9pt;
  margin-left: 10px;
}

#t_calendar th { border:1px solid #E6E6E6; background:#D2D2D2; width: 96px;}
#t_calendar td { border:1px solid #E6E6E6;  width: 96px;}


JS파일

var list = new Array();

function calendar_loadData(doc){

 list['start_week'] = doc.getElementsByTagName("start_week");
 list['last_day'] = doc.getElementsByTagName("last_day");
 list['year'] = doc.getElementsByTagName("year");
 list['month'] = doc.getElementsByTagName("month");

 var table = document.getElementById('t_calendar');
 var start_week = list['start_week'][0].firstChild.nodeValue;
 var last_day = list['last_day'][0].firstChild.nodeValue;
 var year = list['year'][0].firstChild.nodeValue;
 var month = list['month'][0].firstChild.nodeValue;
 var ju = 1;
 
 document.getElementById('l_year').innerHTML = year;
 document.getElementById('l_month').innerHTML = month;
 document.x_calendar.xyear.value = year;
 document.x_calendar.xmonth.value = month;
// 열삭제
 for(var i = table.rows.length-1; i > 0; i--){
  table.deleteRow(i);
 }

// 열 생성
 
 //빈셀 생성
 var row = table.insertRow(1);
 for( var i = 0; i < start_week; i++)
 {
  var cell = row.insertCell(i);
  cell.innerHTML = "&nbsp;";
 }
 //셀 생성
 for(var days = 1; days <= last_day; days++)
 {
  if(i%7==0){
   i = 0;
   ju++;
   var row = table.insertRow(ju);
  }
 
  var cell = row.insertCell(i);
  cell.innerHTML = "<sup>"+days+"</sup>";
  i++;
  if(i%7==1)cell.style.color='red';
  if(i%7==0)cell.style.color='blue';
 }
 //빈셀 생성
 while(1){
  if(i%7==0) break;
  var cell = row.insertCell(i);
  cell.innerHTML = "&nbsp;";
  i++;
  if(i%7==0) break;
 }

}

 php파일
<?PHP
 if($division=='prev'){
  $date = date("Y-m-d",mktime(0,0,0,$month-1,1,$year));
 }else if($division=='next'){
  $date = date("Y-m-d",mktime(0,0,0,$month+1,1,$year));
 }else{
  $date = date(Y.'-'.m.'-'.d);
 }

 if( eregi("^[0-9]{4}\-[0-9]{2}\-[0-9]{2}$",$date) ){
  $t = explode("-",$date);
  $year =$t[0];
  $month =$t[1];
  $day =$t[2];
 }else{
  $year = date("Y");
  $month = date("m");
  $day = date("d");
 }

 $timestemp = mktime(0,0,0,$month,1,$year);
 $start_week = date("w",$timestemp);
 $last_day = date("t",$timestemp);
 

header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="utf-8"?>';

 echo'<calendar>';
 echo'<start_week>'.$start_week.'</start_week>';
 echo'<last_day>'.$last_day.'</last_day>';
 echo'<year>'.$year.'</year>';
 echo'<month>'.$month.'</month>';
while($ob = mysql_fetch_object($res)){
 echo'<sum_day>'.$ob->dates.'</sum_day>';
 echo'<sum_ct>'.$ob->ct.'</sum_ct>';
}

 echo'</calendar>';
?>

And
prev | 1 | next