달력 제작하기 with google colab
저번에 만들었던 달력 데이터를 사용해서 달력 모양으로 화면에 띄우겠다. data는 저번에 저희가 util.js 에서 만들었던 column을 이용합니다. 여기에는 현재 년월일 시분초를 뜻하는 now를 넣었습니다. 사실 안 넣어줘도 되지만, why? dayjs는 현재 년월일 시분초 의미하는데, 인수가 아무것도 넘어오지 않으면 getCalendarColumns 안에 있는 dayjs는 인수를 아무것도 안 받게되기 때문 일단 넣어줍니다. data에 colums를 넣으면 이제 renderItem에서 columns의 배열 원소를 차례로 돌면서 어떠한 기능을 처리합니다.
numColumns는 일 행에 몇 개의 renderItem 값을 채우고 다음 열로 넘어갈 것인지를 묻는 속성입니다.
ListHeaderComponent
월화수목금토 부분과 구문은 Icon에 관한 로직이 두 부분에서 중복되어 컴포넌트 화 시켜서 빼준 것입니다. 아이콘을 터치할 수 있게 TouchableOpacity로 감쌌다. 일월화수목금토 부분 map 함수 이용 해서 06까지 차례대로 day에 넣고 , 일토 문자를 숫자에 맞게 가져오고, 컬러도 가져옵니다. 해당 부분도 내용이 길어 컴포넌트화 시켰다. App.js 에 더 적기에는 가독성이 안 좋으므로, 이미 import 해놓은 utill.js 에 export default로 함수를 만들어서 수입해오자. 아직 잘 모르겠는 점 무엇을 전역변수로 넣고 무엇을 앱 안쪽에 적는지 기준을 모르겠다.
휴일 알아내기
일반적으로 달력에는 휴일과 토요일이 다른 색으로 표시되어 있습니다. 엑셀 달력에서도 그렇게 표시하려면 어느 날이 휴일이고 토요일인지 이해해야 합니다. 1. C2열에 수식을 입력합니다. IFORB21, B27, 주말, IFTEXTA2,YYYYMMDD20230606, 현충일,
2. 채우기 핸들을 C31까지 드래그합니다. C2열에 입력한 수식을 손쉽게 설명하겠습니다. 이제 각 요일별 주말과 휴일을 알아냈으니 날짜A열에 조건부 서식을 통해 표시해 보겠습니다.
IF문을 사용하여 1일요일, 7토요일을 주말이라고 표시합니다. IF안에 IF를 중첩하여 “2023-06-06″인 경우 “현충일”로 표시합니다. 공휴일이 다른 경우 변경하면 됩니다.
RenderItem
renderItem은 date의 원소 하나 하나를 item이란 이름으로 받는다. 이걸 가독성을 높이기 위해 date 란 이름으로 바꿔 줍니다. 첫 차례 변수 dayText는 date에서 일만 빼서 가져오는 것입니다. 원래 dayjs의 데이터는 20230404T150000.000Z 이런식으로 년월일 시분초로 넘어옵니다. 이곳에서 일자만 챙겨 옵니다. 두 차례 day는 date에서 요일만 가져옵니다. dayjs에서 요일은 숫자로 표현되어 06 까지가 토일 뜻합니다.
세 차례 변수는 Color로 day를 활용해 토인 날짜는 파란색, 일인 날짜는 빨간색으로 칠하게 해줍니다. 마지막 변수인 isCurrentMonth는 boolean 값으로서 해당 날짜가 현재 월에 포함되는지에 따라 참/거짓말을 나타낸다.
바탕디스플레이 달력제작하는 어플 설치 방법 및 사용법
다른 설치는 필요없고요. 다운로드하신 파일을 실행하시면 아래 화면이 나타나게 됩니다. 처음 바탕화면에 넣을 요구하는 이미지 선택한 후 크기 조절 설정할 달 선택 글자 크기 및 색상 변경 이미지 만들기 하시면 달력이 들어간 바탕화면을 만드실 수 있습니다.
cwindows 폴더 안에 보시면 wallpaper 이미지가 만들어지는데 , 그걸 바탕디스플레이 이미지로 선택하시면 완료됩니다.
바탕화면에 달력 제작하는 어플 다운로드
바탕화면에 달력 제작하는 어플 다운로드 파일 올려드립니다. 다운 후에 설치하셔서 사용하시면 됩니다. 바탕화면에 달력 제작하는 어플 다운로드 저의 글을 읽어 주셔서 감사합니다.
자주 묻는 질문
월화수목금토 부분과 구문은 Icon에 관한 로직이 두 부분에서 중복되어 컴포넌트 화 시켜서 빼준 것입니다. 좀 더 자세한 사항은 본문을 참고해 주세요.
휴일 알아내기
일반적으로 달력에는 휴일과 토요일이 다른 색으로 표시되어 있습니다. 자세한 내용은 본문을 참고하시기 바랍니다.
RenderItem
renderItem은 date의 원소 하나 하나를 item이란 이름으로 받는다. 궁금한 사항은 본문을 참고하시기 바랍니다.