20210831 - 캘린더 일정 관리, 그룹별 색상 표현

1. 페이지 구조

Parent 리전 : Static Contents

Sub 리전1 : 일정구분에 따른 색상 그룹 정보

Sub 리전2 : 캘린더

2. Sub 리전1 - Type : Classic Report

select listagg(type_nm, '  ') within group (order by orderby) event_types

  from (

         select '<span class="a-luminance-color t-Badge t-Badge--basic t-Badge--small '

||apex_escape.html(lower(css_cal))||'">'||apex_escape.html(cal_type_nm)

||'</span>' type_nm

              , orderby

           from x0822_calendar_css

          where use_yn = 'Y'

       )

Appearance - Template : Standard

Template Options : Use Template Defaults, Remove Body Padding, Hidden, Remove Borders, Scroll Default

Column - Security - Escape special characters : Disabled

3. Page - CSS - Inline

.t-Badge.apex-cal-default { background-color: #2578CF; border-color: #2578CF; color: #FFFFFF; }

.t-Badge.apex-cal-black { background-color: #303030; border-color: #303030; color: #FFFFFF; }

.t-Badge.apex-cal-blue { background-color: #4183D7; border-color: #4183D7; color: #FFFFFF; }

.t-Badge.apex-cal-bluesky { background-color: #6BB9F0; border-color: #6BB9F0; color: #404040; }

.t-Badge.apex-cal-brown { background-color: #D88935; border-color: #D88935; color: #404040; }

.t-Badge.apex-cal-cyan { background-color: #1ABC9C; border-color: #1ABC9C; color: #404040; }

.t-Badge.apex-cal-darkblue { background-color: #1F5F97; border-color: #1F5F97; color: #FFFFFF; }

.t-Badge.apex-cal-gray { background-color: #A0A0A0; border-color: #A0A0A0; color: #404040; }

.t-Badge.apex-cal-green { background-color: #2ECC71; border-color: #2ECC71; color: #404040; }

.t-Badge.apex-cal-lime { background-color: #28A346; border-color: #28A346; color: #FFFFFF; }

.t-Badge.apex-cal-orange { background-color: #F39C12; border-color: #F39C12; color: #404040; }

.t-Badge.apex-cal-red { background-color: #D91E18; border-color: #D91E18; color: #FFFFFF; }

.t-Badge.apex-cal-silver { background-color: #BDC3C7; border-color: #BDC3C7; color: #404040; }

.t-Badge.apex-cal-white { background-color: #F0F0F0; border-color: #F0F0F0; color: #404040; }

.t-Badge.apex-cal-yellow { background-color: #F1C40F; border-color: #F1C40F; color: #404040; }

3. Sub 리전2 - Type : Calendar

select a.cal_id

     , nvl(b.css_cal,'') as css

     , a.sdt

     , a.edt

     , nvl(b.cal_type_nm||': ','') ||a.mst as mst

     , a.dtl

  from x0822_calendar     a

     , x0822_calendar_css b

 where a.css_id = b.css_id(+)

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Remove UI Decoration, Scroll Default

Attributes - CSS Class : CSS

Create Link : Page

Name : P8_SDT

Value : &APEX$NEW_START_DATE.

Built in Calendar CSS

• apex-cal-red
• apex-cal-cyan
• apex-cal-blue
• apex-cal-bluesky
• apex-cal-darkblue
• apex-cal-green
• apex-cal-yellow
• apex-cal-silver
• apex-cal-brown
• apex-cal-lime
• apex-cal-white
• apex-cal-gray
• apex-cal-black
• apex-cal-orange

4. 완성 UI