日历控件:

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. java 判断是否为纯数字

      java 判断是否为数字格式 CreateTime--2017年12月1日10:37:00 Author:Marydon java 判断是否为数字格式 /** * 判断是否为数字格式不限制位数 * ...

  2. mysql日期/时间转换为字符串

    将日期时间2016-05-13 16:07:50转化为字符串20160513 date_format select phone,  date_format(time, '%Y%m%d%H%i%s') ...

  3. jQuery 绑定事件及移除绑定事件方法和元素事件列表

    1.jQuery Event 事件:      ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载 ...

  4. Jquery 获取对象的几种方式（转载）

    1.先讲讲JQuery的概念 JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队.其实 JQuery是一个JavaScript的类 ...

  5. 1078. Hashing (25)【Hash + 探測】——PAT (Advanced Level) Practise

    题目信息 1078. Hashing (25) 时间限制100 ms 内存限制65536 kB 代码长度限制16000 B The task of this problem is simple: in ...

  6. （原+转）Ubuntu16.04软件中心闪退及wifi消失

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6321889.html 参考网址: http://blog.csdn.net/felcon/articl ...

  7. linux shell 脚本攻略学习5---find命令详解

    1.find命令详解 语法: find base_path#base_path可以是任何位置,find会从该位置向下找 实例: amosli@amosli-pc:~$ find /home/amosl ...

  8. idea 不下载jar包

    是因为用的gradle 然后没有设置gradle jvm

  9. React(0.13) 利用componentDidMount 方法设置一个定时器

    <html> <head> <title>hello world React.js</title> <script src="build ...

  10. 【Spring】Spring+SpringMVC+MyBatis框架的搭建

    1,SSM的简介 SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. 其中s ...