달력 구성요소 사용 사례

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 03월 07일
  • 읽기5분

    • 새 UI 빌더 경험 페이지에서 달력 구성요소를 추가하고 구성합니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
    2. 작업할 환경을 열거나 > 경험 생성을 선택하여 환경을 생성합니다.
      경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
    3. 페이지 변형을 생성합니다.
      에서 페이지를 UI 빌더만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
    4. 스테이지에서 + 아이콘을 선택하여 도구 상자를 엽니다.
    5. 검색 구성 요소에calendar를 입력합니다.
    6. 달력을 선택합니다.

      데모 데이터와 함께 달력 구성요소가 페이지에 추가됩니다. 데모 데이터는 캘린더 구성 요소로 가능한 작업과 구성 요소가 구성되는 방식을 보여 주는 데 도움이 됩니다.

    7. 저장을 선택합니다.
    8. 페이지에서 일정이 어떻게 표시되는지 보려면 미리 보기를 선택합니다.
      왼쪽 상단에는 선택적 +새로 만들기 버튼과 이전 또는 다음 기간 또는 특정 날짜로 이동할 수 있는 날짜 선택기가 있습니다. 오른쪽 상단에는 시간대 선택기, 보기(예: 일 또는 작업 주) 선택기 및 키보드 단축키에 액세스할 수 있는 설정 메뉴 아이콘이 있습니다. 중앙의 기본 달력 그리드는 왼쪽의 세로 축을 따라 시간을 표시하고 상단의 지정된 뷰를 가로로 표시합니다. 달력 이벤트는 이벤트 시작 및 종료 시간을 반영하는 그리드 내의 셀에 표시됩니다. 상황별 측면 패널은 달력 눈금 오른쪽에 나타나며, 기본적으로 달력의 이벤트를 나타내는 카드와 함께 어젠다 뷰를 표시합니다.
    9. 오른쪽 위에 있는 X 를 선택하여 미리 보기 창을 닫습니다.
      비즈니스 요구에 맞게 모든 기능을 갖춘 달력 구성요소를 구성하는 방법에는 여러 가지가 있습니다. 다음 단계에서는 몇 가지 옵션을 보여 줍니다.
    10. 오른쪽의 구성 패널에서 구성 탭을 선택하고 현재 선택한 보기 필드(아래로 스크롤해야 할 수 있음)에서 Calendar week를 선택하여 기본 보기를 일에서 주로 변경합니다.
      Calendar 구성 요소가 스테이지에서 즉시 업데이트되어 한 주를 표시합니다.
    11. 구성 탭에서 날짜 및 로캘 섹션으로 스크롤하고 시간대 필드에서 새로 선택하여 시간대를 변경합니다.
      새 시간대는 스테이지에서 달력의 오른쪽 상단에 표시됩니다.
    12. 기본적으로 달력에 표시되는 첫 번째 날은 월요일이지만 구성 탭의 주의 첫 번째 날 필드에 다른 숫자를 지정하여 변경할 수 있습니다.
      일요일에는 0, 월요일에는 1, 화요일에는 2를 입력합니다.
    13. 달력에 제목을 추가합니다.
      1. 왼쪽의 콘텐츠 트리에서 본문 > 달력 1 > 왼쪽 헤더 슬롯 으로 이동하고 + 구성 요소 추가를 선택합니다.
      2. 스타일화된 텍스트 구성요소를 선택합니다.
      3. 오른쪽의 구성 패널에서 None - Configure the component manually 를 선택합니다.
      4. 구성 패널에서 구성 탭을 선택합니다.
      5. Text(텍스트)에 새 제목 텍스트(예: My Calendar)를 입력합니다.
      6. 저장을 선택합니다.
    14. 상황별 패널을 구성합니다.
      1. 먼저 미리 보기를 선택하여 패널의 모양과 작동 방식을 확인합니다.
        패널이 오른쪽에 나타나며, 기본적으로 어젠다 뷰가 표시됩니다. 어젠다 뷰에서는 선택한 뷰의 모든 어젠다 항목에 대해 각 개별 이벤트에 대한 세부 정보가 포함된 카드가 표시됩니다(예: 일 또는 주). 어젠다 뷰 아이콘 아래에는 필터, 분석 센터 및 화살표에 대한 다른 아이콘이 있습니다. 다음 단계에서는 이러한 세 개의 아이콘을 제거하고 상황별 측면 패널에 대한 새 구성요소를 구성하는 프로세스를 안내합니다.
      2. 오른쪽 상단의 X 를 선택하여 미리 보기 오버레이를 닫습니다.
      3. 왼쪽의 콘텐츠 트리에서 본문 으로 이동하여 캘린더 1을 선택합니다.
      4. 구성 패널에서 구성 탭을 선택합니다.
      5. 기타 속성 섹션까지 아래로 스크롤합니다.
      6. 상황별 패널 항목 필드 위로 마우스를 이동하고 편집을 선택합니다.
      7. 각각에 대해 항목 제거(휴지통) 아이콘을 선택하여 filter-outline, analytics-center-outline 및 왼쪽 아래 화살표 채우기 아이콘을 제거합니다.
      8. 적용을 선택합니다.
        Calendar 구성 요소가 스테이지에서 즉시 업데이트되고 상황별 패널에 더 이상 세 개의 아이콘이 표시되지 않습니다.
      9. 저장을 선택합니다.
      10. 이제 컨텐츠 트리에서 Body > Calendar 1 > contextual-panel-content 로 이동하고 + 구성 요소 추가를 선택하여 상황별 측면 패널에 구성요소를 추가해 보겠습니다.
      11. 구성 요소 검색에서 flex를 입력하고 Flexbox를 선택합니다.
      12. 구성 패널에서 구성요소 이름 Container 2를 선택합니다.
      13. 구성 요소 레이블에 Text container를 입력합니다.
      14. 구성 요소 ID에 text_container를 입력합니다.
      15. 적용을 선택합니다.
      16. 구성 패널에서 None - Configure the component manually 를 선택합니다.
      17. 이제 컨텐츠 트리에서 Body > Calendar 1 > contextual-panel-content > Text Container 로 이동하고 + 구성 요소 추가를 선택하여 상황별 측면 패널에 구성 요소를 추가해 보겠습니다.
      18. Search components(구성 요소 검색)에서 sty를 입력하고 Stylized text(스타일이 지정된 텍스트)를 선택합니다.
      19. 구성 패널의 구성 탭에서 None - Configure the component manually 를 선택합니다.
      20. 구성 패널의 구성 탭에서 텍스트 필드의 내용을 제거하고 Hello World를 입력합니다.
      21. 저장을 선택합니다.
      22. 왼쪽의 콘텐츠 트리에서 본문 으로 이동하여 캘린더 1을 선택합니다.
      23. 구성 패널에서 구성 탭을 선택합니다.
      24. 기타 속성 섹션까지 아래로 스크롤합니다.
      25. 상황별 패널 항목 필드 위로 마우스를 이동하고 편집을 선택합니다.
      26. 상황별 패널 항목(1) 옆에 있는 + 아이콘을 선택합니다.
      27. 아이콘에 calendar-outline을 입력합니다.
      28. ID에 text_container를 입력합니다.
      29. 레이블에 Text Container(텍스트 컨테이너)를 입력합니다.
      30. 열기에서 false를 선택합니다.
      31. 적용을 선택합니다.
      32. 저장을 선택합니다.
        이제 상황별 측면 패널에 새 아이콘이 표시됩니다.
      33. 미리 보기를 선택합니다.
      34. 상황별 측면 패널에서 두 번째 새 아이콘을 선택합니다.
        패널에는 스타일화된 텍스트 구성요소와 Hello World라는 단어가 있는 텍스트 컨테이너가 표시됩니다.
      35. 오른쪽 위에 있는 X 를 선택하여 미리 보기 창을 닫습니다.
    15. 새로 만들기 버튼을 구성합니다.

    16. 달력 그리드에서 이벤트가 선택될 때 표시할 팝오버를 구성합니다.
      1. 왼쪽의 콘텐츠 트리에서 본문 > 열 레이아웃 1 > 열 1 > 달력 1 > 이벤트 팝오버 로 이동하고 + 구성 요소 추가를 선택합니다.