`
ljqian
  • 浏览: 6939 次
  • 性别: 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>
Global site tag (gtag.js) - Google Analytics