달력 편집하기

[[파일:윈도우 달력.JPG|썸네일|400픽셀|'''달력'''(Calender)]]

'''달력'''(calendar)<!--iCal--> 또는 '''캘린더'''<!--켈린더, 아이캘-->는 인터넷 웹사이트에서 달력을 표시해 주는 프로그램이다. 달력 프로그램을 기반으로 [[일정관리]] 솔루션을 개발한다.

== 개요 ==
달력은 웹이나 모바일에서 사용자의 일정을 기록하고, 수정 및 추가, 삭제도 가능하여 다른 사용자의 일정 또한 공유 및 확인할 수 있는 프로그램이다. 달력을 이용함으로써 기존에 수기로 작성하여 중요한 일정을 잊어버리거나, 일정 파악 및 정리의 어려움을 해결할 수 있다. 또한, 달력을 통해 다른 사용자의 일정을 확일할 수 있기 때문에 일정을 세우기 전에 일정이 겹치게 되는 문제를 해결할 수 있다. 달력은 일정을 관리함으로써 프로젝트 등 중요한 일정들의 시간을 효율적으로 분배할 수 있기 때문에 시간단축의 도움을 줄 수도 있다. 일정관리의 중요성은 현재까지 많은 종류의 달력들이 존재하고 생겨나고 있다는 점을 보면 알 수 있다. 많은 달력이 있기 때문에, 해당 프로그램들의 주요 특징들을 파악하고, 자신이 필요한 기능에 맞는 프로그램을 선정하여 사용하는 것을 권장한다.

== 특징 ==
달력은 사용자에게 있어서 중요하기 때문에 이와 관련된 많은 달력이 존재하고, 계속 만들어지고 있다. 이 많은 달력에서 공통된 특징들은 첫 번째로, 일정관리가 편리하다. 달력이 만들어지기 전에, 활성화되기 전엔 모든 일정은 수기로 작성되어 관리되었으며, 이는 여러 문제점을 일으켰다. 일정이 밀리게 되면 밀린 부분부터 끝까지 재작성해야 하며, 중간에 몇몇 일정을 빠트리게 되어 전체 일정에 차질이 생기는 등의 작은 실수가 큰 문제로 돌아오게 되었다. 달력을 사용함으로써 주간, 월간 등 긴 기간의 일정들도 한눈에 보기 쉬워졌으며 빠진 일정이나 잘못 등록된 일정들도 빠르게 파악이 가능해졌다. 또한, 사용자가 잊어버린 일정에 대해 해당 프로그램이 미리 알려줌으로써 잊어버리는 일이 감소하게 되었다. 두  번째로, 다른 사용자와 일정 공유가 가능하다. 회사나 기관 등 여러 사람의 일정을 통합하여 진행하는 업무를 하는 곳은 한사람이 아닌 여러 사람들의 일정의 공유가 이뤄져야지만 업무나 프로젝트를 진행할 수 있다. 같은 프로그램을 사용함으로써 자신만이 아닌 다른 사용자들의 일정을 파악할 수 있으며, 공유를 통해 자신 또는 통합 일정을 쉽게 그에 맞춰 변경할 수 있다. 세  번째로, 디자인 변경이 가능하다. 각 달력에서 제공하는 스티커나 디자인 등으로 사용자의 취향에 맞게 달력의 모양과 전체적인 디자인을 변경할 수 있다.<ref>PHP 해피씨쥐아이 - http://www.happycgi.com/program/category.php?category=595</ref>

== 비교 ==
===윈도우 달력===
[[파일:윈도우 글자.png|썸네일|300픽셀|'''[[윈도우]]'''(Windows)]]

윈도우 달력(Windows Calender)은 윈도우 비스타(Windows Vista)와 [[윈도우]](Windows) 서버 2008 이후에 내장된 일정 프로그램이다. 윈도우 비스타 영문판에서는 달력이라는 뜻의 윈도우 캘린더이라는 이름을 사용하고 있다. 아이캘(iCal) 파일 형식을 기본으로 지원하며, [[HTTP]]와 웹다브(WebDAV)를 사용하여 웹 기반 일정을 출판하는 기능을 제공한다. 윈도우 달력은 공유 중인 네트워크 드라이브에 저장도 가능하다. 윈도우 달력은 하루 단위, 주 단위, 월 단위를 포함하여 여러 종류로 표시할 수 있으며, 작업(task)를 지원하고 사용자마다 100개 넘는 일정을 제공한다. 윈도우 달력은 CF4 개발기크가 포함된 API를 사용하여 확장할 수 있다. 윈도우 달력은 윈도우 7이상에는 기본으로 포함되어있지않지만, 윈도우 비스타의 Program Files의 윈도우 달력을 윈도우 7과 윈도우 8에 가져와서 사용할 수 있다.<ref>일정 (윈도우) 위키백과 - https://ko.wikipedia.org/wiki/%EC%9D%BC%EC%A0%95_(%EC%9C%88%EB%8F%84%EC%9A%B0)</ref>{{자세히|윈도우}}

===애플 달력===
[[파일:애플 글자.png|썸네일|300픽셀|'''[[애플]]'''(Apple)]]

애플 달력(Apple Calender)은 이전엔 아이캘이라고 불렸으며, [[애플]](Apple)의 [[오에스텐]](OS X)에서 작동하는 개인 일정관리 프로그램이다. 애플 달력은 여러가지 일정을 관리하고 웹다브 서버를 통해 공유하고 구독할 수 있는 아이오에스를 위한 최초의 일정관리 프로그램이다. 2002년 9월 10일, 초기에는 [[매킨토시]](Macintosh) 오에스텐 10.2를 위한 무료 다운로드로 배포되었으며, 매킨토시 오에스텐 10.3부터는 아이캘 1.5가 포함되어 발매되었다. 아이캘 2는 매킨토시 [[운영체제]] 10.4에 같이 발매되었으며, 아이캘 3은 매킨토시 오에스텐 10.5와 함께 발매되었다. 애플 달력이 제공하는 기능은 우선 여러 종류의 일정들 사이에서 행사와 약속들을 보고 간편하게 겹치는 일정이나 여유로운 시간등을 확인할 수 있다. 또한, 매킨토시와 연계하여 인터넷을 통해 일정을 쉽게 공유할 수 있으며, 친구나 동료의 일정 뿐만 아니라 경기 일정이나 TV 프로그램과 같은 일정을 간편하게 구독할 수 있다. 다가오는 일정에 대해서 컴퓨터 화면이나 이메일 및 일반 메신저 등으로 알려주기도 하고, 아이캘 이벤트(iCal events)라는 서드 파티 대시보드 위젯을 통해서 대시보드에서도 확인이 가능하다. 애플 동기화 서비스를 이용하여 매킨토시와 외부 장치인 [[피디에이]](PDA), [[아이팟]](iPod), 아이폰(iPhone), 아이싱크(iSync) 및 서드 파티가 지원하는 다른 장비들과도 동기화가 가능하다.<ref>캘린더 (응용 소프트웨어) 위키백과 - https://ko.wikipedia.org/wiki/%EC%BA%98%EB%A6%B0%EB%8D%94_(%EC%9D%91%EC%9A%A9_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)</ref>{{자세히|애플}}

===구글 달력===
[[파일:구글 글자.png|썸네일|300픽셀|'''[[구글]]'''(Google)]]

구글 달력(Google Calender)은 [[구글]](Google)이 개발한 일정 관리 [[웹앱]](web app)이면서, [[모바일앱]](mobile app)이다. 2006년 4월 13일부터 이용이 가능하였으며, 2009년 7월 베타 단계에서 빠져나왔다. 해당 프로그램을 사용하기 위해서 구글 계정을 보유하고있어야한다. 구글 달력은 웹 기반 애플리케이션이기 때문에 운영체제에 필요한 웹 기술들을 지원하는 [[브라우저]](browser)가 있다면 실질적으론 모든 운영 체제에서 접근이 가능하다. 해당 프로그램은 아이캘린더 데이터를 포함하여 영구적인 HTTP [[URL]]을 통해 일정 데이터를 공용 또는 개인용 주소로 내보내는 기능을 지원한다. 또한, 아이캘 3.x를 이용한 컬다브(CalDAV)도 지원한다. 공유, 협력, 구글 드라이브, 구글 인박스 등과 같이 구글에서 제공을 하고 있는 다른 프로그램들과의 연동으로 편리하게 사용할 수 있다. 이처럼, 구글 달력은 확장성이 뛰어나며 개방성도 좋아서 바탕화면 브라우저를 통해 단독 브라우저로 사용이 가능하여 하나의 프로그램처럼 PC의 윈도우에서 상시 볼 수 있다.<ref>구글 캘린더 위키백과 - https://ko.wikipedia.org/wiki/%EA%B5%AC%EA%B8%80_%EC%BA%98%EB%A6%B0%EB%8D%94</ref>

구글 달력은 기념일과 휴일 등을 달력에 표시해준다. 상하가 분할되는 [[사용자 인터페이스]](UI)는 아니지만, 일정과 날짜별로 달력을 표시할 수 있어 몇번 째 주인지 까지 확인할 수 있다. 구글 달력의 사용자 인터페이스는 다크모드를 지원하여 테마를 설정하고, 사용할 수 있다는 장점이 있다. 이러한 특징을 기반으로 분석해보면, 더욱 다양한 방식으로 달력과 다크모드를 지원한다. 구글 달력의 위젯은 [[안드로이드]] [[스마트폰]] 기준 2개가 전부이며, 음력을 지원하지 않는다는 단점이 있다. 달력에 저장된 일정을 다른곳에서 확인할 수 있는것을 외부 공유라고 한다. 구글 달력의 외부 공유는 아이캘 형식의 주소로 다양한 달력 서비스에 연동하여 일정을 볼 수 있다.<ref name="구네">용준이, 〈[https://joonyong.tistory.com/530 구글 캘린더와 네이버 캘린더 완벽 분석]〉, 《티스토리》, 2020-02-11</ref>{{자세히|구글}}

===네이버 달력===
[[파일:네이버㈜ 글자.png|썸네일|300픽셀|'''[[네이버]]'''(Naver)]]

네이버 달력(Naver Calender)은 [[네이버㈜]](Naver)에서 서비스하는 일정, 기념일, 할 일 등을 효율적으로 관리할 수 있게 도와주는 일정 관리 애플리케이션이다. 알림으로 중요 일정을 미리 확인할 수 있고, PC 달력과 동기화하면 PC에서 등록한 일정을 모바일에서 확인할 수 있다. 달력의 디자인 또한 사용자의 취향에 맞게 변경하고 꾸밀 수 있으며, 네이버 달력이 제공하는 기능은 한번의 터치로 빠르게 일정을 작성할 수 있다. 월별 보기를 통해 날짜를 길게 누르게 되면 일정, 할 일, 기념일을 등록할 수도 있다. 원하는 뷰 타입으로 일정을 확인할 수 있어, 첫 화면에서 월별 일정을 한눈에 보려면 월 뷰를 일주일 단위로 자세히 보려면 주 뷰를 사용하면 된다. 하루 일정을 리스트형식으로 볼 수 있는 목록뷰나 시간대별로 관리할 수 있는 타임뷰로 고정도 가능하다. 또한, 날씨 정보도 제공하여 주뷰에서 한 주간의 일기 예보를 확인할 수 있다. 목록뷰나 타임뷰는 현재 날씨 정보를 확인 가능하다. 사용자의 일정을 타인과 공유할 수도 있다. 친구, 연인, 가족, 회사 등 네이버 달력에 가입되있는 누구든 공유하여 함께 관리가 가능하다. 네이버 달력은 시간대 변경 기능을 지원하며, 다른 나라에 있는 이와 함께 일정을 잡는 경우에도 그 나라에 맞는 시간대로 변경하여 쉽게 일정을 등록할 수 있다.<ref>〈[https://m.help.naver.com/support/contents/contentsView.help?contentsNo=4198&lang=ko 네이버 캘린더앱 소개]〉, 《네이버 고객센터》</ref>

구글 달력과 같이 네이버 달력의 사용자 인터페이스는 기념일과 휴일등을 달력에 표시한다. 상하가 분할되는 사용자 인터페이스를 가지고 있어서 달력만 보는 것도 가능하다. 또한, 네이버 달력의 위젯은 11개이며, 일정 목록이나 디데이(D-Day)와 월별 달력 및 학생들이 많이 사용하는 시간표까지 다양한 위젯을 사용할 수 있어 구글 달력보다 앞서고 있다. 한국에서 서비스하는 네이버 달력은 음력을 지원한다는 장점이 있지만, 아이캘 형식의 주소를 지원하지 않아 다른 서비스에 연동하기가 어렵고 기타 에버노트와 다양한 서비스에서 일정을 불러올 때 대부분 구글 달력을 사용하여 외부 공유 부문에 있어서는 불리하다.<ref name="구네"></ref>{{자세히|네이버㈜}}

== 코드 ==
아래 코드를 복사한 후 메모장이나 편집기에 붙이고, 파일명을 "calendar.html"로 정한 후, 웹브라우저에서 띄우면, 달력 프로그램이 작동한다.

 <!DOCTYPE html>
 <html lang="ko">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>달력 프로그램</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .calendar {
            width: 300px;
            text-align: center;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .calendar-header button {
            padding: 10px;
        }
        .calendar-header div {
            flex: 1;
            text-align: center;
        }
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        .calendar-days div {
            padding: 10px;
            border: 1px solid #ddd;
        }
        .calendar-days .sunday {
            color: red;
        }
        .calendar-days .saturday {
            color: blue;
        }
    </style>
 </head>
 <body>
    <div class="calendar">
        <div class="calendar-header">
            <button onclick="prevMonth()">이전</button>
            <div id="year"></div>
            <div id="month"></div>
            <button onclick="nextMonth()">다음</button>
        </div>
        <div class="calendar-days" id="calendar-days"></div>
    </div>
    <script>
        const monthNames = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];
        const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
        let currentDate = new Date();
        function generateCalendar(date) {
            const calendarDays = document.getElementById('calendar-days');
            const yearElement = document.getElementById('year');
            const monthElement = document.getElementById('month');
            calendarDays.innerHTML = '';
            const year = date.getFullYear();
            const month = date.getMonth();
            yearElement.innerText = `${year}년`;
            monthElement.innerText = monthNames[month];
            dayNames.forEach((day, index) => {
                const dayElement = document.createElement('div');
                dayElement.innerText = day;
                if (index === 0) {
                    dayElement.classList.add('sunday');
                } else if (index === 6) {
                    dayElement.classList.add('saturday');
                }
                calendarDays.appendChild(dayElement);
            });
            const firstDay = new Date(year, month, 1).getDay();
            const lastDate = new Date(year, month + 1, 0).getDate();
            for (let i = 0; i < firstDay; i++) {
                const emptyCell = document.createElement('div');
                calendarDays.appendChild(emptyCell);
            }
            for (let i = 1; i <= lastDate; i++) {
                const dayElement = document.createElement('div');
                dayElement.innerText = i;
                const dayOfWeek = new Date(year, month, i).getDay();
                if (dayOfWeek === 0) {
                    dayElement.classList.add('sunday');
                } else if (dayOfWeek === 6) {
                    dayElement.classList.add('saturday');
                }
                calendarDays.appendChild(dayElement);
            }
        }
        function prevMonth() {
            currentDate.setMonth(currentDate.getMonth() - 1);
            generateCalendar(currentDate);
        }
        function nextMonth() {
            currentDate.setMonth(currentDate.getMonth() + 1);
            generateCalendar(currentDate);
        }
        window.onload = () => {
            generateCalendar(currentDate);
        };
    </script>
 </body>
 </html>

{{각주}}

== 참고자료 ==
* 윈도우 달력 위키백과 - https://ko.wikipedia.org/wiki/%EC%9D%BC%EC%A0%95_(%EC%9C%88%EB%8F%84%EC%9A%B0)
* 캘린더 (응용 소프트웨어) 위키백과 - https://ko.wikipedia.org/wiki/%EC%BA%98%EB%A6%B0%EB%8D%94_(%EC%9D%91%EC%9A%A9_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)
* 구글 캘린더 위키백과 - https://ko.wikipedia.org/wiki/%EA%B5%AC%EA%B8%80_%EC%BA%98%EB%A6%B0%EB%8D%94
* 〈[https://m.help.naver.com/support/contents/contentsView.help?contentsNo=4198&lang=ko 네이버 캘린더앱 소개]〉, 《네이버 고객센터》
* 용준이, 〈[https://joonyong.tistory.com/530 구글 캘린더와 네이버 캘린더 완벽 분석]〉, 《티스토리》, 2020-02-11
* PHP 해피씨쥐아이 - http://www.happycgi.com/program/category.php?category=595

==같이 보기==
* [[일정관리]]

{{솔루션|검토 필요}}