javascript日历工作计划 dhtmlxscheduler的说明和使用

最新推荐文章于 2024-06-10 20:51:40 发布
最新推荐文章于 2024-06-10 20:51:40 发布
阅读量9.6k 收藏 9
点赞数 2
分类专栏： 知识点 代码小册子 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justflyhigh/article/details/8904032
版权
一、简介
dhtmlxScheduler是一个JavaScript日程安排控件，类似于Google日历，日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间，事件可以按天，周，月三个种视图显示。
官方网站：http://www.dhtmlx.com/
在线帮助文档：http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:toc
下载地址：http://www.dhtmlx.com/x/download/regular/dhtmlxScheduler.zip
二、效果图

三、html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>javascript日历行程安排</title>
		<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
   		<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			html, body{
				margin:0px;
				padding:0px;
				height:100%;
				overflow:hidden;
			}  
			
			/*日期顶部样式*/
			.dhx_month_day_send_signed .dhx_month_head,.dhx_month_day_out_signed .dhx_month_head,.dhx_month_day_send_out_signed .dhx_month_head{
				background-color: #EE91EC;
			}
			
			/*送签*/
			.dhx_month_day_send_signed .dhx_month_body{
				background-color:rgb(0, 255, 10);
			}
			
			/*出签*/
			.dhx_month_day_out_signed .dhx_month_body{
				background-color:rgb(6, 230, 250);
			}
			
			/*送签/出签*/
			.dhx_month_day_send_out_signed .dhx_month_body{
				background-color: yellow;
			}
			 
			#wp_data_form {
				position: absolute;
				top: 100px;
				left: 200px;
				z-index: 10001;
				display: none;
				background-color: white;
				border: 2px outset gray;
				padding: 20px;
				font-family: Tahoma;
				font-size: 10pt;
			}
		</style>
	</head>
	
	<body>
		<form id="wp_data_form">
			<table>
				<tr>
					<td>标题：</td>
					<td><input id="title" type="text" /></td>
				</tr>
				<tr>
					<td>简介：</td>
					<td><input id="intro" type="text" /></td>
				</tr>
				<tr>
					<td>内容：</td>
					<td><input id="content" type="text" /></td>
				</tr>
				<tr>
					<td>类型：</td>
					<td>
						<select id="type">
							<option value="1">送签</option>
							<option value="2">出签</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align:center;">
						<input type="button" value="保存" οnclick="saveFormDataToEvent()">
						<input type="button" value="取消" οnclick="closeForm()">
						<input type="button" value="删除" οnclick="deleteEvent()">						
					</td>
				</tr>
			</table>
		</form>
		<div id="wp_data_detail" style="display:none;">
			<table width="100%">
				<tr>
					<td style="width:40px;">标题：</td>
					<td id="title" style="text-align:left;"></td>
				</tr>
				<tr>
					<td>简介：</td>
					<td id="intro" style="text-align:left;"></td>
				</tr>
				<tr>
					<td>内容：</td>
					<td id="content" style="text-align:left;"></td>
				</tr>
				<tr>
					<td>类型：</td>
					<td id="type" style="text-align:left;"></td>
				</tr>
			</table>
		</div>
		<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
	        <div class="dhx_cal_navline">
	            <div class="dhx_cal_prev_button"> </div>
	            <div class="dhx_cal_next_button"> </div>
	            <div class="dhx_cal_today_button"></div>
	            <div class="dhx_cal_date"></div>
	            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
	            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
	            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	        </div>
	        <div class="dhx_cal_header"></div>
	        <div class="dhx_cal_data"></div>       
		</div>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="scheduler.js"></script>
		<!--zDialog插件-->
		<script type="text/javascript" src="zDrag.js"></script>
		<script type="text/javascript" src="zDialog.js"></script>
	</body>
</html>

四、javascript代码

/**
 * javascript 日程工作计划
 * 
 * 1、基于jQuery和dhtmlxscheduler
 * 2、引入js文件
 * 		codebase/dhtmlxscheduler.js
 * 3、引入css文件
 * 		codebase/dhtmlxscheduler.css
 * 4、dhtmlxscheduler在线帮助文档
 * 		http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:toc
 * 5、下载地址
 * 		www.dhtmlx.com/x/download/regular/dhtmlxScheduler.zip
 * 
 * @author wangjunjie <justflyhigh.com@gmail.com>
 * @version 0.1.0
 * @date 2013-05-05
 */

/**
 * 汉化
 * 
 * 1、日期汉化
 * 2、提示语汉化
 */
scheduler.locale = {
	date:{
		month_full:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
	  	month_short:["1","2","3","4","5","6","7","8","9","10","11","12"],
	  	day_full:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
	  	day_short:["日","一","二","三","四","五","六"]
 	},
    labels:{
 		dhx_cal_today_button:"今天",
 		day_tab:"日",
 		week_tab:"周",
 		month_tab:"月",
 		new_event:"新日程安排",
 		icon_save:"保存",
 		icon_cancel:"取消",
 		icon_details:"详细",
 		icon_edit:"编辑",
 		icon_delete:"删除",
 		confirm_closing:"",
 		confirm_deleting:"确定要删除该工作计划?",
 		section_description:"工作计划"
	}
};

/**
 * 日期显示格式配置
 */
scheduler.config.default_date = '%Y年%m月%d日';
scheduler.config.month_date = '%Y年%m月';
scheduler.config.day_date = '%Y年%m月%d日 %l';

/**
 * 配置弹出计划详细框
 */
scheduler.config.details_on_dblclick = true;
scheduler.config.details_on_create = true;
scheduler.config.icons_select = ["icon_details","icon_delete"];

/**
 * 设置 月视图 有工作计划 的 背景色
 * 判断一天内工作计划的类型显示不同的颜色
 */
scheduler.templates.month_date_class = function(date, today){
	var time = new Date(date).getTime();
	var from = time;
	var to = time + 86400000;
	//插件中此方法不兼容ie 要修复一下 修复代码如下
	/*
	scheduler.getEvents = function(from, to) {
		var result = [];
		for (var a in this._events) {
			try{
				var ev = this._events[a];
				var start = new Date(ev.start_date).getTime();
				var end = new Date(ev.end_date).getTime();
				if((start < to) && (end > from)){
					result.push(ev);
				}
			}catch(e){}
			//原来代码
			//if (ev && ( (!from && !to) || (ev.start_date < to && ev.end_date > from) ))
				//result.push(ev);
		}
		return result;
	};
	*/
	var evs = scheduler.getEvents(from, to);
	if(evs.length != 0){
		var type = [];
		for(var i in evs){
			var o = evs[i];
			type[i] = o.type;
		}
		type = array_unique(type);
		var css = '';
		switch(type.length){
			//送签或出签
			case 1:
				//送签
				if(type[0] == 1){
					css = 'dhx_month_day_send_signed';
				}else if(type[0] == 2){//出签
					css = 'dhx_month_day_out_signed';
				}else{//没有定义
					css = ''
				}
				break;
			//送/出签并存
			case 2:
				css = 'dhx_month_day_send_out_signed';
				break;
		}
		return css;
	}
	return "";
}

/**
 * 弹出工作计划详细信息框
 * 
 * @param int id 工作计划编号
 */
scheduler.showLightbox = function(id) {
	var ev = scheduler.getEvent(id);
	scheduler.startLightbox(id, getDataFormHtmlObject());
	
	//把数据填充到表单
	var eles = getDataFormElementsObject();
	jQuery.each(eles, function(i, o){
		o.value = (ev[o.id] || ev.text);
	});
};

/**
 * 把表单中的数据保存到scheduler的event对象中
 */
function saveFormDataToEvent() {
	var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
	
	//把表单的数据填充到scheduler的event对象
	var eles = getDataFormElementsObject();
	jQuery.each(eles, function(i, o){
		//工作计划显示的标题，不能删除
		if(i == 0) ev.text = o.value;
		ev[o.id] = o.value;
	});
	
	//隐藏表单
	scheduler.endLightbox(true, getDataFormHtmlObject());
}

/**
 * 取消
 */
function closeForm() {
	//隐藏表单
	scheduler.endLightbox(false, getDataFormHtmlObject());
}

/**
 * 删除
 */
function deleteEvent() {
	if(confirm('确定要删除吗？')){
		var event_id = scheduler.getState().lightbox_id;
		scheduler.endLightbox(false, getDataFormHtmlObject());
		scheduler.deleteEvent(event_id);
	}
}

/**
 * 读取工作计划
 * 
 * 1、服务器端返回json格式的数据
 * 2、对象的属性名都是固定的，id计划编号，start_date计划开始时间，end_date计划结束时间，text计划内容，数据格式如下：
 * 	[
 * 	 {"id":1,"start_date":"04.29.2013 01:10:00","end_date":"04.29.2013 01:40:00","text":"a"},
 * 	 {"id":2,"start_date":"4.30.2013 01:10:00","end_date":"4.30.2013 01:40:00","text":"b"}
 *  ]
 * 3、注意start_date，end_date的日期格式，格式是 "月.日.年 时:分:秒"
 */
function loadData(){
	jQuery.ajax({
		url:'wp.php?m=read',
		data:{},
		type:'post',
		dataType:'json',
		success:function(data){
			if(data != '') scheduler.parse(data, 'json');
		}
	});
}
loadData();

/**
 * 增加工作计划
 */
scheduler.attachEvent("onEventAdded", function(event_id, event_object){
	var data = getWorkPlanData(event_object);
	var r = sendRequest('wp.php?m=add', data);
	if(!r) scheduler.detachEvent(event_id);
});

/**
 * 编辑工作计划
 */
scheduler.attachEvent("onEventChanged", function(event_id, event_object){
	var data = getWorkPlanData(event_object);
	var r = sendRequest('wp.php?m=update', data);
	if(!r) scheduler.detachEvent(event_id);
});

/**
 * 工作计划详情中的保存按钮
 * 
 * 1、可以验证数据，通过验证返回true，否则返回false
 * 2、返回true会自动触发onEventChanged事件
 */
scheduler.attachEvent("onEventSave", function(id, data, is_new_event){
	return true;
});

/**
 * 删除工作计划
 * 
 * 1、返回值boolean，true删除成功，false删除失败
 * 2、如果是true，scheduler会自动把工作计划移除
 */
scheduler.attachEvent("onBeforeEventDelete", function(event_id){
	var r = sendRequest('wp.php?m=delete', {'id':event_id});
	return r;
});

/**
 * 工作计划鼠标滑动事件
 * 鼠标滑动到工作计划上 弹出一个层
 * 层里展示工作计划的内容
 */
var detailDialog = null;
scheduler.attachEvent("onMouseMove", function (event_id, native_event_object){
    var ev = scheduler.getEvent(event_id);
    if(ev){
    	if(detailDialog == null) detailDialog = new Dialog(); 
    	detailDialog.Width = 200;
    	detailDialog.Height = 100;
    	detailDialog.Modal = false;
    	detailDialog.Title = ev.text;
    	detailDialog.Top = native_event_object.clientY +10;
    	detailDialog.Left = native_event_object.clientX + 10;
    	var detailHtml = jQuery("#wp_data_detail").html();
    	for(var i in ev){
    		var td = jQuery("td[id='" + i + "']");
    		var v = ev[i];
    		td.html(v);
    		if(i == 'type'){
    			if(v == 1){
    				td.html('送签');
    			}else if(v == 2){
    				td.html('出签');
    			}else{
    				td.html('没有设置');
    			}
    		}
    	}
    	detailDialog.InnerHtml = detailHtml;
    	detailDialog.show();
    }else{
    	detailDialog.close();
    	detailDialog = null;
    }
});

/**
 * 往服务器发送请求
 * 
 * 1、post请求方式
 * 
 * @param string url 请求地址
 * @param object data 请求参数
 */
function sendRequest(url, data){
	var r = false;
	jQuery.ajax({
		url:url,
		type:'post',
		data:data,
		async:false,
		dataType:'json',
		success:function(data){
			alert(data.msg);
			r = data.success;
		}
	});
	return r;
}

/**
 * 过滤数组重复元素
 * 
 * @param array data 被过滤数组
 * @returns array 过滤后的数组
 */
function array_unique(data){
	var data = data || [];
	var obj = {};
	for(var i=0,j=data.length; i<j; i++){
		var v = data[i];
		if(typeof(obj[v]) == 'undefined'){
			obj[v] = 1;
		}
	}
	data.length = 0;
	for(var i in obj){
		data[data.length] = i;
	}
	return data;
}

/**
 * 获取工作计划中所需数据
 * 
 * @param object event 工作计划数据对象
 * @returns object 对象
 */
function getWorkPlanData(event){
	var data = {};
	
	//日历固定数据，不能删除
	data.id = event.id;
	data.start_date = event.start_date;
	data.end_date = event.end_date;
	
	//获取表单中的数据
	var eles = getDataFormElementsObject();
	jQuery.each(eles, function(i, o){
		//设置日历中显示的标题，不能删除
		if(i == 0) data.text = event[o.id];
		data[o.id] = event[o.id];
	});
	
	return data;
}

/**
 * 获取表单的数据元素对象
 * 
 * @returns object 
 */
function getDataFormElementsObject(){
	return jQuery("input[type='text'], select");
}

/**
 * 获取表单html对象
 * 
 * @returns object 元素对象
 */
function getDataFormHtmlObject() { 
	return jQuery("#wp_data_form").get(0); 
};

//初始化日历
scheduler.init('scheduler_here', null, "week");

五、php代码

<?php
include_once 'db.php';

//增加
function add(){
	$success = true;
	$msg = '添加成功';
	try {
		$db = DB::getInstance();
		$data = getWorkPlanData();
		$db->insert('work_plan', $data);
	}catch (Exception $err){
		$success = false;
		$msg = $err->getMessage();
	}
	echo json_encode(array('success' => $success, 'msg' => $msg));
}

//读取
function read(){
	$db = DB::getInstance();
	$data = $db->fetchAll('select * from work_plan where user_id = 1');
	echo json_encode($data);
}

//编辑
function update(){
	$success = true;
	$msg = '编辑成功';
	try {
		$db = DB::getInstance();
		$data = getWorkPlanData();
		$db->update('work_plan', $data, " id={$data['id']} ");
	}catch (Exception $err){
		$success = false;
		$msg = $err->getMessage();
	}
	echo json_encode(array('success' => $success, 'msg' => $msg));
}

//删除
function delete(){
	$success = true;
	$msg = '删除成功';
	try {
		$db = DB::getInstance();
		$id = $_POST['id'];
		$data = $db->delete('work_plan', " id={$id} ");
	}catch (Exception $err){
		$success = false;
		$msg = $err->getMessage();
	}
	echo json_encode(array('success' => $success, 'msg' => $msg));
}

//获取工作计划数据
function getWorkPlanData(){
	return array(
		'id' => $_POST['id'],
		'start_date' => formatDate($_POST['start_date']),
		'end_date' => formatDate($_POST['end_date']),
		'text' => $_POST['text'],
		'title' => $_POST['title'],
		'intro' => $_POST['intro'],
		'content' => $_POST['content'],
		'type' => $_POST['type'],
		'user_id' => 1
	);
}

/**
 * 格式化日期
 * 
 * 1、为了方便客户端处理要把日期格式化一下
 * 2、把日期格式化成 "月.日.年 时:分:秒"
 * 
 * @param string $date 格林尼治标准时间，如：Mon Apr 22 2013 00:00:00 GMT+0800
 * @return string 格式化后的时间，如：05.05.2013 15:43:14
 */
function formatDate($date){
	//谷歌浏览器要对日期过滤
	$date = str_ireplace(" (中国标准时间)", '', $date);
	$date = trim($date);
	return date('m.d.Y H:i:s', strtotime($date));
}

$method = $_GET['m'];
$method();

iamjunjie
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript事件日历 dhtmlxScheduler官方示例
04-07
dhtmlxScheduler是一个JavaScript事件日历,允许您添加一个类似google调度程序到您的web应用程序或网站。直观的拖放界面允许最终用户快速管理事件和约会不同的观点:一天,周,月,年,议程,时间表,等。非常轻量级(约20 kb gzip),高度可定制的,和快速,dhtmlxScheduler提供了一种快速的方法来添加一个基于ajax的web页面上的事件日历。
js日历控件实现及日程安排
08-07
js写的日历显示的控件，显示本月日历，及上一月下一月日历查看，可以扩展实现当月日程安排、
dhtmlxscheduler使用
lcpstyle的博客
05-05 809
　　最近项目中需要一个日程管理的功能，找啊找，先是用的fullcalendar，不知道是人品还是版本问题，events接受后台JSON参数总是出错，试了许多方法，也没有试出什么结果来。所以果断换到了dhtmlxscheduler，这个插件网上搜索结果较少，我也是自己从官方网站的文档自己慢慢摸索，做了一个不算日程表的日程表。主要是样式这些还没搞懂，对于英文实在缺乏的我感到很吃力。现在已经萌生了重拾...
React中的 Scheduler
最新发布
hawk2014bj的博客
06-10 1008
React 调度是用来调度 fiber 任务的，任务可以暂停并将控制权交给浏览器，调度的核心是通过 Priority Queue 实现，根据重要程度进行排序，过期时间作为排序字段，先到期的先执行。
dhtmlxscheduler
04-14
最近在研究 dhtmlxscheduler想要做一个记账的web应用，目前实现了从数据库查询数据和添加数据
dhtmlxScheduler
12-20
dhtmlxScheduler是一个JavaScript日程安排控件,类似于Google日历。日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间。事件可以按天,周,月三个种视图显示。
js-scheduler
03-19
05工作日排程 你的任务 创建一个简单的日历应用程序，该应用程序允许用户通过修改启动程序代码来保存一天中每个小时的事件。该应用程序将在浏览器中运行，并具有由jQuery支持的动态更新HTML和CSS。 您需要使用库来处理日期和时间。确保仔细阅读文档，并专注于在浏览器中使用Moment.js。
JS Scheduler - DayPilot
我的英文站点：https://iorilan.medium.com/
12-29 2712
JS Scheduler - DayPilot
JS实现日历
热门推荐
仄言的博客
12-13 1万+
JS 实现日历 最近在学JS，分享一些使用js实现的网页，后续还会更一些关于js的例子，话不多说，直接附上源码，源码上有注释。 js 实现日历主要 运用Date函数,这里就不在多讲Date的用法，因为并不是很难，所以想要了解的朋友可以去网上自行搜索，有很多的讲解！ &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&a
dhtmlx.Scheduler 5.3.13
控件与插件之大全
03-27 785
功能丰富的 JavaScript 调度程序 - 事件日历 JavaScript Scheduler 是一个类似于 Google 的事件日历组件，具有 10 个视图和许多用于预约的功能。 干净的用户界面和可定制的外观。开箱即用的所有必需功能的完美调度解决方案。 时间线视图 我们的 JavaScript 事件日历最需要的 PRO 功能之一是时间轴视图。在时间轴视图的帮助下，您可以使用从左到右排列的单独时间轴水平地可视化事件。 所有时间轴模式下的自定义 HTML 内容 PRO 版允许您为时间轴视图的所
javascript写的可直接打印成A4纸的日历，方便每月填写工作计划。左右键切换月份。
09-05
javascript写的可直接打印成A4纸的日历，方便每月填写工作计划。左右键切换月份。 个人原创，自己平时上班时就在用，很方便。
dhtmlxScheduler JavaScript日程安排控件
03-26
dhtmlxScheduler是一个JavaScript日程安排控件，类似于Google日历。日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间。事件可以按天，周，月，年等多种视图显示。
JS实现日程安排实例
11-22
JS实现日程安排完整例子，简洁大气的日程安排Jquery特效。JS实现日程安排完整例子，简洁大气的日程安排Jquery特效。
javaScript日程表
07-05
javaScript写的日程管理页面，javaScript写的日程管理页面，javaScript写的日程管理页面
schedulerjs:一个承诺执行流控制库
05-01
scheduler.js Promise的包装器，用于控制执行流程 执照 根据MIT许可发布 测验 安装mocha： npm install -g mocha开始测试： npm test 顺序 序列将在意甲执行承诺 例子 ： let seq = new Sequence ( ) ; seq . next ( ( ) => { return promise ; } ) . delay ( 500 ) . next ( ( ) => { return new Promise ( ( resolve , reject ) => { resolve ( ) ; } ) ; } ) . start ( ) ; seq . on ( 'started' , ( ) => {
Dhtmlx_Scheduler分析
weixin_30514745的博客
08-01 476
Dhtmlx Scheduller（以下简称ds）代码其实分成了很多内容，主要包括了四个对象 Dthmlx dhtmlxAjax dhmltxGridObject Scheduler 以及很多其他方法包括jquery兼容性处理,_CreatBox()为首的一些列创建窗口的方法，button(),callback(),getofferSetSum(),geturlSymbol()等一系列特...
计划任务日历界面JavaScript组件
ICode联盟
09-20 226
下载地址一个全功能的事件日历JavaScript库,允许您查看和管理事件(如计划任务、任命)响应日历界面。 dd:
DHTMLX Scheduler PRO 6.0.5 Crack
控件与插件之大全
12-07 645
DHTMLX Scheduler 是一个 JavaScript 日程安排日历，具有 10 个视图和可定制的界面，用于开发任何类型的日程安排应用程序。
dhtmlxScheduler vue
04-27
dhtmlxScheduler是一个功能强大的JavaScript日程安排库，可以用于创建交互式的日程安排和事件管理应用程序。它提供了丰富的功能，包括日历视图、周视图、月视图、时间轴视图等，可以轻松地显示和管理事件、任务和预约。 dhtmlxScheduler可以与Vue框架无缝集成，通过使用dhtmlxScheduler Vue组件，您可以在Vue应用程序中轻松地使用dhtmlxScheduler。该组件提供了与Vue的双向数据绑定、事件处理和自定义模板等特性的集成。 使用dhtmlxScheduler Vue，您可以通过简单的配置和自定义来创建具有丰富交互性和可定制性的日程安排应用程序。您可以轻松地添加、编辑和删除事件，设置事件的时间、日期和其他属性，并通过自定义模板来呈现事件的详细信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值