Home
Experience
Guestbook
Admin
About
All Articles
  • • 냉풍기는 정말 효과가 있는것인가?
  • • 동반의 강자 VS 터프윈
  • • 확산되는 지자체 부도 그리고 제2의 부자감 .....
  • 90년대 비운의 명마 풀그림
  • • 매직아이(Masic Eye)3DTV
  • • 저역시 반드시 반대를 하는 입장이라기 보단 .....
  • • 저는 전작권 연기에 찬성하고 있었습니다만. .....
  • • 사실 공직자로서의 자질론을 따지자면 제가 .....
  • • 타블로의 악플러는 과연 처벌 대상인가?
  • • 타블로는 경고한다 그 입다물라!
  • IE8 inline-block
  • 2008     1
     AshCalendar(extends AshEventDispatcher)
    • CREATION DATE |   2009.02.11
    • LAST MODIFY |   2009.02.11
    • VERSION |   0.1
    • Description
    - 본 클래스는 Calendar의 시각적인 매칭을 위해서 하나의 약속된 규약이 필요하다.
    즉, 가로 7(요일)*세로 6(날짜) 의 cell을 갖는 배열형식의 데이터이다.
    이것이 상호 준수되지 않을때는 정확한 Calendar표시가 불가능하다.
    따라서 본 클래스 내부에서 실제로 얻어지는 elements 배열은 7*6=42 개의 배열인덱스를 가지며 각 elements의 값은 해당 배열인덱스에 파싱되어 값이 입력된다.
    이때 본 클래스를 이용하여 실제 calendar를 시각적으로 표시하고자 하는 곳에서는 for문으로 42개 length으로 반복처리하고 x축은 증감처리하고
    if문으로 %7의 배수일때 x축을 초기화하고 y축을 증감하는 과정이 필요하다.
    즉, 해당 elements배열의 데이터를 가로 7(요일) 세로 6(날짜)에 맞춰서 값을 적용하면 된다.
    (달력 형태에 따라 별도의 마진값을 적용할 필요도 있다.)
    • ClassType
    public extends
    • Inherited Public Properties
    instancedCount (Defined by Ash)
    owner (Defined by AshEventDispatcher)
    openData (Defined by AshEventDispatcher)
    • Inherited Public Methods
    getClass (Defined by Ash)
    toString (Defined by Ash)
    addEventListener (Defined by AshEventDispatcher)
    removeEventListener (Defined by AshEventDispatcher)
    dispatchEvent (Defined by AshEventDispatcher)
    hasEventListener (Defined by AshEventDispatcher)
    getEventListeners (Defined by AshEventDispatcher) 
    • Costants
    AshCalendar.EXTRACT = 'extract'; // This event happens when the elements will be extract from the extract method.
    각각의 달력을 셋팅하는 메소드가 실행되고 달력이 추출될때 이벤트가 발생한다.
    이 이벤트에서 반환되는 result의 엘리먼트 값으로 달력을 구성할 수 있다.
     elements:Array // the extracted elements array.
     {value:(string), today:(true, false), day:(0,1,~6)}
      (description)
      value: 이 값을 이용해서 텍스트필드를 통해서 날짜를 표시할수 있다. 빈날짜이면 '' 값이 입력되고 날짜가 존재하면 숫자값이 등록된다.
      today: 만약 해당 날짜가 오늘날짜(년,월,일 동일)라면 true 그렇지 않으면 false값이다. 이 값을 이용해서 오늘날짜에 대해 accessbility를 줄 수 있다.
      day: 0:일, 1:월, 2:화 .... 순으로 이 값을 이용해서 일요일에 빨간색으로 표시를 할수 있다.
    • Static Properties
    -
    • Static Methods
    • On Event Handler
    onExtract // This event happens when the elements will be extract from the extract method. 
    • Public Properties
    (read-only)
    elements:Object // the extracted elements array.
    • Public Methods

    today()
    오늘 날짜로 셋팅한다.

    getYear()
    년도값을 구한다.

    setYear(value)
    지정된 년도로 달력을 셋팅한다.

    getMonth()
    월 값을 구한다. (0~11)

    setMonth(value)
    지정된 월값으로 달력을 셋팅한다.

    getRealMonth()
    실사용에 맞는 월값을 가져온다. (1~12)

    setRealMonth(value)
    실사용에 맞게 변환된 월값으로 달력을 셋팅한다.

    getDate()
    날짜를 구한다.

    setDate(value)
    지정된 날짜로 달력을 셋팅한다.

    getDay()
    요일을 구한다.

    getDayToString()
    요일에 대응하는 텍스트 값을 구한다.( ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] )

    getFirstWeekDay() // Get the first day of the week in the month.
    이달의 첫번째 시작하는 요일 값을 구한다.

    thisYear()
    달력을 올해로 셋팅한다.

    prevYear()
    달력을 현재 지정된 년도에서 한단계 이전해로 셋팅한다.

    nextYear()
    달력을 현재 지정된 년도에서 한단계 다음해로 셋팅한다.

    thisMonth()
    달력을 이달의 월과 같은 값으로 셋팅한다.

    prevMonth()
    달력을 현재 지정된 년도에서 한단계 이전의 월 값으로 셋팅한다.

    nextMonth()
    달력을 현재 지정된 년도에서 한단계 이전의 월 값으로 셋팅한다.

    anyMonth() // Set the calendar to any year, any month.
     * parameters |
     year:Number // the year to set.
     realMonth:Number // the real month value to set. (1,2,3~12);
    달력을 특정년도, 특정달로 셋팅한다.

    • Constructor
    AshCalendar()
    • Example

    <style type='text/css'>
    .Cal { }
     .Cal tr { height:30px; }
     .Cal td { width:40px; }
    </style>
    </head>
    <body>
     <script type="text/javascript" src='AshAPI.js'></script>
     <script type="text/javascript">
     var cells = [];
     var wEvent = new AshEventDispatcher(window);
     var ashCal = new AshCalendar();
     ashCal.addEventListener(AshCalendar.EXTRACT, function(e) {
      var ele = e.parameters.elements;
      for(var l = cells.length, cell, color, bold, i = 0; i < l; i++ ) {
       cell = cells[i];
       color = ele[i].day == 0? '#FF0000': '#000000';
       bold = ele[i].today? 'font-weight:bold;': '';
       cell.innerHTML = "<span style='color:"+color+"; "+bold+"; '>"+ele[i].value+"</span>";
      }
      var theYear = document.getElementById('theYear'), theMonth = document.getElementById('theMonth');
      theYear.value = this.getYear();
      theMonth.value = this.getRealMonth();
     });
     wEvent.addEventListener('load', function(e) {
      var cal = document.getElementById('Calendar');
      for (var l = cal.rows.length, oCells, i = 0; i < l; i++) {
       oCells = cal.rows[i].cells;
       for (var l2 = oCells.length, j = 0; j < l2; j++) cells.push(oCells[j]);
      }
      ashCal.today();
     });
     </script>

     <div>
      <button onclick='ashCal.prevYear();'>◀</button><input id='theYear' style='width:50px;'><button onclick='ashCal.nextYear();'>▶</button>
      <button onclick='ashCal.prevMonth();'>◀</button><input id='theMonth' style='width:20px;'><button onclick='ashCal.nextMonth();'>▶</button>
     </div>
     <table class='Cal' border=1>
      <tr>
       <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
      </tr>
     <table>
     <table id='Calendar' class='Cal' border=1>
      <tr>
       <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
       <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
       <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
       <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
       <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
       <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
     </table>
    </body>

    EDIT | DELETE
    LINK • SUMMARY