Month Tablet View

The MAFCalendarMonthTabletView class displays appointments in a month view (in a grid-like arrangement of the days). Users can navigate across the months using a navigation bar at the top of the screen.

To create and present a default SAP style instance of MAFCalendarMonthTabletView, use:

MAFCalendarMonthView mv = new MAFCalendarMonthView(context, dataProvider, viewProvider, 
null, weekSelectable, true)

To create an MAFCalendarMonthTabletView in the Android layout XML, use:

    <com.sap.maf.uicontrols.calendar.monthview.MAFCalendarMonthView
        android:id="@+id/monthviewtablet"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        x:week_selection="true"
	x:tablet="true" />

The MAF skinning engine customizes the UI elements. To apply SAP style, set the custom style in the XML file for the properties indicated in the following XAML content example (which represents the default style of the CalendarMonthView TargetType):

	<Style TargetType="CalendarMonthView" Key="DefCalendarMonthView"
platform="android">
		<VisualStates>
			<VisualState Name="Selected">
				<!-- OK -->
				<Setter Property="DayTile_Background" Value="#ff0062A9" />
				<!-- OK -->
				<Setter Property="DayTile_Day_Label_Color" Value="#ffffffff" />
				<!-- OK -->
				<Setter Property="DayTile_DayWithApp_Label_Color" Value="#ffffffff" />
				<!-- OK -->
				<Setter Property="WeekDayHeader_Label_Background" Value="#ff0062A9" />
				<!-- OK -->
				<Setter Property="WeekDayHeader_Label_Color" Value="#ffffffff" />
			</VisualState>
		</VisualStates>
		<!-- OK -->
		<Setter Property="DayTileExtra_Background" Value="#fff2f2f2" />
		<!-- OK -->
		<Setter Property="Background" Value="#ffffffff" />
		<!-- OK -->
		<Setter Property="Navigation_Background" Value="#fff7f7f7" />
		<!-- OK -->
		<Setter Property="Navigation_Month_Label_Color" Value="#ff333333" />
		<!-- OK -->
		<Setter Property="Navigation_Arrow_Color" Value="#ffB8B8B9" />
		<!-- OK -->
		<Setter Property="DayTile_Day_Label_Color" Value="#ff333333" />
		<!-- OK -->
		<Setter Property="DayTile_DayWithApp_Label_Color" Value="#ff000000" />
		<Setter Property="DayTile_Day_Label_Background" Value="#ff00ffcc" />
		<!-- OK -->
		<Setter Property="WeekDayHeader_Label_Color" Value="#ff0069ca" />
		<!-- OK -->
		<Setter Property="WeekDayHeader_Label_Background" Value="#ffe9f3f8" />
		<!-- OK -->
		<Setter Property="WeekNumber_Label_Color" Value="#ff333333" />
		<!-- OK -->
		<Setter Property="Separator_Color" Value="#ffB8B8B9" />

	</Style>

MAF supports skinning of visual states. To set visual states, use the <VisualStates></VisualStates> tag:

		<VisualStates>
			<VisualState Name="Selected">
				<!-- OK -->
				<Setter Property="DayTile_Background" Value="#ff0062A9" />
				<!-- OK -->
				<Setter Property="DayTile_Day_Label_Color" Value="#ffffffff" />
				<!-- OK -->
				<Setter Property="DayTile_DayWithApp_Label_Color" Value="#ffffffff" />
				<!-- OK -->
				<Setter Property="WeekDayHeader_Label_Background" Value="#ff0062A9" />
				<!-- OK -->
				<Setter Property="WeekDayHeader_Label_Color" Value="#ffffffff" />
			</VisualState>
		</VisualStates>

You can also inherit the style definition from the standard MonthView and create a flavored version. This is an example for a red-styled MonthView flavor:

<Style TargetType="CalendarMonthView" Key="RedCalendarMonthView" 
BasedOn=”DefCalendarMonthView” platform="android">
		<VisualStates>
			<VisualState Name="Selected">
				<!-- OK -->
				<Setter Property="DayTile_Background" Value="#ff0062A9" />
				<!-- OK -->
				<Setter Property="DayTile_Day_Label_Color" Value="#ffffffff" />
				<!-- OK -->
				<Setter Property="DayTile_DayWithApp_Label_Color" Value="#ffffffff" />
				<!-- OK -->
				<Setter Property="WeekDayHeader_Label_Background" Value="#ff0062A9" />
				<!-- OK -->
				<Setter Property="WeekDayHeader_Label_Color" Value="#ffffffff" />
			</VisualState>
		</VisualStates>
		<!-- OK -->
		<Setter Property="DayTileExtra_Background" Value="#fff20000" />
		<!-- OK -->
		<Setter Property="Background" Value="#ffff0000" />
		<!-- OK -->
		<Setter Property="Navigation_Background" Value="#fff7f7f7" />
		<!-- OK -->
		<Setter Property="Navigation_Month_Label_Color" Value="#ff333333" />
		<!-- OK -->
		<Setter Property="Navigation_Arrow_Color" Value="#ffB8B8B9" />
		<!-- OK -->
		<Setter Property="DayTile_Day_Label_Color" Value="#ff333333" />
		<!-- OK -->
		<Setter Property="DayTile_DayWithApp_Label_Color" Value="#ff000000" />
		<Setter Property="DayTile_Day_Label_Background" Value="#ffff0000" />
		<!-- OK -->
		<Setter Property="WeekDayHeader_Label_Color" Value="#ff0069ca" />
		<!-- OK -->
		<Setter Property="WeekDayHeader_Label_Background" Value="#ffe90000" />
		<!-- OK -->
		<Setter Property="WeekNumber_Label_Color" Value="#ff333333" />
		<!-- OK -->
		<Setter Property="Separator_Color" Value="#ffB8B8B9" />

	</Style>

To create an MAFCalendarMonthTabletView from code, use:

MAFCalendarMonthView mv = new MAFCalendarMonthView(context, dataProvider, 
viewProvider, „RedCalendarMonthView”, weekSelectable, true)

To create a flavored month view in the layout XML, use:

    <com.sap.maf.uicontrols.calendar.monthview.MAFCalendarMonthView
        android:id="@+id/monthviewtablet"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        x:week_selection="true"
        x:flavor=”RedCalendarMonthView”
        x:tablet="true" />

You can change these properties in the skinning XML:

Background	Color of the MAFCalendarMonthTabletView’s background; can also be a freestyle gradient. Colors are defined as RGBA (red, green, blue, alpha).
Navigation_Background	Navigation button's background color.
Navigation_Month_Label_Color	Color of the month label.
Navigation_Arrow_Color	Color of the navigation arrow.
DayTile_Day_Label_Color	Color of the daytile day label.
DayTile_DayWithApp_Label_Color	Color of the label of daytile days with appointment.

See the style XML file for additional properties.