日历控件:

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. 写了一个简单的Linux Shell用来下载文件

    #!/bin/sh ; i<; i=i+ )); do # 利用spider来探测请求的资源是否存在,并把请求的结果写入到一个文件 wget --spider --http-user=usern ...

  2. Azure编程笔记（3）：用Fiddler调试Azure的应用程序

     内容提要 Azure的服务是通过RESTfulAPI提供的. 尽管Azure针对非常多编程语言都提供了SDK.但这些SDK也仅仅是RESTfulAPI的一层封装. 在调用SDK或者RESTful ...

  3. 【DB2】慎用nickname,可能会引起效率较低

    在使用db2的时候,在A库建立了nickname,指向B库的物理表(数据量800多万),现在使用程序(JDBC)连接数据库,并计算指标,但是发现效率很低. 解决办法: 删除A库中的nickname,在 ...

  4. Openwrt中用iftop查看网络流量情况

    iftop可以查看指定网卡上的流量情况, 命令说明 iftop: display bandwidth usage on an interface by host Synopsis: iftop -h ...

  5. 转: 在Ogre中使用Havok物理引擎(源码)

    作者:CYM 众所周知Ogre则是评价很高的一款图形渲染引擎,Havok则是世界一流的物理引擎,今天花了点时间将两者结合在了一块,做了个Demo 由于国内对Havok的研究似乎很少,网上也找不到多少资 ...

  6. UVM：8.4.3 用factory 机制创建实例的接口

    1.create_object_by_name,依据类名字创建object,原型: 一般仅仅用第一个: 2.create_object_by_type.依据类型创建一个object,原型: 一般仅仅用 ...

  7. C#几个小知识点

    一.float数据类型 小数在C#中需要用浮点型表示,浮点值就是.后面的小数点.C#语言中有两种小数类型,分别为32位单精度浮点型(float) 和64位双精度浮点型(double).其中精度指的是小 ...

  8. hihocoder217周 树形DP

    题目链接 一棵树,树中包含TRUE.FALSE.AND.OR四种结点,其中TRUE和FALSE是叶子结点,AND和OR结点的儿子包含多个结点,现在要求执行最少次数的以下操作: 把AND变成OR 把OR ...

  9. 一台电脑存放多个git账户的多个rsa秘钥(转)

    如何在一个电脑上存储多个git账户生成的多份rsa秘钥,实现多个账户同时使用配置的情况?今天,不幸又再次遇到这个问题. 问题描述 公司最近在开发一款开源产品,项目被托管在github上,但是公司内部一 ...

  10. Windbg找出memory leak的一种笨办法

    以下内容是转自 http://www.cnblogs.com/fbird/p/5889596.html 以前做项目碰到过一个问题,在客户的站点上面发现有严重的内存泄漏.幸运的是我们找到了重现的步骤,一 ...