DayView

DayView is used to display a single day, current day will be visible by default. Appointments on a specific day will be arranged in respective timeslots based on its duration.

ViewHeader Appearance

You can customize the default appearance of view header in DayView by setting BackgroundColor, DayTextColor, DateTextColor, DayFontFamily, DateFontFamily, CurrentDateTextColor, CurrentDayTextColor, DayFontAttributes DateFontAttributes, DayFontSize and DateFontSize properties of ViewHeaderStyle property in SfSchedule.

<schedule:SfSchedule x:Name="schedule" ScheduleView = "DayView">
  <schedule:SfSchedule.ViewHeaderStyle>
	<schedule:ViewHeaderStyle
		BackgroundColor="#009688"
		DayTextColor="#FFFFFF"
		DateTextColor="#FFFFFF"
		DayFontFamily="Arial"
		DateFontFamily="Arial">
	</schedule:ViewHeaderStyle>
  </schedule:SfSchedule.ViewHeaderStyle>
</schedule:SfSchedule>
//Create new instance of Schedule
SfSchedule schedule = new SfSchedule();
schedule.ScheduleView = ScheduleView.DayView;
//Customize the schedule view header
ViewHeaderStyle viewHeaderStyle = new ViewHeaderStyle();
viewHeaderStyle.BackgroundColor = Color.FromHex("#009688");
viewHeaderStyle.DayTextColor = Color.FromHex("#FFFFFF");
viewHeaderStyle.DateTextColor = Color.FromHex("#FFFFFF");
viewHeaderStyle.DayFontFamily = "Arial";
viewHeaderStyle.DateFontFamily = "Arial";
schedule.ViewHeaderStyle = viewHeaderStyle;

Schedule day view header appearance

NOTE
FontAttributes and FontFamily are native to the platform. Custom font and the font which are not available in the specified platform will not be applied.

You can customize the height of the ViewHeader in DayView by setting ViewHeaderHeight property of SfSchedule.

<schedule:SfSchedule x:Name="schedule" ScheduleView = "DayView"      ViewHeaderHeight="50" >
schedule.ScheduleView = ScheduleView.DayView;
schedule.ViewHeaderHeight = 50;

Schedule day veiw header

Customize Font Appearance

you can change the appearance of Font by setting the DayFontFamily and DateFontFamily property of ViewHeaderStyle property in Schedule.

<schedule:ViewHeaderStyle.DayFontFamily>
  <OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf" WinPhone="Assets/Lobster-Regular.ttf#Lobster" />
</schedule:ViewHeaderStyle.DayFontFamily>
<schedule:ViewHeaderStyle.DateFontFamily>
  <OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf" WinPhone="Assets/Lobster-Regular.ttf#Lobster" />
</schedule:ViewHeaderStyle.DateFontFamily>
viewHeaderStyle.DayFontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf", "Assets/Lobster-Regular.ttf#Lobster");
viewHeaderStyle.DateFontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf", "Assets/Lobster-Regular.ttf#Lobster");

Schedule view header custom font

Refer this to configure the custom fonts in Xamarin.Forms.

ViewHeader Date Format

You can customize the date and day format of SfSchedule ViewHeader by using DateFormat and DayFormat properties of DayLabelSettings.

<schedule:SfSchedule>
	<schedule:SfSchedule.DayViewSettings>
		<schedule:DayViewSettings>
			<schedule:DayViewSettings.DayLabelSettings>
				<schedule:DayLabelSettings DateFormat=“dd”>
					<schedule:DayLabelSettings.DayFormat>
						<OnPlatform x:TypeArguments="x:String" iOS="EEE d MMMM YY" Android="EEEE" WinPhone="dddd" />
						</schedule:DayLabelSettings.DayFormat>
				</schedule:DayLabelSettings>
			</schedule:DayViewSettings.DayLabelSettings>
		</schedule:DayViewSettings>
	</schedule:SfSchedule.DayViewSettings>
</schedule:SfSchedule>
schedule.ScheduleView = ScheduleView.DayView;
//Creating new instance of DayViewSettings
DayViewSettings dayViewSettings = new DayViewSettings();
//Creating new instance of DayLabelSettings
DayLabelSettings dayLabelSettings = new DayLabelSettings();
//Customizing date format
dayLabelSettings.DateFormat = "dd";
dayLabelSettings.DayFormat = Device.OnPlatform("EEE d MMMM YY", "EEEE", "dddd");
dayViewSettings.DayLabelSettings = dayLabelSettings;
schedule.DayViewSettings = dayViewSettings;

Schedule viewheader custom date format

ViewHeader Tapped Event

You can handle single tap action of ViewHeader by using ViewHeaderTapped event of SfSchedule. This event will be triggered when the ViewHeader is Tapped. This event contains ViewHeaderTappedEventArgs argument which holds DateTime details in it.

<schedule:SfSchedule x:Name="schedule"
                     ScheduleView="DayView"
                     ViewHeaderTapped="Handle_ViewHeaderTapped" >
</schedule:SfSchedule>
//Creating  new instance of Schedule
SfSchedule schedule = new SfSchedule();
schedule.ScheduleView = ScheduleView.DayView;
schedule.ViewHeaderTapped += Handle_ViewHeaderTapped;
private void Handle_ViewHeaderTapped(object sender, ViewHeaderTappedEventArgs e)
{
    var dateTime = e.DateTime;
}

Change Time Interval

You can customize the interval of timeslots in DayView by setting TimeInterval property of SfSchedule.

<schedule:SfSchedule  x:Name="schedule"  ScheduleView="DayView" TimeInterval="180"/>
schedule.ScheduleView = ScheduleView.DayView;
schedule.TimeInterval = 180;

Schedule customize time interval day view

NOTE
If you modify the TimeInterval value (in minutes), you need to change the time labels format by setting the TimeFormat value as “hh:mm”. By default, TimeFormat value is "hh a". You can refer here for changing TimeFormat value.

Change Time Interval Height

You can customize the interval height of timeslots in DayView by setting TimeIntervalHeight property of SfSchedule.

<schedule:SfSchedule  x:Name="schedule"  ScheduleView="DayView" TimeIntervalHeight="180"/>
schedule.ScheduleView = ScheduleView.DayView;
schedule.TimeIntervalHeight = 180;

Schedule customize time slot height day view

Change Working hours

Working hours in DayView of Schedule control will be differentiated with non-working hours by separate color. By default, working hours will be between 09 to 18. You can customize the working hours by setting WorkStartHour and WorkEndHour properties of DayViewSettings. You can also customize the working hours along with minutes by setting double value which will be converted to time.

<schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
    <schedule:SfSchedule.DayViewSettings>
		<!--setting working hours properties -->
        <schedule:DayViewSettings 
            WorkStartHour="11.5"
            WorkEndHour="17.5">
            <schedule:DayViewSettings.DayLabelSettings>
                <schedule:DayLabelSettings TimeFormat="hh:mm"/>
            </schedule:DayViewSettings.DayLabelSettings>
        </schedule:DayViewSettings>
    </schedule:SfSchedule.DayViewSettings>
</schedule:SfSchedule>
schedule.ScheduleView = ScheduleView.DayView;
//Create new instance of DayViewSettings
DayViewSettings dayViewSettings = new DayViewSettings();
DayLabelSettings dayLabelSettings = new DayLabelSettings();
dayLabelSettings.TimeFormat = "hh:mm";
dayViewSettings.WorkStartHour = 11.5;
dayViewSettings.WorkEndHour = 17.5;
dayViewSettings.DayLabelSettings = dayLabelSettings;
schedule.DayViewSettings = dayViewSettings;

Schedule customizing working hours day view

NOTE
No need to specify the decimal point values for WorkStartHour and WorkEndHour, if you don’t want to set the minutes.

Changing StartHour and EndHour

Default value for StartHour and EndHour value is 0 to 24 to show all the time slots in DayView. You need to set StartHour and EndHour property of DayView, to show only the required time duration for end users. You can also set StartHour and EndHour in double value which will be converted to time to show required time duration in minutes.

<schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
    <schedule:SfSchedule.DayViewSettings>
        <!--setting working hours properties -->
        <schedule:DayViewSettings
            StartHour=“7.5”
            EndHour="18.5”>
            <schedule:DayViewSettings.DayLabelSettings>
                <schedule:DayLabelSettings TimeFormat="hh:mm" />
            </schedule:DayViewSettings.DayLabelSettings>
        </schedule:DayViewSettings>
    </schedule:SfSchedule.DayViewSettings>
</schedule:SfSchedule>
schedule.ScheduleView = ScheduleView.DayView;
//Create new instance of DayViewSettings
DayViewSettings dayViewSettings = new DayViewSettings();
DayLabelSettings dayLabelSettings = new DayLabelSettings();
dayLabelSettings.TimeFormat = "hh:mm";
dayViewSettings.StartHour = 7.5;
dayViewSettings.EndHour = 18.5;
dayViewSettings.DayLabelSettings = dayLabelSettings;
schedule.DayViewSettings = dayViewSettings;

Schedule customizing start and end hour day view

NOTE

  • StartHour must be greater than or equal to 0 and EndHour must be lesser than or equal to 24, otherwise InvalidDataException will be thrown.
  • EndHour value must be greater than StartHour, otherwise InvalidDataException will be thrown.
  • Schedule UI such as Appointments and NonAccessibleBlocks which does not fall within the StartHour and EndHour will not be visible and if it falls partially, it will be clipped.
  • No need to specify the decimal point values for StartHour and EndHour, if you don’t want to set the minutes.
  • The number of time slots will be calculated based on total minutes of a day and time interval (total minutes of a day ((start hour - end hour) * 60) / time interval).
  • If the custom time interval is given, then the number of time slots calculated based on given time interval should result in integer value, otherwise given time interval will be neglected and default time interval (60 minutes) will be considered.
  • If the custom start hour and end hour is given, then the number of time slots calculated based on given start hour, end hour should result in integer value, otherwise given end hour will be rounded off. For example, if StartHour is 7.2 (07:12AM), EndHour is 18.6 (06:36AM) and TimeInterval is 60 minutes, then EndHour will be rounded off to 18.2 (06:12PM).

Timeslot Appearance

You can customize the appearance of timeslots in DayView.

Timeslot customization in Work hours

You can customize the appearance of the WorkingHourTimeslot by its color using TimeSlotColor,TimeSlotBorderColor, TimeSlotBorderStrokeWidth, VerticalLineColor and VerticalLineStrokeWidth properties of DayViewSettings.

<schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
    <schedule:SfSchedule.DayViewSettings>
     <!--setting DayView settings properties -->
       <schedule:DayViewSettings
          TimeSlotColor="#fcf3c9"
          TimeSlotBorderColor="#fceb9f"
          TimeSlotBorderStrokeWidth="5"
		  VerticalLineColor="LightGray"
          VerticalLineStrokeWidth="5">
        </schedule:DayViewSettings>
     </schedule:SfSchedule.DayViewSettings>
 </schedule:SfSchedule>
schedule.ScheduleView = ScheduleView.DayView;
//Create new instance of DayViewSettings
DayViewSettings dayViewSettings = new DayViewSettings();
dayViewSettings.TimeSlotBorderColor = Color.FromHex("#fceb9f");
dayViewSettings.TimeSlotColor = Color.FromHex("#fcf3c9");
dayViewSettings.TimeSlotBorderStrokeWidth = 5;
dayViewSettings.VerticalLineColor = Color.LightGray;
dayViewSettings.VerticalLineStrokeWidth = 5;
schedule.DayViewSettings = dayViewSettings;

Schedule customizing time slot appearance day view

Timeslot customization in Non Working hours

You can customize the appearance of the Non-workingHourTimeslots by its color using NonWorkingHoursTimeSlotBorderColor, NonWorkingHoursTimeSlotColor, VerticalLineColor and VerticalLineStrokeWidth properties of DayViewSettings.

<schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
 <schedule:SfSchedule.DayViewSettings>
   <!--setting Day view settings properties -->
	 <schedule:DayViewSettings
		NonWorkingHoursTimeSlotColor="#fcf3c9"
		NonWorkingHoursTimeSlotBorderColor="#fceb9f"
		TimeSlotBorderStrokeWidth="5"
		VerticalLineColor="LightGray"
        VerticalLineStrokeWidth="5">
	 </schedule:DayViewSettings>
 </schedule:SfSchedule.DayViewSettings>
</schedule:SfSchedule>
schedule.ScheduleView = ScheduleView.DayView;
//Create new instance of DayViewSettings
DayViewSettings dayViewSettings = new DayViewSettings();
dayViewSettings.NonWorkingHoursTimeSlotBorderColor = Color.FromHex("#fceb9f");
dayViewSettings.NonWorkingHoursTimeSlotColor = Color.FromHex("#fcf3c9");
dayViewSettings.TimeSlotBorderStrokeWidth = 5;
dayViewSettings.VerticalLineColor = Color.LightGray;
dayViewSettings.VerticalLineStrokeWidth = 5;
schedule.DayViewSettings = dayViewSettings;

Schedule non working hours day view

NOTE
TimeSlotBorderStrokeWidth, VerticalLineColor and VerticalLineStrokeWidth properties common for both Working hours and Non-Working hour time slot customization.
VerticalLineColor and VerticalLineStrokeWidth properties applicable for Android only in DayView.

Non-Accessible timeslots

You can restrict or allocate certain timeslot as non-accessible blocks by using NonAccessibleBlocks of DayViewSettings, so that you can allocate those timeslots for predefined events/activities like Lunch hour using StartTime, EndTime, Text and Color properties of NonAccessibleBlocks.

<schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
	<!--setting non-accessing blocks-->
	<schedule:SfSchedule.DayViewSettings>
		<schedule:DayViewSettings>
			<schedule:DayViewSettings.NonAccessibleBlocks>
				<schedule:NonAccessibleBlock 
					 StartTime="13"
					 EndTime="14" 
					 Text="LUNCH" 
					 Color="Black" />
			</schedule:DayViewSettings.NonAccessibleBlocks>
		</schedule:DayViewSettings>
	</schedule:SfSchedule.DayViewSettings>
</schedule:SfSchedule>
  • c#
  • schedule.ScheduleView = ScheduleView.DayView;
    //Create new instance of NonAccessibleBlock
    NonAccessibleBlock nonAccessibleBlock = new NonAccessibleBlock();
    //Create new instance of NonAccessibleBlocksCollection
    NonAccessibleBlocksCollection nonAccessibleBlocksCollection = new NonAccessibleBlocksCollection();
    DayViewSettings dayViewSettings = new DayViewSettings();
    nonAccessibleBlock.StartTime = 13;
    nonAccessibleBlock.EndTime = 14;
    nonAccessibleBlock.Text = "LUNCH";
    nonAccessibleBlock.Color = Color.Black;
    nonAccessibleBlocksCollection.Add(nonAccessibleBlock);
    dayViewSettings.NonAccessibleBlocks = nonAccessibleBlocksCollection;
    schedule.DayViewSettings = dayViewSettings;

    Schedule non accessible block day view

    NOTE
    Selection and related events will not be working in this blocks.

    Change first day of week

    FirstDayOfWeek of SfSchedule is not applicable for DayView as it displays only one day.

    Time Label Formatting

    You can customize the format for the labels which are mentioning the time, by setting TimeFormat property of DayLabelSettings in DayViewSettings.

    schedule.ScheduleView = ScheduleView.DayView;
    DayViewSettings dayViewSettings = new DayViewSettings();
    DayLabelSettings dayLabelSettings = new DayLabelSettings();
    dayLabelSettings.TimeFormat = "hh mm";
    dayViewSettings.DayLabelSettings = dayLabelSettings;
    schedule.DayViewSettings = dayViewSettings;

    Schedule customizing time label day view

    Time Label Appearance

    You can customize the color for the labels which are mentioning the time, by setting TimeLabelColor property of DayLabelSettings in DayViewSettings.

    schedule.ScheduleView = ScheduleView.DayView;
    //Create new instance of DayViewSettings
    DayViewSettings dayViewSettings = new DayViewSettings();
    //Create new instance of DayLabelSettings
    DayLabelSettings dayLabelSettings = new DayLabelSettings();
    dayLabelSettings.TimeLabelColor = Color.FromHex("#8282ff");
    dayViewSettings.DayLabelSettings = dayLabelSettings;
    schedule.DayViewSettings = dayViewSettings;

    Schedule customizing time label appearance day view

    Time Label Size

    You can customize the size of the labels which are mentioning the time, by setting TimeLabelSize property of DayLabelSettings in DayViewSettings.

    schedule.ScheduleView = ScheduleView.DayView;
    //Create new instance of DayViewSettings
    DayViewSettings dayViewSettings = new DayViewSettings();
    //Create new instance of DayLabelSettings
    DayLabelSettings dayLabelSettings = new DayLabelSettings();
    //Customizing the size of the time label
    dayLabelSettings.TimeLabelSize = 15;
    dayViewSettings.DayLabelSettings = dayLabelSettings;
    schedule.DayViewSettings = dayViewSettings;

    Schedule cusotomizing time label size day view

    Selection

    You can customize the default appearance of selection UI in the timeslots.

    Selection customization using style

    You can customize the timeslot selection by by setting the BackgroundColor, BorderColor, BorderThickness, BorderCornerRadius properties to the SelectionStyle property of SfSchedule.

    <schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
    		<schedule:SfSchedule.SelectionStyle>
    			<schedule:SelectionStyle 
    				BackgroundColor="Blue" 
    				BorderColor="Black"
    				BorderThickness="5"
    				BorderCornerRadius="5">
    			</schedule:SelectionStyle>
    		</schedule:SfSchedule.SelectionStyle>
    </schedule:SfSchedule>
    schedule.ScheduleView = ScheduleView.DayView;
    //Create new instance of SelectionStyle
    SelectionStyle selectionStyle = new SelectionStyle();
    selectionStyle.BackgroundColor = Color.Blue;
    selectionStyle.BorderColor = Color.Black;
    selectionStyle.BorderThickness = 5;
    selectionStyle.BorderCornerRadius = 5;
    schedule.SelectionStyle = selectionStyle;

    Schedule customizing selectin style day view

    Selection customization using custom View

    You can replace the default selection UI with your custom view by setting SelectionView property of SfSchedule.

    <schedule:SfSchedule x:Name="schedule" ScheduleView="DayView">
    	<schedule:SfSchedule.SelectionView>
    		<Button 
    		   BackgroundColor="#FF9800"
    		   Text="+NewEvent" 
    		   TextColor="White"/>
    	</schedule:SfSchedule.SelectionView>
    </schedule:SfSchedule>
    schedule.ScheduleView = ScheduleView.DayView;
    //Add the CustomView
    Button customView = new Button();
    customView.Text = "+NewEvent";
    customView.BackgroundColor = Color.FromHex("#FF9800");
    customView.TextColor = Color.White;
    schedule.SelectionView = customView;

    Schedule customizing selection view day view

    Programmatic selection

    You can programmatically select the specific timeslot by setting corresponding date and time value to SelectedDate property of SfSchedule. By default, it is null.

    // Setting a date and time to select
    schedule.SelectedDate = new DateTime(2017, 10, 04, 10, 0, 0);

    You can clear the selection by setting SelectedDate as null.

    // Setting null value to deselect
    schedule.SelectedDate = null;

    You can download the entire source code of this demo for Xamarin.Forms from here Date_Selection

    NOTE

    • SfSchedule does not support multiple selection.
    • SfSchedule supports two-way binding of SelectedDate property.

    Schedule customizing selection day view