본문 바로가기

jQuery/FullCalendar

[FullCalendar] FullCalendar 한글로 변환하기 - 방법①

반응형

※ 이 예제는 FullCalendar 2.9.1 버전을 가지고 진행되는 내용임을 알려드립니다.

※ 해당내용은 FullCalendar 라이브러리에서 지원하는 한글 변환기능을 사용한게 아닌 직접 커스텀한 부분입니다.

   이글을 작성하기전에는 v1버전때만 사용해 보았기 때문에.

   직접 한글을 불러오는 부분을 이전버전과 마찬가지로 직접 작성을 해주어야 하는줄 알고.

   v2버전을 사용해 보자마자 아래와같이 설정을 변경을 하고 사용하였으나.

   v2버전대에서부터는 각나라별 언어를 지원하고 있었다.

   js 라이브러릴 사용하는 방법은 [FullCalendar] FullCalendar 한글로 변환하기 - 방법 기재하여 두었으니

   본인 기호에 맞게 사용하길 바란다.







01. Calendar_constructor 함수를 찾아 해당부분을 수정해야 한다.


    function Calendar_constructor(element, overrides) {

               ~ 해당영역수정 ~

        // Calendar-specific Date Utilities
        // -----------------------------------------------------------------------------------


   위에 주석처리된 부분의 위까지의 내용을 수정해야 한다.




02. fullcalendar.js파일을 열고 Calendar_constructor 함수영역을 아래와 같이 수정한다.

 fullcalendar.js

function Calendar_constructor(element, overrides) {

    var t = this;

    t.initOptions(overrides || {});
    var options = this.options;

    // Exports
    // -----------------------------------------------------------------------------------

    t.render = render;
    t.destroy = destroy;
    t.refetchEvents = refetchEvents;
    t.reportEvents = reportEvents;
    t.reportEventChange = reportEventChange;
    t.rerenderEvents = renderEvents; // `renderEvents` serves as a rerender. an API method
    t.changeView = renderView;      // `renderView` will switch to another view
    t.select = select;
    t.unselect = unselect;
    t.prev = prev;
    t.next = next;
    t.prevYear = prevYear;
    t.nextYear = nextYear;
    t.today = today;
    t.gotoDate = gotoDate;
    t.incrementDate = incrementDate;
    t.zoomTo = zoomTo;
    t.getDate = getDate;
    t.getCalendar = getCalendar;
    t.getView = getView;
    t.option = option;
    t.trigger = trigger;

    options.monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
    options.monthNamesShort = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
    options.dayNames = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
    options.dayNamesShort =  ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];

    // Language-data Internals
    // -----------------------------------------------------------------------------------
    // Apply overrides to the current language's data

    var localeData = createObject( // make a cheap copy
        getMomentLocaleData(options.lang) // will fall back to en
    );

    if (options.monthNames) {
        localeData._months = options.monthNames;
    }
    if (options.monthNamesShort) {
        localeData._monthsShort = options.monthNamesShort;
    }
    if (options.dayNames) {
        localeData._weekdays = options.dayNames;
    }
    if (options.dayNamesShort) {
        localeData._weekdaysShort = options.dayNamesShort;
    }
    if (options.firstDay != null) {
        var _week = createObject(localeData._week); // _week: { dow: # }
        _week.dow = options.firstDay;
        localeData._week = _week;
    }


    // assign a normalized value, to be used by our .week() moment extension
    localeData._fullCalendar_weekCalc = (function(weekCalc) {
        if (typeof weekCalc === 'function') {
            return weekCalc;
        }
        else if (weekCalc === 'local') {
            return weekCalc;
        }
        else if (weekCalc === 'iso' || weekCalc === 'ISO') {
            return 'ISO';
        }
    })(options.weekNumberCalculation);


    // Calendar-specific Date Utilities
    // -----------------------------------------------------------------------------------



※ 수정한 부분은 진한 글씨로 표시하였다.




03. http://wickedmagic.tistory.com/497 에서 작성했던 소스내용을 그대로 실행하면 된다.

 calendar.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>풀캘린더</title>
<style type="text/css">
    body {
        margin :40px 10px;
        padding : 0;
        font-family : "Lucida Grande", Helvetica, Arial, Verdana,sans-serif;
        font-size : 14px;
    }
    #calendar {
        max-width : 900px;
        margin : 0 auto;
    }
</style>
<link href="./fullcalendar-2.9.1/fullcalendar.css" rel="stylesheet"/>
<link href="./fullcalendar-2.9.1/fullcalendar.print.css" rel="stylesheet" media="print"/>
<script type="text/javascript" src="./fullcalendar-2.9.1/lib/moment.min.js"></script>
<script type="text/javascript" src="./fullcalendar-2.9.1/lib/jquery.min.js"></script>
<script type="text/javascript" src="./fullcalendar-2.9.1/fullcalendar.js" charset="euc-kr"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#calendar").fullCalendar({
              defaultDate : "2016-05-12"
            , editable : true
            , eventLimit : true
            , events: [
                {
                      title : "All Day Event"
                    , start : "2016-05-01"
                },
                {
                      title : "Long Event"
                    , start : "2016-05-07"
                    , end : "2016-05-10"
                },
                {
                      id : 999
                    , title : "Repeating Event"
                    , start : "2016-05-09T16:00:00"
                },
                {
                      id : 999
                    , title : "Repeating Event"
                    , start : "2016-05-16T16:00:00"
                },
                {
                      title : "Conference"
                    , start : "2016-05-11"
                    , end : "2016-05-13"
                },
                {
                      title : "Meeting"
                    , start : "2016-05-12T10:30:00"
                    , end : "2016-05-12T12:30:00"
                },
                {
                      title : "Lunch"
                    , start : "2016-05-12T12:00:00"
                },
                {
                      title : "Meeting"
                    , start : "2016-05-12T14:30:00"
                },
                {
                      title : "Happy Hour"
                    , start : "2016-05-12T17:30:00"
                },
                {
                      title : "Dinner"
                    , start : "2016-05-12T20:00:00"
                },
                {
                      title : "Birthday Party"
                    , start : "2016-05-13T07:00:00"
                },
                {
                      title : "Click for Google"
                    , url : "http://google.com/"
                    , start : "2016-05-28"
                }
            ]
        });
    });
</script>
<body>
    <div id="calendar"></div>
</body>
</html>




04. 그럼 수정한 영역의 내용이 한글로 나오는것을 확인 할 수 있다.





반응형