日历控件:

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 Map常用方法封装

      java Map常用方法封装 CreationTime--2018年7月16日15点59分 Author:Marydon 1.准备工作 import java.util.HashMap; impo ...

  2. java 增量运算符

    //java 增量运算符 public class Test16{ public static void main(String args[]) { int x1=10; x1+=3; //x1=x1 ...

  3. topshelf 开发windows 服务资料

    官方配置 http://docs.topshelf-project.com/en/latest/configuration/config_api.html#service-start-modes to ...

  4. 使用nmap查看web服务支持的http methods

    安装nmap yum install nmap 查看web server支持的http methods u02 ~]$ nmap -p --script http-methods www.somewh ...

  5. C#实现多文件上传，写到文件夹中，获取文件信息以及下载文件和删除文件

    前台:.js //上传附件 function uploadAttachment() { if ($("#Tipbind").attr('checked')) { var ip = ...

  6. asp.net 如何配置authentication,完成基于表单的身份验证

    步骤一: 在根目录下的web.config中加入: <system.web> <authentication mode="Forms">           ...

  7. 简单的Java串口通讯应答示例

    java串口通讯第一次使用,找的资料都比较麻烦,一时没有理出头绪,自己在示例的基础上整理了一个简单的应答示例,比较简陋,但演示了java串口通讯的基本过程. package com.garfield. ...

  8. JavaScript indexOf() 方法详解

    定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) 参数 描述 sea ...

  9. 【Android】Android实现监听返回键,主键(HOME),菜单键

    目录结构: contents structure [+] 简介 监听 返回键 监听 主键(Home键) 监听 菜单键 一.简介 本篇文章介绍如何在Android中实现监听返回键,主键,菜单键.一般情况 ...

  10. golang学习笔记 ---数组与切片

    数组: golang数组包含的每个数据称为数组元素(element),数组包含的元素个数被称为数组长度(length). golang数组的长度在定义后不可更改,并且在声明时可以是一个常量或常量表达式 ...