日历控件:

https://fullcalendar.io/docs/

https://fullcalendar.io/docs/event_data/events_function/

https://fullcalendar.io/docs/event_data/Event_Object/

https://fullcalendar.io/docs/mouse/eventClick/

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8' />

<link href='../fullcalendar.css' rel='stylesheet' />

<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />

<script src='../lib/moment.min.js'></script>

<script src='../lib/jquery.min.js'></script>

<script src='../fullcalendar.min.js'></script>

<style>

.event-class{

	display:inline-block;

	color: yellow;

	width:100px;

	height:100px;

}

</style>

<script>

	$(document).ready(function() {

		$('#calendar').fullCalendar({

			header: {

				left: 'prev,next today',

				center: 'title',

				right: 'month,agendaWeek,agendaDay'

			},

			defaultDate: '2015-02-12',

			businessHours: true, // display business hours

			editable: true,

			events: function( start, end, timezone, callback ) {

				console.log('start:'+start+',end:'+end)

				console.log('start:'+start.unix()+',end:'+end.unix())

				var evts = [

				{

					title: '事件Business Lunch',	// Required

					start: '2015-02-03T13:00:00',	// Required

					className: 'event-class',

					constraint: 'businessHours'

				},

				{

					title: 'Meeting',				// Required

					start: '2015-02-13T11:00:00',	// Required

					constraint: 'availableForMeeting', // defined below

					color: 'red'

				}];

				callback(evts);

			},

			eventClick: function(calEvent, jsEvent, view) {

				alert('Event: ' + calEvent.title);

				alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

				alert('View: ' + view.name);

				// change the border color just for fun

				$(this).css('border-color', 'red');

			}

			/*

			events: [

				{

					title: '事件Business Lunch',

					start: '2015-02-03T13:00:00',

					constraint: 'businessHours'

				},

				{

					title: 'Meeting',

					start: '2015-02-13T11:00:00',

					constraint: 'availableForMeeting', // defined below

					color: '#257e4a'

				},

				{

					title: 'Conference',

					start: '2015-02-18',

					end: '2015-02-20'

				},

				{

					title: 'Party',

					start: '2015-02-29T20:00:00'

				},

				// areas where "Meeting" must be dropped

				{

					id: 'availableForMeeting',

					start: '2015-02-11T10:00:00',

					end: '2015-02-11T16:00:00',

					rendering: 'background'

				},

				{

					id: 'availableForMeeting',

					start: '2015-02-13T10:00:00',

					end: '2015-02-13T16:00:00',

					rendering: 'background'

				},

				// red areas where no events can be dropped

				{

					start: '2015-02-24',

					end: '2015-02-28',

					overlap: false,

					rendering: 'background',

					color: '#ff9f89'

				},

				{

					start: '2015-02-06',

					end: '2015-02-08',

					overlap: false,

					rendering: 'background',

					color: '#ff9f89'

				}

			]

			*/

		});

	});

</script>

<style>

	body {

		margin: 40px 10px;

		padding: 0;

		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

		font-size: 14px;

	}

	#calendar {

		max-width: 900px;

		margin: 0 auto;

	}

</style>

</head>

<body>

	<div id='calendar'></div>

</body>

</html>

　　

日期时间库：

http://momentjs.com/

Parse, validate, manipulate, and display dates and times in JavaScript.

//Format Dates

moment().format('MMMM Do YYYY, h:mm:ss a');

moment().format('dddd');

moment().format("MMM Do YY");

moment().format('YYYY [escaped] YYYY');

moment().format();

//Relative Time

moment("20111031", "YYYYMMDD").fromNow();

moment("20120620", "YYYYMMDD").fromNow();

moment().startOf('day').fromNow();

moment().endOf('day').fromNow();

moment().startOf('hour').fromNow();

//Calendar Time

moment().subtract(10, 'days').calendar();

moment().subtract(6, 'days').calendar();

moment().subtract(3, 'days').calendar();

moment().subtract(1, 'days').calendar();

moment().calendar();

moment().add(1, 'days').calendar();

moment().add(3, 'days').calendar();

moment().add(10, 'days').calendar();

//Multiple Locale Support

moment.locale();

moment().format('LT');

moment().format('LTS');

moment().format('L');

moment().format('l');

moment().format('LL');

moment().format('ll');

moment().format('LLL');

moment().format('lll');

moment().format('LLLL');

moment().format('llll');

PS:

当前日期时间格式化:

moment().format('YYYY-MM-DD HH:mm:ss.SSS')

ref: http://momentjs.com/docs/#/displaying/

js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js的更多相关文章

  1. jQuery 日历控件 FullCalendar 初识

    最近有个日程管理的需求,就学习了一下 FullCalendar 控件的一些基本知识,本文不是详细介绍该控件的 API 的文档,而是记录本人使用过程中的一些学习情况. 先看一下效果图  月/周/日视图 ...

  2. 纯js开发防win7日历控件

    不久前项目开发中遇到需要用js实现选择日期的需求,百度了下,确实一大把一大把的,但多少还是有些不符合当前需求,遂down了一份最接近的,然后修修改改,基本符合了... 先上几张效果图~~~ 需要输入时 ...

  3. Jquery UI的日历控件datepicker限制日期(转)

    网上找到这篇文章:http://www.jssay.com/blog/index.php/2010/04/27/%E5%A6%82%E4%BD%95%E7%A6%81%E7%94%A8datepick ...

  4. layui日历控件设置选择日期不能超过当前日期

    layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max ...

  5. C#中使用DateTimePicker控件显示修改日期时间

    1.只显示日期   默认就是   2.只显示时间   修改属性 Format 设为Time ShowUpDown设为true   3.同时显示日期时间   Format设为Custom CustomF ...

  6. [Xcode 实际操作]四、常用控件-(11)UIDatePicker日期时间选择器

    目录:[Swift]Xcode实际操作 本文将演示日期拾取器的使用. 使用日期拾取器,可以快速设置和选择日期与时间. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] ...

  7. JS实现日历控件选择后自动填充

    最近在做人事档案的项目,在做项目的初期对B/S这块不是很熟悉,感觉信心不是很强,随着和师哥同组人员的交流后发现,调试程序越来越好了,现在信心是倍增,只要自己自己踏实的去研究.理解代码慢慢的效果就出来了 ...

  8. 2.23 js处理日历控件（修改readonly属性）

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  9. selenium+Python(Js处理日历控件)

    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉 ...

随机推荐

  1. jQuery get selected text from SELECT (or DROPDOWN) list box

    Most of the time in JavaScript we want to do following things with Select (or dropdown) list box. – ...

  2. VS编译 x64版本zlib库

    编译的过程倒也不是很难.我把编译的源码和脚本及说明都放在gitee上了. 详细的可以见这里 https://gitee.com/solym/zlib-1.2.11.git 可以参考这些文章 win10 ...

  3. Windows2008|2003超出最大连接数

    问题描述: 终端服务器超出最大允许连接数的解决方法 00.以管理员回话形式登录(本质踢掉他人) mstsc  /v:IP  /console mstsc /admin /v:ip mstsc /con ...

  4. FlipViewDemo

    error: Resource entry white is already defined. error: Resource entry transparentBlack is already de ...

  5. 轻量级桌面 openbox + tint2 + conky + stalonetray + pcmanfm + xcompmgr

    openbox+tint2+pnmixer+conky=轻量级archlinux桌面环境设置备忘 缘起 机器上的Ubuntu 12.04有一段时间没有使用了,最近在用的时候发现频繁死机的情况,开始以为 ...

  6. 【DeepLearning】Exercise:Vectorization

    Exercise:Vectorization 习题的链接:Exercise:Vectorization 注意点: MNIST图片的像素点已经经过归一化. 如果再使用Exercise:Sparse Au ...

  7. POJ 1815 Friendship （Dinic 最小割）

    Friendship Time Limit: 2000MS   Memory Limit: 20000K Total Submissions: 8025   Accepted: 2224 Descri ...

  8. 【Spring】Spring之事务处理

    编程式事务 /** * 1. 根据DataSource去创建事务管理器 * 构造方法 , 参数1. DataSource */ DataSourceTransactionManager txManag ...

  9. centos 为OPENJDK配置JAVA_HOME环境变量，安装MAVEN

    1.安装开发者工具包 yum install java--openjdk-devel -y 2.配置环境变量 vim /etc/profile export JAVA_HOME=/usr/lib/jv ...

  10. Oracle 12C -- 不同容器之间切换

    1.使用connect SQL> show con_name; CON_NAME ------------------------------ CDB$ROOT SQL> connect ...