3월 14, 2023
웹페이지에 구글 캘린더 표시하기
구글 캘린더의 활용도는 무궁무진하다. 아래처럼 웹 페이지 안에 자유자재의 노출이 가능하다. 여러 개의 달력을 한 페이지에 표시하거나, 한 개의 달력을 여러 페이지에 다중으로 표시할 수 있다. 동호회 등 각종 단체의 일정을 공유할 수 있는 구글 캘린더 웹페이지 내 표시 방법을 알아본다.
표시 달력 코드 복사
구글 계정과 구글 캘린더를 표시할 사이트가 개설되어야 한다.
- 구글 캘린더에 접속한다.
- 오른쪽 상단의 설정 아이콘을 클릭한다.
- 왼쪽 메뉴 ‘ 내 캘린더 설정’ 아래에 있는 표시할 달력을 선택한다.
- 오른쪽 설정 항목 중 맞춤 설정을 선택한다.
- 배경 색상과 형식을 수정한다.
- ‘삽입코드’를 복사한다.
- 달력을 표시할 사이트 웹페이지에 복사한 코드를 삽입한다.
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=Asia%2FSeoul&mode=AGENDA&src=~code" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>
맞춤 설정
표시할 달력의 크기, 색상, 기본 형식을 수정하고 지정한다. ‘구글개발자도구’ 로 아래의 스타일(style)을 이용해서 색상 등 구체적인 부분들의 상세한 변경을 시물레이션 해볼 수 있으나 업데이트되지 않는다. 사용자가 입맛대로 수정할 수 있도록 구글의 허용이 해준다면 그야말로 금상첨화가 될 것으로 보인다.
/*캘린더 배경*/
.view-cap, .view-container-border {
background-color: #ffe3e7;
}
.st-dtitle {
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
background: #fff8fa;
color: #666;
padding: 0 2px 0 0;
text-align: right;
line-height: 16px;
overflow: hidden;
}
/*오늘 날짜 타이틀*/
.st-dtitle-today {
}
/*오늘 날짜 내용*/
.st-bg-today, .st-bg-td-first {
}
/*요일 관련*/
.mv-dayname {
}
.mv-daynames-table {
background: #ecffe3;
color: #cc0045;
}
/*이벤트 타이틀*/
.rb-n {
}
/*일정목록 타이틀*/
element.style {
color: #a3297e;
}
.agenda .event-title {
display: block;
clear: none;
white-space: nowrap;
margin: 0;
overflow: hidden;
color: red;
background:yellow !important;
}
.agenda .date-label {
font-weight: bold;
background:yellow !important;
position: relative;
}
월간 목록
구글캘린더 홈페이지 ‘기본 보기’ 에서 변경하거나 코드의 노란색 부분을 대소문자 구분없이 ‘AGENDA’로 수정하면 된다.
주간 목록
구글캘린더 홈페이지 ‘기본 보기’ 에서 변경하거나 코드의 노란색 부분을 대소문자 구분없이‘WEEK’로 수정하면 된다.
댓글
댓글 쓰기