쓸만한 부트스트랩 - 캘린더 부트스트랩

부트 스트랩 (Bootstrap) 관련 글입니다.

부트스트랩 자료중에 Angular라는 부트 스트랩의 샘플에 대한 소개입니다.

이제는 어느 곳이다 반응형 웹이 보편적이지만, 몇년전까지만해도 이게 문제였죠..

브라우저마다, 그리고 버젼마다 코딩의 복잡함이란.....

이제는 부트스트랩이라는 템플릿으로 이런 불편함이 없지만, 아직도 이 부분을 코딩하는것은 쉽지 않네요... ( 저에게 그렇다는 말이죠... )

소개해 드리는 사이트는 많은 부트스트랩 관련 사이트 중에 하나입니다.

angular-bootstrap-calendar 라는 사이트이며, 관련 샘플을 얻을수 있습니다.

물론, 컴포넌트 별로 설명과 예시가 있습니다.

한가지 특이한 점은 이사이트는 칼랜더 양식에 특화된 샘플을 제공합니다.

그래서 사이트 제목 자체가 angular-bootstrap-calendar 이렇습니다.

https://mattlewis92.github.io/angular-bootstrap-calendar/#!?example=kitchen-sink

위의주소가 메인 주소이며, 주소로 들어가보시면 자세히 설명이 들어가 있습니다.

참고

부트스트랩이란"

부트스트랩의 원래 이름은 Twitter Blueprint로 Mark Otto와 Jacob Thornton 이 만들었다. 기존에 여러 인터페이스에 대응하기 위한 다양한 라이브러리들이 존재 했지만 정형화 되지 않아 유지, 보수에 어려움이 있었다. 트위터의 개발자였던 Mark Otto는 이를 통합하기 위해 부트스트랩을 만들었고 트위터의 다른 개발자들이 개발에 기여하기 시작했다. 부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다. ^[2]

2012년 1월 31일 부트스트랩 2가 발표되었다. 이 버전에서는 12컬럼 그리드 레이아웃과 반응형 디자인이 포함되었다. 부트스트랩 3는 2013년 8월 19일 발표되었으며 모바일 플랫폼이 적용되었다.

Angular Bootstrap Calendar

Due to the growing popularity of angular 2 and beyond, this project is considered feature complete and no further work will be done on it. All dev time is now being devoted to the projects successor angular-calendar. However, you are welcome to fork and modify this repo as you please.

Github 참고자료

https://github.com/mattlewis92/angular-bootstrap-calendar#documentation

Installation

The calendar has a few dependencies, these are as follows, and must be included before this libraries files:

• AngularJS 1.3.x, 1.4.x, 1.5.x and 1.6.x are supported
• Bootstrap 3+ (CSS only)
• Moment.js

Optional dependencies:

• ui-bootstrap (0.14.0+, optional, include for collapse animations and tooltips.
• interactjs (optional, include to allow drag and drop on the calendar)
• ngTouch (optional, include if using the calendar on mobile devices. You will also need to enable $touchProvider.ngClickOverrideEnabled(true) on angular 1.5.0+)

You can install through bower:

bower install --save angular-bootstrap-calendar

You will then need to include the JS and CSS files for the plugin:

<link href="bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>

And finally add the module dependency in your AngularJS app (you can remove ui.bootstrap if you don't want the extra dependency - it is only required for collapse animations and tooltips):

angular.module('myApp', ['mwl.calendar', 'ui.bootstrap']);

Alternatively you can install through npm:

npm install --save angular-bootstrap-calendar

Or if using npm 3+ where peer dependencies aren't automatically installed:

npm install --save angular-bootstrap-calendar angular bootstrap moment angular-ui-bootstrap

Then add as a dependency to your app:

angular.module('myApp', [require('angular-bootstrap-calendar'), require('angular-ui-bootstrap')]);