Here is some code that you can extend on to achieve your goal. It is just a quick hack to show how you can subclass the StandardCalendarControlUI (for Skinnable UI you will need to take a slightly different approach). In any case, I will suggest reading the code for the CalendarControl and its UIs that you will have downloaded in our m/c already if you have downloaded Curl IDE.

In the code below, you can use the "Arrow" to navigate.If you will click on the "lime" day frame, the date will be selected (although it does not currently show it with some kind of selection scheme).

{curl 6.0 applet}
{curl-file-attributes character-encoding = "windows-latin-1"}
 
{import * from CURL.GUI.SHAPES}
 
{define-class public open CustomCalendarControlUI  {inherits StandardCalendarControlUI}
  field private month-year-frame:Frame
  field private day-frame:#Frame
  field private display-day:int = 1
  {constructor public {default
                          control:#CalendarControl = null,
                          ...
                      }
     set self.month-year-frame = 
         {Frame halign = "center", width = {make-elastic}}
    {construct-super control = control, ...}
  }
 
  {method private {make-arrow point-left?:bool = true}:Graphic
    let arrow:ArrowShape =
        {ArrowShape
            {Distance2d 0cm, 0cm}, {Distance2d 1cm, 0cm},
            arrow-body-width = 1px,
            arrow-head-width = 11px,
            arrow-tail-width = 11px,
            arrow-head-style = 
                {if point-left? then 
                    ArrowStyle.none 
                 else 
                    ArrowStyle.solid
                },
            arrow-tail-style = 
                {if point-left? then
                    ArrowStyle.solid
                 else
                    ArrowStyle.none
                }
        }
    
    {return
        {Frame
            opaque-to-events? = true,
            arrow,
            {on e:PointerPress do
                {e.consume}
                def cc = self.calendar-control
                def day = self.display-day
 
                let new-date:DateTime = 
                    {if point-left? then
                         {DateTime.date  year = cc.display-year, month = cc.display-month, day = day - 1}
                     else
                         {DateTime.date  year = cc.display-year, month = cc.display-month, day = day + 1}
                    }
 
                {if new-date < cc.min-value then
                    set new-date = cc.min-value
                 elseif new-date > cc.max-value then
                    set new-date = cc.max-value
                }
                set self.display-day = new-date.info.day
                {self.day-frame.add self.display-day, replace? = true}
                {if cc.navigation-changes-value? then
                    {cc.set-value-with-events new-date}
                 else
                    {cc.set-display-month-year
                        month = new-date.info.month,
                        year = new-date.info.year
                    }
                }
            }
        }
    }
  }
 
  {method protected open {create-day-chooser}:Graphic
    def cc = self.calendar-control
    {if-non-null date = cc.value then
        set self.display-day = date.info.day 
    }
    def day-frame =
        {Frame
            background = "lime",
            valign = "center", halign = "center",
            height = 2in, width = 2in,
            self.display-day,
            {on e:PointerPress at frm:Frame do
                {cc.set-value-with-events 
                    {DateTime.date
                        year = cc.display-year, month = cc.display-month, day = self.display-day
                    }
                }
            }
        }
    set self.day-frame = day-frame
    {return day-frame}
  }
 
  {method protected open {create-main-panel}:Graphic
    let constant g:Grid = 
        {Grid control-appearance-changeable? = true}
    let constant cc:CalendarControl = self.calendar-control
 
    let constant day-chooser:Graphic = {self.create-day-chooser}
    {if not cc.show-date-controls? then
        {g.add
            day-chooser,
            left = {g.left},
            top = {g.top},
            right = {g.right},
            bottom = {g.bottom},
            vorigin = {g.vorigin-fiducial}
        }
        {return g}
    }
 
    let constant h-fid:GridFiducial =
        {GridFiducial g, horizontal? = true}
 
    {g.add
        {spaced-hbox
            valign = "center",
            {self.make-arrow},
            self.month-year-frame,
            {self.make-arrow point-left? = false}
        },
        left={g.left},
        top = {g.top},
        right={g.right},
        bottom = h-fid,
        vorigin = {g.vorigin-fiducial}
    }
 
    {g.add
        day-chooser,
        left = {g.left},
        top = h-fid,
        right = {g.right},
        bottom = {g.bottom}
    }
    {return g}
  }
 
  {method public {react-to-state-change}:void
    {super.react-to-state-change}
    let cc:CalendarControl = self.calendar-control
    let month:String = cc.month-names[http://cc.display-month - 1|http://cc.display-month - 1]
    {self.month-year-frame.add
        {bold {value month}, {value cc.display-year}},
        replace? = true
    }
  }
  
}
 
{CalendarControl}
 
{def frm = {Frame}}
 
 
{CalendarControl
    ui-object = {CustomCalendarControlUI},
    {on e:ValueFinished at cc:CalendarControl do
        {frm.add cc.value, replace? = true} 
    }
}
 
{value frm}
 

Message was edited by: Kamal

Message was edited by: Kamal

Thank you Kamal for your help.