반응형
| 캘린더 라이브러리 Toast UI Calendar
Node 기준으로 캘린더를 생성하는 예제가 많아 스프링으로 최대한 해보았다 .
주단위, 일단위 바꿔가며 여러가지 사용할 수 있지만, 월 단위 캘린더로만 해본다.
Github 혹은 공식API 문서를 참고하여 다운로드 혹은 cdn url 로 임포트 시켜준다.
대부분 다운로드 받은 Github 을 프로젝트에 직접 임포트 했다 .
<!-- TUI Calender -->
<link rel="stylesheet" type="text/css" href="/resources/js/calendar/tui-calendar/dist/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="/resources/js/calendar/tui-calendar/dist/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="/resources/js/calendar/tui-calendar/dist/tui-time-picker.css" />
<link rel="stylesheet" type="text/css" href="/resources/js/calendar/tui-calendar/dist/tui-time-picker.css" />
<link rel="stylesheet" type="text/css" href="/resources/js/calendar/tui-calendar/examples/css/icons.css" />
<!-- TUI JS -->
<script src="/resources/js/calendar/tui-calendar/dist/tui-code-snippet.js"></script>
<script src="/resources/js/calendar/tui-calendar/dist/tui-dom.js"></script>
<script src="/resources/js/calendar/tui-calendar/dist/tui-time-picker.min.js"></script>
<script src="/resources/js/calendar/tui-calendar/dist/tui-date-picker.min.js"></script>
<script src="/resources/js/calendar/tui-calendar/dist/tui-calendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
기본 HTML 예제 (.jsp)
<div id="menu">
<span class="dropdown" style="display:none;">
<span id="dropdownMenu-calendarType" class="btn btn-default btn-sm dropdown-toggle" type="label" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true" disabled>
<i id="calendarTypeIcon" class="calendar-icon ic_view_month" style="margin-right: 4px;"></i>
<span id="calendarTypeName">Monthly</span>
<i class="calendar-icon tui-full-calendar-dropdown-arrow"></i>
</span>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-calendarType"></ul>
</span>
<span id="renderRange" class="render-range"></span>
<span id="menu-navi">
<button type="button" class="btn btn-default btn-sm move-today" data-action="move-today">Today</button>
<button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev">
<i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i>
</button>
<button type="button" class="btn btn-default btn-sm move-day" data-action="move-next">
<i class="calendar-icon ic-arrow-line-right" data-action="move-next"></i>
</button>
</span>
</div>
<div id="calendar"></div>
기본 캘린더 JavaScript -1
cal = new Calendar('#calendar', {
defaultView: 'month',
useCreationPopup: false,
useDetailPopup: false,
// calendars: CalendarList,
theme: MONTHLY_CUSTOM_THEME,
timezones: {
timezoneOffset: 540,
// displayLabel: 'GMT+09:00',
tooltip: 'Seoul'
},
calendars: [
{
id: '1',
name: '개인',
color: '#ffffff',
bgColor: '#9e5fff',
dragBgColor: '#9e5fff',
borderColor: '#9e5fff'
},
{
id: '2',
name: '회사',
color: '#00a9ff',
bgColor: '#00a9ff',
dragBgColor: '#00a9ff',
borderColor: '#00a9ff'
},
{
id: '3',
name: '휴일',
color: '#ff5583',
bgColor: '#ff5583',
dragBgColor: '#ff5583',
borderColor: '#ff5583'
}
]
});기본 캘린더 JQuery -2
var $calEl = $('#calendar').tuiCalendar({
defaultView: 'month',
taskView: true,
template: {
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
}
...
}
});스크립트 부분에 1번 혹은 2번 편한대로 하면된다. - 공식문서 참조
쓰던 코드여서 1번 위 calendars 부분은 커스텀으로 만든 스케줄링 팝업 카테고리 리스트이니 제외해도 무관함.
만약 Toast UI 에서 제공하는 스케줄 팝업 기능을 사용하고자 한다면 useCreationPopup / useDetailPopup : true 로 변경한다.
아니고 커스텀으로 별도 제작한다면 false로 두고 작업한다.
디자인 UI 부분 커스텀이 필요하다면
var MONTHLY_CUSTOM_THEME = {
// month header 'dayname'
'month.dayname.height': '42px',
'month.dayname.borderLeft': 'none',
'month.dayname.paddingLeft': '8px',
'month.dayname.paddingRight': '0',
'month.dayname.fontSize': '16px',
'month.dayname.backgroundColor': 'inherit',
'month.dayname.fontWeight': 'normal',
'month.dayname.textAlign': 'left',
'month.dayname.borderBottom': '1px solid #e5e5e5',
// month day grid cell 'day'
'month.holidayExceptThisMonth.color': '#f3acac',
'month.dayExceptThisMonth.color': '#bbb',
'month.weekend.backgroundColor': '#ffba6b2b',
'month.day.fontSize': '16px',
// month schedule style
'month.schedule.borderRadius': '5px',
'month.schedule.height': '18px',
'month.schedule.marginTop': '2px',
'month.schedule.marginLeft': '10px',
'month.schedule.marginRight': '10px',
// month more view
'month.moreView.boxShadow': 'none',
'month.moreView.paddingBottom': '0',
'month.moreView.border': '1px solid #9a935a',
'month.moreView.backgroundColor': '#f9f3c6',
'month.moreViewTitle.height': '28px',
'month.moreViewTitle.marginBottom': '0',
'month.moreViewTitle.backgroundColor': '#f4f4f4',
'month.moreViewTitle.borderBottom': '1px solid #ddd',
'month.moreViewTitle.padding': '0 10px',
'month.moreViewList.padding': '10px'
};위 소스를 아래 같이 캘린더를 선언할 때 넣어주면 된다.
cal = new Calendar('#calendar', {
defaultView: 'month',
//........
theme: MONTHLY_CUSTOM_THEME,
....
});
여기까지만 해도 기본적인 달력 그리고 스케줄링까지 동작 될 것이다.
또 커스텀 팝업 (스케줄) 이벤트를 주기위해서는 위 언급한대로 usePopup 옵션들을 false 로 두고,
cal.on({
'beforeCreateSchedule': function(e) {
console.log('beforeCreateSchedule', e);
// open a creation popup
// If you dont' want to show any popup, just use `e.guide.clearGuideElement()`
// then close guide element(blue box from dragging or clicking days)
e.guide.clearGuideElement();
},위 소스와 같은 콘솔 부분에 함수를 추가하여 사용하면 된다.
* 커스텀 팝업 호출 함수, DB 그리고 Controller 부분은 생략
공식문서에 다 나오는 내용이지만.. 개인적으로 스프링에 대한 예제가 없어 작성했고,
혼자 공부하면서 작성한터라 틀린 부분도 많으니 잘못된 부분이 있다면 댓글 부탁드립니다.
또 여러가지 참고하였는데
https://nhn.github.io/tui.calendar/latest/
위 링크 예제가 많이 도움되었다.
참고할 소스는 app.js 부분이 가장 참고하기 좋았음.
출처 :
https://nicedoc.io/nhn/tui.calendar/blob/master/docs/getting-started.md?theme=dark
https://ui.toast.com/tui-calendar/
반응형
'NOTE > 노트' 카테고리의 다른 글
| [노트] 캘린더 라이브러리 - Toast UI Calendar (2) (3) | 2020.07.16 |
|---|---|
| [노트] 스케줄러 낙서 (0) | 2020.07.10 |
| [노트] JavaScript 팝업 , validation (0) | 2020.07.10 |
댓글