Click here to see the calendar
Result:
AJAX:
ajax.js
function HttpRequest(method,url){
this.method = method;
this.url = url;
this.init = CreateXMLHTTPObject;
this.self_url = self.location.href;
this.func = function () {};this.go=function go(str_url){
self.location.href=str_url;
}function CreateXMLHTTPObject(){
var xObject = null;
try {
xObject = new ActiveXObject(“Msxml2.xmlhttp.4.0″);
}
catch (e){
try{
xObject = new XMLHttpRequest();
if(xObject.overrideMimeType){
xObject.overrideMimeType(‘text/xml’);
}}
catch (e){
try {
xObject = new ActiveXObject(“Msxml2.xmlhttp”);
}
catch (e) {
try {
xObject = new ActiveXObject(“Microsoft.xmlhttp”);
}
catch (e) {
alert(“Error: Unable to create XML HTTP object!”);
}
}
}
}
return xObject;
}this.post = dopost;
function dopost(obj,func,param)
{
//alert(func);
//this.func = func;
obj.onreadystatechange = func;
obj.open(this.method, this.url, true);
obj.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded;charset=utf-8″);
obj.send(param);
}this.utf16to8 = utf16to8;
function utf16to8(str) {
if(str==”){
return ”;
}
var out, i, len, c;out = “”;
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0×0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0×80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0×80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0×80 | ((c >> 0) & 0x3F));
}
}
return out;
}this.$ = $;
function $(id){
return document.getElementById(id);
}this.tagNameParam = tagNameParam
function tagNameParam(name,obj){
var objs = obj.getElementsByTagName(name);
var param = ”;
for (i=0;i<objs.length;i++){
param = param + objs.name+”=”+escape(utf16to8(Trim(objs.value)))+”&”;
}
return param;
}this.form2param = form2param
function form2param( objs, ignore ) {
/** //getElementsByClass(‘test’)
* 调用方法: form2param(document.getElementsByTagName(‘*’), Array(‘submit’));
* param1: 一般不需要修改
* param2: 需要忽略的表单域名称
* retrun: 字符串
*/
var param = “”;function add2param( str_param, tagName, value ) {
var param
if (str_param.length==0) {
return tagName+”=”+escape(utf16to8(value));
}
else {
return str_param+’&’+tagName+”=”+escape(utf16to8(value));
}
}function arrayToObject(arr) {
var obj=new Object();
for (i=0; i<arr.length; i++) {
obj[arr[i]]=null;
}
return obj;
}var tagnames = new Array(“input”, “textarea”, “select”);
var chkboxs = new Array(“checkbox”, “radio”);
var obj_tagnames = arrayToObject(tagnames);
var obj_ignore = arrayToObject(ignore);
var obj_chkboxs = arrayToObject(chkboxs);for (var i=0; i<objs.length; i++) {
if (objs[i].tagName.toLowerCase() in obj_tagnames) {
if ( (!(objs[i].name.toLowerCase() in obj_ignore)) && ( objs[i].name.indexOf(‘save_’)==-1 ) ){
if (objs[i].type.toLowerCase() in obj_chkboxs) {
if (objs[i].checked) {
param = add2param(param, objs[i].name.toLowerCase(), objs[i].value);
}
}
else {
param = add2param(param, objs[i].name.toLowerCase(), objs[i].value);
}
}
}
}return param;
}this.checkboxToArray = function (form,tag){
var objs = form.getElementsByTagName(tag);
var param = null;
for (i=0;i<objs.length;i++ )
{
if(objs[i].type==”checkbox” && objs[i].checked){
param+=objs[i].name+”=”+escape(utf16to8(objs[i].value));
}
}
return param;
}this.load = function( url ){
var ss = document.getElementsByTagName(“script”);
for( i=0;i<ss.length;i++ ){
if( ss[i].src && ss[i].src.indexOf( url ) != -1 ){
this.onsuccess();
return;
}
}
s = document.createElement(“script”);
s.type = “text/javascript”;
s.src = url;
var head = document.getElementsByTagName(“head”)[0];
head.appendChild(s);
var self = this;s.onload = s.onreadystatechange = function(){
if( this.readyState && this.readyState == “loading” )
return;
self.onsuccess();
}
s.onerror = function(){
head.removeChild(s);
self.onfailure;
}
};this.onsuccess = function(){};
this.onfailure = function(){};//去掉字符串 的左边 空格
this.LTrim = LTrim ;
function LTrim(str){
var i;
for(i=0;i<str.length;i++) {
if( str.charAt(i)!=” ” && str.charAt(i)!=null )
break;
}
str = str.substring(i,str.length);
return str;
};
//去掉字符串 的右边 空格
this.RTrim = RTrim ;
function RTrim(str){
var i;
for( i=str.length-1;i>=0;i– ){
if( str.charAt(i)!=” “&&str.charAt(i)!=null )
break;
}
str = str.substring(0,i+1);
return str;
};
//去掉字符串 的 左右边 空格
this.Trim = Trim ;
function Trim(str){
var trimRe = /^s+|s+$/g;
str = String(str).replace(trimRe,”");
return LTrim(RTrim(str));
};//去掉字符串 的 左右边 空格
this.strReplace = strReplace ;
function strReplace( string ){
string = String.replace(/(^s*)|(s*$)/g,”");
return string ;
};}
int_step = 0;
function show_loading() {
div_hint = document.getElementById(‘hint’);
if (!div_hint) {
var hint_text = “正在处理您的请求…”
div_hint = document.createElement(“div”);
div_hint.id = “hint”;
var div_hint_image = document.createElement(“div”);
div_hint_image.id = “hint_image”;
div_hint.appendChild(div_hint_image);
var img_loading = document.createElement(“img”);
img_loading.src = “/images/animated_loading.gif”;
img_loading.alt = hint_text;
div_hint_image.appendChild(img_loading);
var div_hint_text = document.createElement(“div”);
div_hint_text.id = “hint_text”;
div_hint.appendChild(div_hint_text);
var text_loading = document.createElement(“strong”);
text_loading.innerHTML = hint_text;
div_hint_text.appendChild(text_loading);
document.body.appendChild(div_hint);
}
else {
div_hint.style.display = “”;
}
}function hide_loading() {
div_hint.style.display = “none”;
}——————————————————————————–
CLIENT SIDE:
calendar.js
function Vcalendar(){
var ajax = new HttpRequest(‘POST’,'calendar.php’);
this.html = “<div id=’d_vfcalendar’ style=’position:absolute;z-index:9998; overflow:auto;’></div>”;
var request;
this.vfgoto = function (id,year,month){
var param = “iid=”+id+”&year=”+year+”&month=”+month;
request = ajax.init();
//alert(param);
ajax.post(request,this.use_back,param);
}this.use=function(id,e){
request = ajax.init();
if(window.event){
curPosX = document.body.scrollLeft + event.x;
curPosY = document.body.scrollTop + event.y;
} else{
curPosX = e.pageX;
curPosY = e.pageY;
}
ajax.$(‘d_vfcalendar’).style.left = curPosX + “px”;
ajax.$(‘d_vfcalendar’).style.top = curPosY + “px”;
var param = “iid=”+id;
ajax.post(request,this.use_back,param);
}this.use_back=function(){
var state = request.readyState;
//alert(state);
if(state==4){
ajax.$(‘d_vfcalendar’).innerHTML=request.responseText;
ajax.$(‘d_vfcalendar’).style.display=’block’;
request=null;
}
}this.create = function (){
document.write(this.html);
}
}var jcalendar = new Vcalendar();
jcalendar.create();
——————————————————————————-
SERVER SIDE:
calendar.php
<?php
function getCalendar($year,$month){
global $current_user;
//$first_day = get_option(‘start_of_week’);
//$first_of_month = gmmktime(0,0,0,$month,1,$year);
$per_line = 7;
$total_days = date(‘t’,strtotime(“$year-$month”));
//echo “$year-$month-2″;
//$first_day = date(‘N’,strtotime(“$year-$month-1″))
$line = 1;
for($i=1;$i<=$total_days;$i++){
$day = date(‘w’,strtotime(“$year-$month-$i”));
$array_data[$line][$day] = $i;
if($day==6){
$line++;
}
}
return $array_data;
}
$iid = $_REQUEST['iid'];
$did = “d_vfcalendar”;
$year= ($_REQUEST['year']==”")?date(“Y”,strtotime(“now”)):$_REQUEST['year'];
$month = ($_REQUEST['month']==”")?date(“n”,strtotime(“now”)):$_REQUEST['month'];
$calendar = getCalendar($year,$month);
$prev_month = date(“n”,strtotime(“$year-$month -1 month”));
$next_month = date(“n”,strtotime(“$year-$month +1 month”));
$prev_year = date(“Y”,strtotime(“$year-$month -1 month”));
$next_year = date(“Y”,strtotime(“$year-$month +1 month”));
$prev_month_name = date(“M”,strtotime(“$year-$month -1 month”));
$next_month_name = date(“M”,strtotime(“$year-$month +1 month”));
?>
<div style=”z-index:9999;background-color:#FAD6C7;”>
<table border=”0″ cellpadding=”1″ cellspacing=”1″ style=” font-family:monospace;font-size: 12px; border:dotted; border-width:thin”>
<tr><th colspan=”7″ bgcolor=”#CCCCFD” height=”25px” align=”center” valign=”middle”><a href=”#” onclick=”jcalendar.vfgoto(<?php echo “‘$iid’,$year-1,$month”?>);return false;”><<</a> <a href=”#” onclick=”jcalendar.vfgoto(<?php echo “‘$iid’,$prev_year,$prev_month”?>);return false;”><</a> <?php echo(date(“m/Y”,strtotime(“$year-$month”)))?> <a href=”#” onclick=”jcalendar.vfgoto(<?php echo “‘$iid’,$next_year,$next_month”?>);return false;”>></a> <a href=”#” onclick=”jcalendar.vfgoto(<?php echo “‘$iid’,$year+1,$month”?>);return false;”>>></a></tr></tr>
<tr style=”padding-left:2px” bgcolor=”#E7E7FE”>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Sun</div></th>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Mon</div></th>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Tue</div></th>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Wen</div></th>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Thu</div></th>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Fri</div></th>
<th bordercolor=”#E7E7FE” bgcolor=”#E7E7FE”><div align=”center”>Sat</div></th>
</tr>
<?php
if(is_array($calendar)):
for($i=1;$i<=count($calendar);$i++){
$sub_calendar = $calendar[$i];
?>
<tr>
<?php
for($j=0;$j<7;$j++){
?>
<td align=”center” bgcolor=”#F5F5FE” <?php echo (date(“Y-m-d”,strtotime(“now”))==date(“Y-m-d”,strtotime(“$year-$month-”.$sub_calendar[$j])))?”bgcolor=”#D3F4FF”":”" ?> ><?php
if(date(“Y-m-d”,strtotime(“now”))>date(“Y-m-d”,strtotime(“$year-$month-”.$sub_calendar[$j]))){
echo $sub_calendar[$j];
}else{
$tmp_date = date(“Y-m-d”,strtotime(“$year-$month-”.$sub_calendar[$j]));
echo “<a href=”#” onclick=”document.getElementById(‘$iid’).value=’$tmp_date’;document.getElementById(‘$did’).style.display=’none’;return false;”>$sub_calendar[$j]</a>”;
}
?></td>
<?php }?>
</tr>
<?php
}
endif
?>
</table>
</div>
————————————————————————————–
HOW TO USE:
<script type=”text/javascript” src=”ajax.js”></script>
<script type=”text/javascript” src=”calendar.js”></script>
<input type=”text” id=”sdate” onclick=”jcalendar.user(id,event)” >

