`
ljqian
  • 浏览: 6790 次
  • 性别: Icon_minigender_1
  • 来自: 常熟
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
fullcalendar使用尝试 fullcalendar, javascript, jquery
<?php
gatekeeper();
$tasks = $vars['tasks'];
$events_str = '[]';
if ($tasks){
	$events_array = array();
	foreach ($tasks as $task){
		$id = $task->guid;
		$title = $task->title;
		$business_id = $task->container_guid;
		$start_date = date('Y-m-d H:i',$task->start_date);
		$end_date = date('Y-m-d H:i',$task->end_date);
		$priority = $task->priority;
		$backgroundColor = '';
		switch ($priority){
			case '1': $backgroundColor = '#0097F7';break;
			case '2': $backgroundColor = '#E8C608';break;
			case '3': $backgroundColor = '#E00000';break;
			default: $backgroundColor = '#0097F7';break;
		}
		/**
		 * id 可选,事件唯一标识,重复的事件具有相同的
		 * title 必须,事件在日历上显示的title 
		 * allDay 可选,是否是整日事件 
		 * start 必须,事件的开始时间 
		 * end 可选,结束时间 
		 * url 可选,当指定后,事件被点击将打开对应url 
		 * className 指定事件的样式 
		 * editable 是否可拖拽 
		 * source 指向次event的eventsource对象 
		 * color 背景和边框颜色 
		 * backgroundColor 背景颜色 
		 * borderColor 边框颜色 
		 * textColor 文本颜色 
		 */

		$temp = "{
			id:'$id',
			title:'$title',
			business_id:'$business_id',
			start:'$start_date',
			end:'$end_date',
			backgroundColor:'$backgroundColor'
		}";
		array_push($events_array, $temp);
	}
	$events_str = implode(',', $events_array);
	$events_str = '['.$events_str.']';
}
?>
<link rel="stylesheet" type="text/css" href="<?php echo $CONFIG->wwwroot;?>mod/crm/views/default/css/fullcalendar.css">
<div id='t_calendar'></div>
<script type="text/javascript">

$(document).ready(function(){
	//初始化日历控件
		var t_calendar = $("#t_calendar").fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
		monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
		dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
        dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
        firstDay: 1,
        buttonText: {  
            today: '今天',  
            month: '月',  
            week: '周',  
            day: '日'
       	},
       	titleFormat:{//日历控件头部日期显示格式设置
       	    month: 'yyyy MMMM',                             
       	    week: "yyyy MMM d{ '—' d}", // Sep 7 - 13 2009
       	    day: 'yyyy,MMM d,dddd'                  
       	},
       	columnFormat: {day: "dddd"},
       	timeFormat: "HH:mm{ - HH:mm}",
       	allDayText: "全天",
       	axisFormat: "HH:mm",
       	firstHour: 0,
       	allDayDefault:false,//设置默认的时间显示,为false会在任务前显示时间,为true时则不显示
       	editable: true,
       	allDaySlot:false,
       	selectable: true,
       	selectHelper: true,
       	unselectAuto: false,
       	select: function(t_start, t_end){//点击空白处用于添加新的数据
           	var start_date = $.fullCalendar.formatDate(t_start, 'yyyy-MM-dd HH:mm');
           	var end_date = $.fullCalendar.formatDate(t_end, 'yyyy-MM-dd HH:mm');
           	var event = {start:start_date,end:end_date,allDay:false};
       		getAndHandleTaskForm(event,t_calendar);
       		t_calendar.fullCalendar('unselect');
        },
        eventClick: function(event){//点击已有数据,用于编辑
        	getAndHandleTaskForm(event,t_calendar);
        },
        eventDrop: function(event, delta,minuteDelta){//拖拉后的回调函数
        	changeTaskDate(event,delta,minuteDelta);
        },
        events:<?php echo $events_str ;?>
	});

});
//获取task的提交页面form表单,并进行针对日历控件的处理
function getAndHandleTaskForm(event,t_calendar){
	if (event.business_id == '' || event.business_id == undefined){//在日程中创建任务
		getAjaxTaskForm('','',event);
		$('#edittask').dialog({title:'新建任务'});
	}else{//在日程中编辑任务
		getAjaxTaskForm(event.business_id,event.id,'');
		$('#edittask').dialog({title:'编辑任务'});
	}
   	$('#edittask').dialog('open');
   	$('#sub_task_form').hide();
   	$('#ajax_sub_task').show();
   	$('#isAjax').val(1);
   	bindAjaxSubmitOnTaskForm(event,t_calendar);
}
//给获取过来的task表单绑定ajaxSubmit方法
function bindAjaxSubmitOnTaskForm(event,t_calendar){
	$('#task_form').submit(function(){
		$(this).ajaxSubmit({
			beforeSubmit:check,
			url:'<?php echo $CONFIG->wwwroot;?>pg/crm/action/edittask',
			type:'post',
			dataType:'json',
			async:false,
			success:function(data){
				$('#edittask').dialog('close');
				if(event.business_id != undefined){//不是新建任务,移除原有的任务显示
					t_calendar.fullCalendar("removeEvents",event.id);
				}
				var backgroundColor = crm_setBGcolor(data.priority);
				t_calendar.fullCalendar("renderEvent",{
					id: data.task_id,
					title:data.title,
					business_id:data.business_id,
					start:event.start,
					end:event.end,
					allDay:event.allDay,
					backgroundColor:backgroundColor
				},false);
				
			}
		});
		return false;
	});
	$('#ajax_sub_task').click(function(){
		$('#task_form').submit();
	});
}
//拖动任务后,改变任务的时间
function changeTaskDate(event,delta,minuteDelta){
	var task_id = event.id;
	var url = "<?php echo $CONFIG->wwwroot;?>pg/crm/action/changeTaskDate";
	var data = {task_id:task_id,delta:delta,minuteDelta:minuteDelta};
	$.ajax({
		url:url,
		data:data,
		type:'post',
		success:function(data){
			if(data == 'success'){
				show_message('日期修改成功! ','T');
			}
		}
	});
}
//根据优先级判断该输出的颜色
function crm_setBGcolor(priority){
	var backgroundColor = '';
	switch (priority){
		case '1': backgroundColor = '#0097F7';break;
		case '2': backgroundColor = '#E8C608';break;
		case '3': backgroundColor = '#E00000';break;
		default: backgroundColor = '#0097F7';break;
	}
	return backgroundColor;
}
</script>
<style type='text/css'>
	#t_calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>
浏览器监听前进后退键,实现页面滑动效果 javascript, jquery, 前端技术, 滑动效果
var FIRSTPAGEOFSLIDE="test3_1";
var LOADINGPIC="indexloading";
var xmlhttp;
function S_xmlhttprequest(){
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
/*ajax方法,mypage参数为引入的文件名XXX.XXX*/
function testInfo(mypage){
	var divid=mypage.split(".")[0];
	S_xmlhttprequest();
	xmlhttp.open("GET",mypage,false);//ajax请求设为同步请求
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			divid="div#"+divid;
			var newpage=xmlhttp.responseText;
			var mytest=$(divid);
			mytest.append(newpage);
			testcheck(divid);
		}else if(xmlhttp.readyState==2 && xmlhttp.status!=200){
			alert("您所访问的地址不存在");
			window.location.hash="";
			window.location.replace("index.php");
		}
	}
	xmlhttp.send();
}
/*-----------------------以上为ajax的方法-----------------------------------------------------------*/

$(document).ready(function(){
	/*刷新页面时判断当前hash值,根据当前hash值显示div*/
	var onloadhash=getHash();
	onloadhash=isHashNull(onloadhash);
	showpage(onloadhash);
});

/*--------------为a标签绑定事件-----------------------------------------------*/
//重新创建变量nowhash用来存放当前url中的hash值
var nowhash=getHash();
//该方法用于绑定a标签的onclick事件,当a标签触发onclick事件时会把a标签的id号传到方法中,方法根据当前div与目标div进行slideleft方法的滑动
function slideonclick(a_slide){
	var firstpage=nowhash;
	firstpage=isHashNull(firstpage);
	var nextpage=getNextPageid(a_slide);
	slideleft(firstpage,nextpage);
}
/*---------------向左滑动向右滑动的效果实现方法------------------------------------------------------*/
/*滑动方法,thispage为当前页面,latterpage为目标页面,animate方法为滑动方法主体*/
	function slideleft(firstpage,nextpage){
		var thispage="div#"+firstpage;
		var latterpage="div#"+nextpage;

/*该if语句用于判断是否在当前页点击了当前页的a标签,如果是则不执行任何操作*/
		if(thispage!==latterpage){
/*判断目标页面,根据目标页面加载相关信息*/
			$("div#"+LOADINGPIC).show();//下一张页面加载之前显示loading图像
			createdivforajax(nextpage);//下一张页面加载中(同步加载)
			$("div#"+LOADINGPIC).hide();//下一张页面加载结束,隐藏loading图像
			//滑动效果开始执行
			$(thispage).animate({left:"-100%"},500);

			$(latterpage).animate({left:"0%"},500,function(){
/*当滑动动画结束后,改变thispage的left样式,原为-100%,改变成100%*/
				$(thispage).css("left","100%");
//隐藏之前的div,之前用的清空,换成隐藏可以避免每次点击都需重新调用ajax方法加载页面
				$(thispage).hide();
			});
			//改变nowhash的值,使其一直为当前的hash值
			nowhash=nextpage;
		}

	}
/*该方法是右滑方法,当浏览器前进后退被点击时触发,共三个参数,第一个是当前页,第二个是下一页,第三个判断是否为加载进来的第一页*/
	function slideright(firsthash,nexthash,isFirstPage){
		if(isFirstPage){//判断是否为第一页,若否则执行页面滑动效果切换,若是则重置hash值
			location.replace("#");
		}else{
			var thispage="div#"+firsthash;
			var formerpage="div#"+isHashNull(nexthash);
			$(formerpage).css("left","-100%");
			createdivforajax(isHashNull(nexthash));//该算法有什么用作者也忘了。。只记得没有这个判断会出错
				$(thispage).animate({left:"100%"},500);
				$(formerpage).animate({left:"0%"},500,function(){
					$(thispage).hide();
				});

			//改变nowhash的值,使其一直为当前的hash值
			nowhash=nexthash;

		}
	}
/*--------------------hash值变化的事件监听器------------------------------------------------------------*/

/*实例化历史管理*/
	var historyManager = new HistoryManager();

/*添加监听器,当事件触发时调用该方法,(hash值的改变)*/
	historyManager.addListener(function() {
		var previoushash = arguments[0];//上一步的hash值
		var isFirstPage=false;//设置变量isFirstPage,用于判断是否为第一页的boolean值,默认值为false;

		var presenthash=nowhash;//当前的hash值
		if(presenthash==""){//当前页的hash值为空时,设置变量isFirstPage的值为true
			isFirstPage=true;
		}
		slideright(presenthash,previoushash,isFirstPage);

	});
	/*通过window所有onclick事件的触发监控,来使historyManager的触发*/
	document.onclick = function(ev) {
         ev = ev || window.event;
         var elem = ev.srcElement || ev.target;

         if (elem.tagName && elem.tagName.toLowerCase() == "a") {
             if (ev.preventDefault) {
                 ev.preventDefault();
             } else {
                 ev.returnValue = false;
             }
             var href = elem.getAttribute("href", 2);
             historyManager.add(href);
         }
     }
/*-------------------简化代码所写的方法---------------------------------------------------------*/
/*获取当前页面的hash值,根据hash值判断用户当前在哪个页面*/
	function getHash(){
		var myhash=document.location.hash.slice(1);
		return myhash;
	}
/*判断所获取的hash值是否为空,为空则赋值test3_1*/
	function isHashNull(hash){
		if(hash==""||hash=="null"){
			hash=FIRSTPAGEOFSLIDE;
		}
		return hash;
	}
/*根据当前hash值跳转到url指定页面*/
	function showpage(nowhash){
		var nowshowpage="div#"+nowhash;
		createdivforajax(nowhash);
		$(nowshowpage).css("left","0%");
	}

/*
该方法用于控制调用创建新的用于存放ajax引入页面的div,调用ajax方法以及控制div的显示
通过判断div中的值是否为空判断是否加载ajax
*/
	function createdivforajax(mydivid){
		var mydiv="div#"+mydivid;
		var mypage=mydivid+".php";
		if($(mydiv).text()=="")
		{
			createDIV(mydivid);
			testInfo(mypage);
			$(mydiv).show();
		}else{
			$(mydiv).show();
		}
	}
/*根据页面a标签方法返回id值来确定目标页面名*/
	function getNextPageid(a_slide){
		var nextpage="";
		nextpage=a_slide.getAttribute("href").split("#")[1];
		return nextpage;
	}
/*创建三个方法用于生成开启slide模式下的ul标签内代码*/

	function testcheck(divid){
		if($(divid+" p:first").attr("checked")==="true") return;
		setSlide();
		deletehash();
		$(divid+" p:first").attr("checked","true");
	}
/*获取class为slide的a标签,改变a标签的属性值,href,onclick*/
	function setSlide(){
		var a_slide=$("a.slide");
		for(i=0;i<a_slide.length;i++){//循环改变每个class值为slide的a标签的href属性以及onclick属性
			var hrefvalue=a_slide.eq(i).attr("href");
			if(hrefvalue.indexOf("#")>=0){//如果href的值本身就有"#"符号,即已经被调用该方法,则去除"#"符号
				hrefvalue=hrefvalue.split("#")[1];
			}
			hrefvalue="#"+hrefvalue.split(".")[0];//本身取出的href值为xxx.php,现只取xxx部分
			a_slide.eq(i).attr("href",hrefvalue);//把改变的href值重新付给href属性
			a_slide.eq(i).attr("onclick","slideonclick(this)");//为该a标签绑定onclick事件,调用slideonclick(this.id)事件实现左滑动效果
		}
	}
/*如果a标签的class没有slide属性,则不实现滑动效果,直接跳转*/
	function deletehash(){
		var a_not_slide=$("a:not(a.slide)");
		for(i=0;i<a_not_slide.length;i++){
			var not_slide="";
			var not_slide=a_not_slide.eq(i);
			not_slide.click(function(){
				var hrefvalue=this.getAttribute("href");
				this.setAttribute("target","_blank");
				window.open(hrefvalue);
			});
		}
	}
/*生成存放ajax方法引入的php页面的div*/
	function createDIV(divid){
		var newdiv='<div id="'+divid+'" style="position:absolute;left:100%"><p checked="false"></p></div>';
		$("div#slideonindex").append(newdiv);
	}

Global site tag (gtag.js) - Google Analytics