日历控件:

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 下载网站指定文件

    Shell脚本,用来从网站下载指定文件名的文件.先判断本地这个文件是否存在,如果存在则忽略,不存在则从远程服务器上下载,下载成功后本地的批次号累加1,然后使用新的批次号继续下载新文件. #!/bin/ ...

  2. 查看Window系列本地账户密码

    mimikatz,很出名的查看Window本地账户密码(经测试,不支持探测Window在线账户认证密码的探测) github: https://github.com/gentilkiwi/mimika ...

  3. Arduino和C51开发DS1302时钟

    技术:51单片机.Arduino.DS1302时钟.串口通信   概述 本文实现51单片机和Arduino串口实时显示时钟功能,让读者对DS1302能够更好的理解,这次功能也和上节课学到的串口通信运用 ...

  4. Mac OS X上安装配置apache服务器

    说明:Mac在安装完成Mac系统的时候它已经自带了apache服务器,接下来就是配置和将它启动运行了.那么接下来要做的事情就是: 1.配置apache的配置文件 2.设置虚拟主机 启动并查看apach ...

  5. spring依赖注入之手工装配

    2010-09-05  在spring中手工装配依赖对象,可以有两种方式: 1,在spring配置文件中,通过bean节点下配置,比如: <bean id="service" ...

  6. GCD 容易让人迷惑的几个问题

    写在开头: 本文旨在阐述一些大家容易产生迷惑的GCD相关内容,如果是需要了解一些GCD概念或者基础用法,可以看看这两篇文章:GCD 扫盲篇.巧谈GCD . 目录: 迷惑一:队列和线程的关系 迷惑二:G ...

  7. apache配置中ProxyPassReverse指令的含义

    apache中的mod_proxy模块主要作用就是进行url的转发,即具有代理的功能.应用此功能,可以很方便的实现同tomcat等应用服务器的整合,甚者可以很方便的实现web集群的功能. 例如使用ap ...

  8. 如何用STAF进行自动化测试分布式运行

    本文的目的在于引导读者去了解STAF及如何调用其接口去实现自动化测试的分布式动行. 提到分布式运行,很多人想到了Jenkins,Jenkins里面有个node插件,可以去分派任务给slave,Jenk ...

  9. TextSharp详情

    TextSharp是一个生成Pdf文件的开源项目,最近在项目中有使用到这个项目,对使用中的经验作一个小结. ITextSharp中相关的概念: 一.Document 这个对象有三个构造函数: 隐藏行号 ...

  10. java 传址或传值

    原文链接: http://blog.csdn.net/jdluojing/article/details/6962893 java是传值还是传址,这个问题已经讨论了很久了,有些人说是传值的,有些人说要 ...