[C#] .NET MAUI Blazor - 기본 달력 만들어보기(DateTime 활용)

* 준비물

   - Visual Studio 2022 (Community)

     * .NET MAUI Blazor 프로젝트를 만들 수 있어야 합니다.

 

 

 

* 기본 로직

1. 구하고자 하는 날짜(몇년 몇월 정도까지는 필요합니다.) 를 세팅

2. 날짜를 바탕으로 달력 그릴 준비

ex) 이 글에선 요일을 일 ~ 토 순으로 나열합니다.

글 기준 : 2024-09-05 이므로 9월 달력을 그려보겠습니다.

 

==============================

[일]    [월]    [화]    [수]    [목]    [금]    [토]

1        2       3        4        5       6        7

:

:

:     

29      30

==============================

 

3. 달력 그리기

    * 그리는 행 수 = 최소 4주 ~ 최대 6주까지 나올 수 있습니다.

                            = 기본은 4로 잡습니다.

                            = 해당 월의 마지막 날을 구해서 마지막 날이 28(윤년 2월) 인 경우 4로, 아닌경우 5로 세팅합니다.

   

    * 그리기 시작하는 날짜의 시작점 = 9월은 1일이 [일요일] 부터 시작하므로,

                                                         = 시작점은 기본 7로 잡고 : 첫재 날짜가 일요일이면 7만큼 빼줘서 0으로 만듭니다.

                                                         = [월요일] 에 시작하면 7-6 = 1 

                                                         = [화요일] 에 시작하면 7-5 = 2

                                                          :

                                                         = [토요일] 에 시작하면 7-1 = 3

 

    * 행 별로 7일 그리기 = 7 (고정값 입니다.)

 

 

 

 

[razor 파일 내부에 C# 날짜세팅 코딩]

* 생성자에서 내부 메소드를 호출합니다. (강제로 09.04를 넣어봤습니다.)

 

[코드]

@code {
    private int weekRowCount = 0;
    private int Year = 0;
    private int Month = 0;
    private int Day = 0;
    private int lastDay = 0;
    private int startDifference = 7;

    public Weather()
    {
        SetDate("2024-09-04");
    }

    /* Class Weather */
    private void SetDate(string dateYmd)
    {
        DateTime date = DateTime.Parse(dateYmd);

        // 02. 연, 월, 일 정보를 담는다.
        this.Year = date.Year;
        this.Month = date.Month;
        this.Day = date.Day;

        // 03. 마지막날 정보를 담는다.
        this.lastDay = DateTime.DaysInMonth(Year, Month);

        // 04. 첫번째 날의 요일정보를 담는다.
        string FirstDayOfWeek = date.AddDays((1 - Day)).DayOfWeek.ToString();

        // 05. 시작일 기본값(달력을 그릴때 시작 요일이 목요일이면, < [ ] [ ] [ ] [ ] 목 금 토 > 로 그리기 위함
        this.startDifference = 7;

        switch (FirstDayOfWeek)
        {
            case "Sunday":      this.startDifference -= 7; break;
            case "Monday":      this.startDifference -= 6; break;
            case "Tuesday":     this.startDifference -= 5; break;
            case "Wednesday":   this.startDifference -= 4; break;
            case "Thursday":    this.startDifference -= 3; break;
            case "Friday":      this.startDifference -= 2; break;
            case "Saturday":    this.startDifference -= 1; break;
        }

        // 06. 일주일 단위 행 수
        this.weekRowCount = this.startDifference == 0 && lastDay == 28 ? 4 : 5;
    }

}

 

 

 

 

 

[Html 로 그립니다. C# 코드도 같이]

* 서버코드인 C# 은 '@{  }' 내부에 작성할 수 있습니다.

* 행별로 서버코드 or html 같이 작성되어서 잘 혼합하면

      좋은 코딩이 될 수 있으나... 큰 프로그램으로 가면 갈수록 

지저분해질 수 있습니다.

 

[코드]

* startNum = 1; (시작일인 1일)

* isDraw = false; (날짜가 그려기 시작할 때 true 로 지정)

 

<table class="table">
    <thead>
        <tr>
            <th>일</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
            <th>토</th>
        </tr>
    </thead>
    <tbody>
    @{
        int startNum = 1;
        bool isDraw = false;
    }
    @for (int i = 0; i < weekRowCount; i++)
    {
        <tr>
            @for (int j = 0; j < 7; j++)
            {
                if (j == startDifference || isDraw && startNum <= lastDay)
                {
                    isDraw = true;
                    <th> @startNum </th>
                    startNum++;
                }

            }

            @if (i == weekRowCount - 1)
            {
                @if (startNum <= lastDay)
                {
                    weekRowCount += 1;
                }
            }
        </tr>
    }
    
    </tbody>
</table>

 

 

[완성]

* 디자인 없으니 초라하네요.. ㅎㅎ

 

[실제달력]

 

 

* 더 좋은 방법이 많습니다. 저는 그냥 제 머리를 굴려서 해본 것일 뿐 ㅜㅜ

* 핵심은 시작요일을 찾고, 시작요일부터 마지막 날까지 쭉 증가시켜서 반복을 하는 겁니다.

* 만약 전체 행 수를 5주로 잡았는데, 토요일부터 1일이 시작되는 달은

  토요일 기준 1, 8, 15, 22, 29일 로 5주를 넘어서 6주까지 그려야 되는 상황이 있을 수 있습니다.

  -> 이런 경우 마지막 조건에 

       * 현재 그리고 있는 행이 마지막 행인데, 아직 마지막 날을 그리지 않았네? 

         -> 그럼 전체 행을 1행 늘려서 그려라.(한번더 그려라) 라고 하면서 

              한 주를 더 그려버립니다.

 

 

 

감사합니다.