js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js
日历控件:
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的更多相关文章
- jQuery 日历控件 FullCalendar 初识
最近有个日程管理的需求,就学习了一下 FullCalendar 控件的一些基本知识,本文不是详细介绍该控件的 API 的文档,而是记录本人使用过程中的一些学习情况. 先看一下效果图 月/周/日视图 ...
- 纯js开发防win7日历控件
不久前项目开发中遇到需要用js实现选择日期的需求,百度了下,确实一大把一大把的,但多少还是有些不符合当前需求,遂down了一份最接近的,然后修修改改,基本符合了... 先上几张效果图~~~ 需要输入时 ...
- 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 ...
- layui日历控件设置选择日期不能超过当前日期
layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max ...
- C#中使用DateTimePicker控件显示修改日期时间
1.只显示日期 默认就是 2.只显示时间 修改属性 Format 设为Time ShowUpDown设为true 3.同时显示日期时间 Format设为Custom CustomF ...
- [Xcode 实际操作]四、常用控件-(11)UIDatePicker日期时间选择器
目录:[Swift]Xcode实际操作 本文将演示日期拾取器的使用. 使用日期拾取器,可以快速设置和选择日期与时间. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] ...
- JS实现日历控件选择后自动填充
最近在做人事档案的项目,在做项目的初期对B/S这块不是很熟悉,感觉信心不是很强,随着和师哥同组人员的交流后发现,调试程序越来越好了,现在信心是倍增,只要自己自己踏实的去研究.理解代码慢慢的效果就出来了 ...
- 2.23 js处理日历控件(修改readonly属性)
2.23 js处理日历控件(修改readonly属性) 前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...
- selenium+Python(Js处理日历控件)
日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉 ...
随机推荐
- 写了一个简单的Linux Shell用来下载文件
#!/bin/sh ; i<; i=i+ )); do # 利用spider来探测请求的资源是否存在,并把请求的结果写入到一个文件 wget --spider --http-user=usern ...
- Azure编程笔记(3):用Fiddler调试Azure的应用程序
内容提要 Azure的服务是通过RESTfulAPI提供的. 尽管Azure针对非常多编程语言都提供了SDK.但这些SDK也仅仅是RESTfulAPI的一层封装. 在调用SDK或者RESTful ...
- 【DB2】慎用nickname,可能会引起效率较低
在使用db2的时候,在A库建立了nickname,指向B库的物理表(数据量800多万),现在使用程序(JDBC)连接数据库,并计算指标,但是发现效率很低. 解决办法: 删除A库中的nickname,在 ...
- Openwrt中用iftop查看网络流量情况
iftop可以查看指定网卡上的流量情况, 命令说明 iftop: display bandwidth usage on an interface by host Synopsis: iftop -h ...
- 转: 在Ogre中使用Havok物理引擎(源码)
作者:CYM 众所周知Ogre则是评价很高的一款图形渲染引擎,Havok则是世界一流的物理引擎,今天花了点时间将两者结合在了一块,做了个Demo 由于国内对Havok的研究似乎很少,网上也找不到多少资 ...
- UVM:8.4.3 用factory 机制创建实例的接口
1.create_object_by_name,依据类名字创建object,原型: 一般仅仅用第一个: 2.create_object_by_type.依据类型创建一个object,原型: 一般仅仅用 ...
- C#几个小知识点
一.float数据类型 小数在C#中需要用浮点型表示,浮点值就是.后面的小数点.C#语言中有两种小数类型,分别为32位单精度浮点型(float) 和64位双精度浮点型(double).其中精度指的是小 ...
- hihocoder217周 树形DP
题目链接 一棵树,树中包含TRUE.FALSE.AND.OR四种结点,其中TRUE和FALSE是叶子结点,AND和OR结点的儿子包含多个结点,现在要求执行最少次数的以下操作: 把AND变成OR 把OR ...
- 一台电脑存放多个git账户的多个rsa秘钥(转)
如何在一个电脑上存储多个git账户生成的多份rsa秘钥,实现多个账户同时使用配置的情况?今天,不幸又再次遇到这个问题. 问题描述 公司最近在开发一款开源产品,项目被托管在github上,但是公司内部一 ...
- Windbg找出memory leak的一种笨办法
以下内容是转自 http://www.cnblogs.com/fbird/p/5889596.html 以前做项目碰到过一个问题,在客户的站点上面发现有严重的内存泄漏.幸运的是我们找到了重现的步骤,一 ...