一个 timesheet.js (JavaScript library for HTML5 & CSS3 time sheets) 的 Angular 2 复制版

用法:

npm install ng2-timesheet --save

app.component.ts  

import { Component } from '@angular/core';
import { TimesheetItem, Timesheet, TimesheetComponent } from 'ng2-timesheet'; @Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html',
directives: [TimesheetComponent]
})
export class AppComponent {
timesheet = new Timesheet(2002, 2014, [
new TimesheetItem('2002', '2002-09', 'A freaking awesome time', 'lorem'),
new TimesheetItem('2002-06', '2003-09', 'Some great memories', 'ipsum'),
new TimesheetItem('2003', '2004', 'Had very bad luck', 'default'),
new TimesheetItem('2003-10', '2006', 'At least had fun', 'dolor'),
new TimesheetItem('2005-02', '2006-05', 'Enjoyed those times as well', 'ipsum'),
new TimesheetItem('2005-07', '2005-09', 'Bad luck again', 'default'),
new TimesheetItem('2005-10', '2008', 'For a long time nothing happened', 'dolor'),
new TimesheetItem('2008-01', '2009-05', 'LOST Season #4', 'lorem'),
new TimesheetItem('2009-01', '2009-05', 'LOST Season #4', 'sit'),
new TimesheetItem('2010-02', '2010-05', 'LOST Season #5', 'lorem'),
new TimesheetItem('2008-09', '2010-06', 'FRINGE #1 & #2', 'ipsum')
]);
}

  

app.component.html

<timesheet [timesheet]='timesheet'></timesheet>

  

效果:

源代码:

https://github.com/zhongzf/ng2-timesheet

ng2-timesheet, 一个timesheet.js的angular2复制版的更多相关文章

  1. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  2. 开启第一个Node.js的Express项目

    手动创建一个Express.js的应用可大致分为以下步骤: 1.创建文件夹 a. 创建一个项目根文件夹,如helloWord b.在项目的根目录下创建项目的目录结构,依次创建{public,publi ...

  3. 从零开始搭建一个vue.js的脚手架

    在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...

  4. [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  5. 自己封装一个弹窗JS

    在我们平时的开发中,一定有很多地方需要用到弹窗提示功能.而系统自带的弹窗奇丑无比,而且我们不能自主控制.因此我们在开发过程中,自己封装一个弹窗JS方便我们使用. 代码demo如下: // JavaSc ...

  6. 例子:使用Grunt创建一个Node.js类库

      创建一个文件夹. 打开命令行或者powershell, 运行npm init,根据提示填入package的信息. 在文件夹中创建index.js文件. /*! * mymongolib * Cop ...

  7. 如何用Docker建立一个Node.js的开发环境

      建立一个文件夹 用管理员身份打开powershell. 在文件夹下面运行npm init, 根据提示填入信息,以便产生一个package.json文件. 在文件中加入需要的dependencies ...

  8. js获取checkbox复选框获取选中的选项

    js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...

  9. 一个用JS数组实现的队列

    一个用JS数组实现的队列 /*一个用数组实现的队列*/ function Queue(){ this.dataStore = [];//存放队列的数组,初始化为空 this.enqueue = enq ...

随机推荐

  1. pip 加速方案

    每当我pip install * 的时候,总是发现速度很慢,通过google,发现还是有方法来解决这种状况的 在~/ 命令下,创建 .pip/pip.conf,我用的是阿里的镜像,速度还是杠杠的 mk ...

  2. nerual style 执行命令

    python neural_style.py --content ./examples/4-content.jpg --styles ./examples/4-faguo-style.jpg --ou ...

  3. UIMenuController 弹出菜单框

    弹出菜单框 UIMenuItem *menuItem1 = [[UIMenuItem alloc] initWithTitle:@"删除" action:@selector(del ...

  4. aa2

    option = { series : [ { name: 'Map', type: 'map', mapLocation: { x : 'left', y : 'top', height : 500 ...

  5. IOS 本地推送 IOS10.0以上 static的作用 const的作用

    //需要在AppDelegate里面启动APP的函数 加上 UIUserNotificationType types = UIUserNotificationTypeBadge | UIUserNot ...

  6. 20155306白皎 学习技能+C语言学习

    你有什么技能比大多数人更好 谈起技能,我还有感觉有微微拿得出手的也只有主持这一项才艺了吧.从小学到高中一直参加朗诵比赛,以及从小学到大学一直在所在学校有担任过主持工作. 上大学以来,也参加了院级朗诵比 ...

  7. C# 将短时间格式变长正常时间格式

    DateTime dateTimeStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1));             ...

  8. linux指令记录

    sudo mount /dev/sda3 data 挂载硬盘到当前目录下的data文件夹

  9. SpringMVC常用注解實例詳解3:@ResponseBody

    我的開發環境框架:        springmvc+spring+freemarker開發工具: springsource-tool-suite-2.9.0JDK版本: 1.6.0_29tomcat ...

  10. 浅谈城市规划在移动GIS方面的应用发展

    1.概述 城市建设进程加快,城市规划管理工作日趋繁重,各种来源的数据产生各种层出不穷的问题,严重影响城市规划时的准确性,为此全面合理的掌握好各方面的城市规划资料才能做出更加科学的决策.移动端的兴起为规 ...