Calendar View

Calendar View

Download PDF

Calendar View

Calendar view is used for displaying and selecting dates. The range of dates supported by this calendar is configurable. A user can select a date by tapping on it and can scroll and fling the calendar to a desired date.


Confiugre.IT Calendar View represents events available for a date using dots and these events are consumed from iOS device Calendar.app. This control supports only single selection but you can set a range of dates from which user can select a date. Calendar View is highly customizable, you can design it the way you want using wide range of properties provided for calendar control.


 

    Keywords:
  • calendar view controller
  • calendar display
  • calendar control

Properties

  • Display
    PARAMETER
    DESCRIPTION
    Content Mode

    A flag used to determine how a view layout its content when its bounds change.

    User Interaction Enabled

    Enables the Interaction with user, i.e. control responds when user taps on it.

    Alpha

    Used to set the transparency to the object which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Map Annotation View.

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a Map Annotation View.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Date Display Format

    This property sets the format in which date has to be displayed on date picker button.e.g,"MM/dd/yyyy hh:mm:a" or "HH:mm".

    Selected Date Format

    This property is for setting date format for selected date. e.g, "MM/dd/yyyy".

    Month Year Header Text Format

    This property is for setting format in which month and year on calendar header should be displayed. e.g "MMM - YY" should be set for displaying like "JUN - 14". Defaults to "MMMM yyyy".

    Hide Cell Border

    This property is for disabling cell border. If this property is set cell border will not be shown.

    Enable Circular Cells
    This property is for enabling circular day number cells on calendar.
    Enable Static Height

    This property is for enabling static height for calendar. Cell size height will be adjusted according to number of cells in a month, height of calendar will remain same. If this is disabled cells size remain same and height of calendar will be changed according to number of cells in a month

    Enable Events

    This property is for showing event indicator dots on cell

    Display Day Label Text In Capitals

    This property is for showing day labels in capitals. If this property is enabled text on day labels will be shown in capitals i.e, MON, TUE, WED, THU, FRI, SAT, SUN else will be shown with initial capitals i.e, Mon, Tue, Wed, Thu, Fri, Sat, Sun.

    Calendar Header View Id

    This property is for setting "Object ID" of view which has to be displayed as calendar header view (header part of calendar control shows month, year and day labels (Mon, Tue, Wed, Thu, Fri, Sat, Sun) and month forward and backward navigation buttons).

    Month Year Displaying Label Id

    This property is for setting "Object ID" of label control (sub view of header view) on which month and year of calendar should be displayed.

    Maximum Number Of Dots

    This property is for setting maximum number of dots to be displayed on calendar cell.

    Header Offset From Calendar

    This property is for setting distance between header view and cells of calendar.

    Cell Size

    This property is for setting diameter for calendar day number cells when "Enable Circular Cells" property is enabled.

    Key Name to Cell Color

    Name of key in WS response which has color hex string value that has to be displayed as highlighted cell background color

    Events Data Source Key

    This property is for setting key name from web service for displaying dots.

    Cell Text Color
    This property is for setting color for text displayed on normal (unselected) day number cell of calendar.
    Normal Cell Border Color
    This property is for setting border color for normal (unselected) cell on calendar.
    Selected Cell Text Color
    This property is for setting color for text displayed on selected cell of calendar.
    Selected Cell Background Color
    Background color of user selected cell on calendar.
    Selected Cell Border Color
    This property is for setting border color for selected cell on calendar.
    Current Date Text Color
    This property is for setting color for text color displayed on current date indicator cell of calendar.
    Current Date Cell Background Color

    This property is for setting background color of current date indicator cell on calendar in selected state.

    Current Date Cell Selected Background Color
    This property is for setting background color of current date indicator cell on calendar in selected state.
    Inactive Cell Background Color

    This property is for setting background color for inactive(cell indicating days in next or previous month) cells on calendar.

    Day Indicator Text Color On Header

    This property is for setting color for text displayed on day indicator (Mon, Tue, Wed, Thu, Fri, Sat, Sun) labels on header view of calendar view.

    Weekend Cell text Color

    This property is for setting color for the text displayed on cells representing weekend (saturdays and sundays) of a month.

    Highlighted Cell Text Color

    This property is for setting text color for cells which were selected from web service response data on "LOAD" event based on value of key name set in "Key Name To Data" property.

    Highlighted Cell Background Color
    This property is for setting background color for cells which were selected from web service response data on "LOAD" event based on value of key name set in "Key Name To Data" property.
    Dot Color

    This property is for setting color for the dot(s) displayed on normal(unselected) cell of calendar.

    Selected Dot Color

    This property is for setting color for the dot(s) displayed on selected cell of calendar.

    Cell Text Font Name

    This property is for setting font style for text displayed on each day number cell of calendar.

    Cell Text Font Size

    This property is for setting font size for text displayed on each day number cell of calendar.

    Selected Cell Font Name
    This property is for setting font style for text displayed on selected cell of calendar.
    Selected Cell Font Size
    This property is for setting font size for text displayed selected cell of calendar.
    Current Date Cell Text Font Name
    This property is for setting font style for text displayed on current date cell of calendar.
    Current Date Cell Text Font Size
    This property is for setting font size for text displayed on current date cell of calendar.
    Header Text Font Name

    This property is for setting font style for text displayed on month year label of header. This is for setting font for default header. If "Calendar Header View Id" property is set this property will be ignored.

    Header Text Font Size

    This property is for setting font size for text displayed on month year label of header. This is for setting font for default header. if "Calendar Header View Id" property is set this property will be ignored.

    Day Label Text Font Name

    This property is for setting font style for text displayed on day label of header i.e Mon, Tue, Wed, Thu, Fri, Sat, Sun

    Day Label Text Font Size

    This property is for setting font size for text displayed on day label of header i.e Mon, Tue, Wed, Thu, Fri, Sat, Sun.

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Calendar View.

    YPos

    Sets the Y position of the Calendar View.

    Width

    Sets the width of the Calendar View.

    Height

    Sets the height of the Calendar View.

    Object ID

    Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.

    Locale
    This property is for setting locale in which dates will be displayed inside picker.
    Object Parent ID

    Set "Object ID" of Calendar View which contains this control or can serve as parent.

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.

    Key To DataSource

    Web service key which will be used as data source for Calendar View.

    Minimum Date

    This property is for setting the minimum date that can be selected form date picker or calendar.

    Maximum Date

    This property is for setting the maximum date that can be selected form date picker or calendar.

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value defines the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s).

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

  • Display/AdvanceText
    PARAMETER
    DESCRIPTION
    Hide

    Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.


    Advance - Sets auto resizing with respect to superview, for Calendar View.

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Horizontal

    Group of horizontal android default properties.

    Vertical

    Group of vertical android default properties.

    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.


    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge.

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge.

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge.

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge.

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

  • Advanced
    PARAMETER
    DESCRIPTION
    Opaque

    A Boolean value that determines whether the object is transparent or not

    Clips Subviews

    A Boolean value that determines whether subviews are confined to the bounds of the Map Annotation View.

  • Hidden
    PARAMETER
    DESCRIPTION
    Clears Context Before Drawing
    A Boolean value that determines whether the object's bounds should be automatically cleared before drawing.

Actions

  • Date Selected

    This event is triggered when a date is selected from calendar control.

  • Load

    This event is triggered on load of a Map Annotation View. Further, the desired Action can be defined as per the requirement.

Remarks

  • Minimum / Maximum Date

    Following are the ways in which you can set the desired minimum/maximum date :-
    -> Directly provide a date string in the format set on "Date Display Format" or "Selected Date Format" property.
    -> Set "Object ID" of another date picker or calendar control, if selected date should be set as minimum/maximum date for this calendar control.
    -> Set "today" if you want to set current date as minimum/maximum date.
    -> If you want to set a date based on current date i.e, some date after or before current date, use format like "{today}+2d"(two days added to current date), "{today}-2d"(two days subtracted from current date), "{today}+1y" (1 year added to current date), "{today}+3m"(3 months added to current date).
    -> If you want to set a date based on date selected from some date picker control i.e, some date after or before date selected from other Date Picker or calendar control , use format like "{DATE_PICKER1}+2d"(two days added to selected date), "{DATE_PICKER1}-2d"(two days subtracted from selected date), "{DATE_PICKER1}+1y" (1 year added to current date), "{DATE_PICKER1}+3m"(3 months added to selected date).

  • Static Height

    ConfigureIT provides “Enable Static Height” property for calendar control for enabling static height for calendar. Cell size height will be adjusted according to number of cells in a month, height of calendar will remain same. If this is disabled cells size remain same and height of calendar will be changed according to number of cells in a month.

  • Events

    Calendar control provides you provision for sync with events in device Calendar.app and indicating number of events available for a date using dots. You can event highlight some dates on calendar control based on API response using this feature. For showing dots on cells indicating number of events available for that particular date, you need to enable “Enable Events” property and you can customize dots using “Dot Color”, “Selected Dot Color” and “Maximum Number Of Dots” properties. For highlighting date cells based on API response, you need to add “Trigger Data Source(API Call)” action in calendar control LOAD event, enable “Enable Events” property and set “Events Data Source Key” property to API response key whose value gives date(s) to be highlighted. You can set highlighted color cell (highlighted through API response) using, “Highlighted Cell Background Color” property and highlighted cell text color using “Highlighted Cell Text Color” property. If you want different color for different highlighted cells you can include a cell color hex code key in API response and you need to set that key for “Key Name to Cell Color” property.

  • Header View

    You can configure calendar’s header part, if you do not like the default one. You need to follow some guidelines for configuring header view for calendar, which are listed below :-
    -> Header view should be “View” control. Add a “View” control on screen which has calendar control and set calendar control’s “Calendar Header View Id” property to this view. Header view will be added on top calendar control so set height for header view and calendar control accordingly without exceeding the height of screen.


    -> Header part of calendar control should contain month - year and day labels (Mon, Tue, Wed, Thu, Fri, Sat, Sun) and month forward and backward navigation buttons). Hence you need to add a label for displaying month - year on header view and set calendar control’s “Month Year Displaying Label Id” to that label. Make sure you leave some gap (minimum of 15 pixels) between month year label’s bottom edge and header view’s bottom edge as day labels(Mon, Tue,...Sun) will be added in that gap. Month Year will be displayed in format "MMMM yyyy", if you want it to be displayed in different format, you can set “Month Year Header Text Format”.


    -> It is mandatory to add two “Navigation Indicator Button” controls to calendar header view, on for navigating to next month and other for navigating previous month. Make sure you set “Object Parent Id” property of those two navigation buttons to calendar control. Enable “Navigation Button Forward” property of the navigation button on whose click next month has to be shown.


    -> You can customize day labels (mon, tue,.. etc) on header view using “Day Indicator Text Color On Header”, “Day Label Text Font Name”, “Day Label Text Font Size” and “Display Day Label Text In Capitals” properties

  • Cell Size

    You can set size of cells for calendar control using “Cell Size” property. As cells in calendar control are squares you need to set a value for cell size, which will be taken as width and height of cell.

  • Cell States and respective customization

    Following are the possible states for calendar cell :-
    -> Normal - Normal State(“Cell Text Color”, “Normal Cell Border Color”, “Cell Text Font Name”, “Cell Text Font Size”)
    -> Selected - When user taps on cell to select it.(“Selected Cell Text Color”, “Selected Cell Font Name”, “Selected Cell Font Size”, “Selected Cell Border Color”, “Selected Cell Background Color” )
    -> Today - Current date indicating cell. (“Current Date Text Color”, “Current Date Cell Background Color”, “Current Date Cell Selected Background Color”, “Current Date Cell Text Font Name”, “Current Date Cell Text Font Size”)
    -> Inactive - Cells belonging to next or previous month (“Inactive Cell Background Color”)
    -> Highlighted - Cells highlighted from API response.( “Highlighted Cell Background Color”, “Highlighted Cell Text Color”, “Key Name to Cell Color”)