日历控件:

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/

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../fullcalendar.css' rel='stylesheet' />
  6. <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
  7. <script src='../lib/moment.min.js'></script>
  8. <script src='../lib/jquery.min.js'></script>
  9. <script src='../fullcalendar.min.js'></script>
  10. <style>
  11. .event-class{
  12. 	display:inline-block;
  13. 	color: yellow;
  14. 	width:100px;
  15. 	height:100px;
  16. }
  17. </style>
  18. <script>
  19.  
  20. 	$(document).ready(function() {
  21.  
  22. 		$('#calendar').fullCalendar({
  23. 			header: {
  24. 				left: 'prev,next today',
  25. 				center: 'title',
  26. 				right: 'month,agendaWeek,agendaDay'
  27. 			},
  28. 			defaultDate: '2015-02-12',
  29. 			businessHours: true, // display business hours
  30. 			editable: true,
  31.  
  32. 			events: function( start, end, timezone, callback ) {
  33. 				console.log('start:'+start+',end:'+end)
  34. 				console.log('start:'+start.unix()+',end:'+end.unix())
  35. 				var evts = [
  36. 				{
  37. 					title: '事件Business Lunch',	// Required
  38. 					start: '2015-02-03T13:00:00',	// Required
  39. 					className: 'event-class',
  40. 					constraint: 'businessHours'
  41. 				},
  42. 				{
  43. 					title: 'Meeting',				// Required
  44. 					start: '2015-02-13T11:00:00',	// Required
  45. 					constraint: 'availableForMeeting', // defined below
  46. 					color: 'red'
  47. 				}];
  48. 				callback(evts);
  49. 			},
  50.  
  51. 			eventClick: function(calEvent, jsEvent, view) {
  52. 				alert('Event: ' + calEvent.title);
  53. 				alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
  54. 				alert('View: ' + view.name);
  55.  
  56. 				// change the border color just for fun
  57. 				$(this).css('border-color', 'red');
  58. 			}
  59.  
  60. 			/*
  61. 			events: [
  62. 				{
  63. 					title: '事件Business Lunch',
  64. 					start: '2015-02-03T13:00:00',
  65. 					constraint: 'businessHours'
  66. 				},
  67. 				{
  68. 					title: 'Meeting',
  69. 					start: '2015-02-13T11:00:00',
  70. 					constraint: 'availableForMeeting', // defined below
  71. 					color: '#257e4a'
  72. 				},
  73. 				{
  74. 					title: 'Conference',
  75. 					start: '2015-02-18',
  76. 					end: '2015-02-20'
  77. 				},
  78. 				{
  79. 					title: 'Party',
  80. 					start: '2015-02-29T20:00:00'
  81. 				},
  82.  
  83. 				// areas where "Meeting" must be dropped
  84. 				{
  85. 					id: 'availableForMeeting',
  86. 					start: '2015-02-11T10:00:00',
  87. 					end: '2015-02-11T16:00:00',
  88. 					rendering: 'background'
  89. 				},
  90. 				{
  91. 					id: 'availableForMeeting',
  92. 					start: '2015-02-13T10:00:00',
  93. 					end: '2015-02-13T16:00:00',
  94. 					rendering: 'background'
  95. 				},
  96.  
  97. 				// red areas where no events can be dropped
  98. 				{
  99. 					start: '2015-02-24',
  100. 					end: '2015-02-28',
  101. 					overlap: false,
  102. 					rendering: 'background',
  103. 					color: '#ff9f89'
  104. 				},
  105. 				{
  106. 					start: '2015-02-06',
  107. 					end: '2015-02-08',
  108. 					overlap: false,
  109. 					rendering: 'background',
  110. 					color: '#ff9f89'
  111. 				}
  112. 			]
  113. 			*/
  114. 		});
  115.  
  116. 	});
  117.  
  118. </script>
  119. <style>
  120.  
  121. 	body {
  122. 		margin: 40px 10px;
  123. 		padding: 0;
  124. 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  125. 		font-size: 14px;
  126. 	}
  127.  
  128. 	#calendar {
  129. 		max-width: 900px;
  130. 		margin: 0 auto;
  131. 	}
  132.  
  133. </style>
  134. </head>
  135. <body>
  136.  
  137. 	<div id='calendar'></div>
  138.  
  139. </body>
  140. </html>

　　

日期时间库：

http://momentjs.com/

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

  1. //Format Dates
  2. moment().format('MMMM Do YYYY, h:mm:ss a');
  3. moment().format('dddd');
  4. moment().format("MMM Do YY");
  5. moment().format('YYYY [escaped] YYYY');
  6. moment().format();
  7.  
  8. //Relative Time
  9. moment("20111031", "YYYYMMDD").fromNow();
  10. moment("20120620", "YYYYMMDD").fromNow();
  11. moment().startOf('day').fromNow();
  12. moment().endOf('day').fromNow();
  13. moment().startOf('hour').fromNow();
  14.  
  15. //Calendar Time
  16. moment().subtract(10, 'days').calendar();
  17. moment().subtract(6, 'days').calendar();
  18. moment().subtract(3, 'days').calendar();
  19. moment().subtract(1, 'days').calendar();
  20. moment().calendar();
  21. moment().add(1, 'days').calendar();
  22. moment().add(3, 'days').calendar();
  23. moment().add(10, 'days').calendar();
  24.  
  25. //Multiple Locale Support
  26. moment.locale();
  27. moment().format('LT');
  28. moment().format('LTS');
  29. moment().format('L');
  30. moment().format('l');
  31. moment().format('LL');
  32. moment().format('ll');
  33. moment().format('LLL');
  34. moment().format('lll');
  35. moment().format('LLLL');
  36. 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. 8、redis之事务1-redis命令

    一.概述:      和众多其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中,MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事务的基石.相信对有 ...

  2. 12、java5锁java.util.concurrent.locks.Lock之ReentrantLock

    JDK文档描述: public interface LockLock 实现提供了比使用 synchronized 方法和语句可获得的更广泛的锁定操作.此实现允许更灵活的结构,可以具有差别很大的属性,可 ...

  3. js中setTimeout、setInterval、 clearInterval方法简介

    setTimeout setTimeout(code, millisec) 用于在指定的毫秒数后调用函数或计算表达式. 说明: setTimeout()只执行一次code.如果要多次调用,要使用set ...

  4. android软键盘弹出引起的各种不适终极解决方案

    android软键盘弹出引起的各种不适终极解决方案 以下描述如何解决ListView高度小于0时出现的UI问题. 创建RelativeLayout的子类TxrjRelativeLayout publi ...

  5. 在子线程中发送短信，静态注册SentMsgReceiver。

    1. 应该在子线程中执行发送短信的操作. 如果没有在子线程中发送短信会出现错误:点击发送短信之后,立即跳转到其他界面,那么这次发送短信可能就会失败! 请注意往子线程方法中传入外部的实参必须由final ...

  6. ios中一级导航

    效果图 第一步先下载文件 http://pan.baidu.com/share/link?shareid=2148445651&uk=9237761877 将目录引入到xcode中 在xcod ...

  7. 使用Thrift让Python为Java提供服务

    Thrift是基于TCP的,谷歌的GRPC是基于HTTP的.Thrift和GRPC都是比直接写个web接口进行调用更完美的方式,最明显的一点就是:我们可以定义结构体,避免了手动解析的过程. 但是,在将 ...

  8. java 结束程序进程 代码

    结束firefox的进程,一句代码就够了,如下: Runtime.getRuntime().exec("taskkill /F /IM firefox.exe"); 结束qq: R ...

  9. 树莓派进阶之路 (005) - 树莓派Zsh安装脚本(原创)

    zsh.sh #!/bin/bash cd #安装zsh sudo apt-get install zsh #查看zsh cat /etc/shells #更改zsh chsh -s /bin/zsh ...

  10. HDU 1850 Being a Good Boy in Spring Festival （Nim博弈）

    Being a Good Boy in Spring Festival Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...