Views

11 Aug 201713 minutes to read

Schedule control provides four different types of views to display dates. Day view, Week view, Work Week view and Month view. It can be assigned to the schedule control by using ScheduleView property. Based on the user’s preference appointments can be viewed in any of the four type of view available. By default schedule control is assigned with day view.

Day View

Day view 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.

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.DayView;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Settings

Date Time Formating

You can format the date and time string in the schedule control using DayLabelSettings of DayViewSettings and the size of those strings are also customizable.

You can differentiate the timeslot panel using VerticalLineColor and VerticalLineStrokeWidth properties of DayViewSettings.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.DayView;

	//setting day view settings properties
	DayViewSettings dayViewSettings = new DayViewSettings();
	dayViewSettings.WorkStartHour=10;
	dayViewSettings.WorkEndHour=18;
	schedule.DayViewSettings=dayViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Working Hours

You can modify the working hours using WorkStartHour and WorkEndHour properties of DayViewSettings.

You can also differentiate working hours with non-working hour timeslots by its color using NonWorkingHoursTimeSlotBorderColor, NonWorkingHoursTimeSlotColor, TimeSlotColor,TimeSlotBorderColor and TimeSlotBorderStrokeWidth properties of DayViewSettings.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.DayView;

	//setting day view settings properties
	DayViewSettings dayViewSettings = new DayViewSettings();
	dayViewSettings.WorkStartHour = 10;
	dayViewSettings.WorkEndHour = 18;
	schedule.DayViewSettings=dayViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

All Day Appointments Color

You can view All day appointments in separate panel and the panels visibility can be enabled by setting ShowAllDay property of DayViewSettings as true.Also you can change the all day appointment panel color using the property AllDayAppointmentBackgroundColor. To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.DayView;

	//setting day view settings properties
	DayViewSettings dayViewSettings = new DayViewSettings();
	dayViewSettings.ShowAllDay=true;
	schedule.DayViewSettings=dayViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Note:These properties and customizations are applicable only for Day View. Customizations for other views are discussed under the respective views.

Week View

To view all the seven days of a particular week, by default if will be current week. Appointments arranged in timeslots based on its duration with respective day of the week.

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WeekView;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Settings

Date Time Formating

You can format the date and time string in the schedule control using WeekLabelSettings of WeekViewSettings and the size of those strings are also customizable.

Also you can differentiate the timeslot panel using VerticalLineColor and VerticalLineStrokeWidth properties of WeekViewSettings.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WeekView;

	//setting label size and formats
	WeekLabelSettings weekLabelSettings = new WeekLabelSettings();
	weekLabelSettings.TimeLabelSize = 14;
	weekLabelSettings.DateLabelSize = 25;
	weekLabelSettings.DateFormat = "dd ";
	weekLabelSettings.DayFormat = "EEEE";
	weekLabelSettings.TimeFormat = "hh:mm a ";
	weekViewSettings.WeekLabelSettings = weekLabelSettings;
	schedule.WeekViewSettings = weekViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Working Hours

You can differentiate working hours with non-working hour timeslots by its color using WorkStartHour and WorkEndHour properties of WeekViewSettings.

You can also differentiate working hours with non-working hour timeslots by its color using NonWorkingHoursTimeSlotBorderColor, NonWorkingHoursTimeSlotColor, TimeSlotColor,TimeSlotBorderColor and TimeSlotBorderStrokeWidth properties of WeekViewSettings.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WeekView;

	//setting week view settings properties
	WeekViewSettings weekViewSettings = new WeekViewSettings ();
	weekViewSettings.WorkStartHour = 10;
	weekViewSettings.WorkEndHour = 18;
	schedule.WeekViewSettings = weekViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

All Day Appointments Panel

You can view All day appointments in separate panel and the panels visibility can be enabled by setting ShowAllDay property of WeekViewSettings as true. Also you can change the all day appointment panel color using the property AllDayAppointmentBackgroundColor.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WeekView;

	//setting week view settings properties
	WeekViewSettings weekViewSettings = new WeekViewSettings();
	weekViewSettings.ShowAllDay = true;

	schedule.WeekViewSettings = weekViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Work Week View

To view working days of a particular week, by default current work week will be displayed. Saturday and Sunday are the non-working days by default; it can be customized with any days in a week. Appointments arranged in timeslots based on its duration with respective day of the week.

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WorkWeekView;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Settings

Date Time Formating

You can format the date and time string in the schedule control using WorkWeekLabelSettings of WorkWeekViewSettings and the size of those strings are also customizable.Also you can differentiate the timeslot panel using VerticalLineColor and VerticalLineStrokeWidth properties of WorkWeekViewSettings.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WorkWeekView;
	//setting label size and formats
	WorkWeekLabelSettings workWeekLabelSettings = new WorkWeekLabelSettings();
	workWeekLabelSettings.TimeLabelSize = 14;
	workWeekLabelSettings.DateLabelSize = 25;
	workWeekLabelSettings.DateFormat = "dd ";
	workWeekLabelSettings.DayFormat = "EEEE";
	workWeekLabelSettings.TimeFormat = "hh:mm a ";
	workWeekViewSettings.WorkWeekLabelSettings = workWeekLabelSettings;

	schedule.WorkWeekViewSettings = workWeekViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Working Hours

You can differentiate working hours with non-working hour timeslots by its color using WorkStartHour and WorkEndHour properties of WorkWeekViewSettings.

You can also differentiate working hours with non-working hour timeslots by its color using NonWorkingHoursTimeSlotBorderColor, NonWorkingHoursTimeSlotColor, TimeSlotColor,TimeSlotBorderColor and TimeSlotBorderStrokeWidth properties of WorkWeekViewSettings.To know more about customization of working hours refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WorkWeekView;

	//setting workweek view settings properties
	WorkWeekViewSettings workWeekViewSettings = new WorkWeekViewSettings ();	
	workWeekViewSettings.WorkStartHour = 10;
	workWeekViewSettings.WorkEndHour = 18;
	schedule.WorkWeekViewSettings = workWeekViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

All Day Appointments Color

You can view All day appointments in separate panel and the panels visibility can be enabled by setting ShowAllDay property of WorkWeekViewSettings as true. Also you can change the all day appointment panel color using the property AllDayAppointmentBackgroundColor.To know more about customization of All day appointment panel refer Timeslots Customization

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.WorkWeekView;

	//setting workweek view settings properties
	WorkWeekViewSettings workWeekViewSettings = new WorkWeekViewSettings();
	workWeekViewSettings.ShowAllDay = true;
	schedule.WorkWeekViewSettings = workWeekViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Non-Working Days

You can view the working days alone by restricting the non working days using NonWorkingDays property in Schedule.

Month View

To view entire dates of a particular month, by default current month will be displayed initially. Appointments arranged within the cell based on its duration. Current date is differentiated by some color and rest of the dates in a month will be in different color., Also the color differentiation for dates will be applicable for previous and next month dates.

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.MonthView;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Inline

Show Appointments Inline

By enabling Inline feature in month view, while touch the month view cell, appointments available in a particular day will be listed in inline view.

C#

SfSchedule schedule = new SfSchedule(this);
	schedule.ScheduleView = ScheduleView.WeekView;

	//setting Show inline 
	schedule.MonthViewSettings.ShowAppointmentsInline = true;

Inline View Customization

By enabling the Inline view feature, while tap on the schedule month view cell it will open a inline view which can be customized accordingly. To know more about Inline view customization of Month cell refer View Customization.

Inline Appointment Customization

By enabling the Inline view feature, while tap on the schedule month view cell it will open a inline view which contains list of appointments on a particular day.You can customize the inline appointments. To know more about Inline appointment customization of Month cell refer View Customization.

InlineAppointmentTapped Event

You can able to know the details of appointments in inline using InlineAppointmentTapped event in Schedule. Details of the selected appointment and the corresponding date is passed through InlineAppointmentTappedEventArgs as selectedAppointment and selectedDate respectively.

C#

monthViewSettings.InlineAppointmentTappedEvent += (object sender, MonthViewSettings.InlineAppointmentTappedEventArgs e) =>
	{
	var appointment = e.P2;
	var date = e.P1;
	};

Month Navigation Direction

MonthView of Schedule can be navigated horizontally and vertically.You can change the direction of navigation through MonthNavigationDirection property of MonthViewSettings.By default MonthNavigation value is Horizontal

C#

MonthViewSettings monthViewSettings = new MonthViewSettings();
	//To navigate vertically
	monthViewSettings.MonthNavigationDirection =  MonthNavigationDirections.Vertical;
	schedule.MonthViewSettings = monthViewSettings;

Settings

Date Time Formating

You can format the date and time string in the schedule control using MonthLabelSettings of MonthViewSettings.

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.MonthView;

	//setting month view settings properties
	MonthViewSettings monthViewSettings = new MonthViewSettings();

	//setting label size and formats
	MonthLabelSettings monthLabelSettings = new MonthLabelSettings();
	monthLabelSettings.DayLabelSize=10;
	monthLabelSettings.DayFormat="E";
	monthLabelSettings.DateLabelSize=26;
	monthLabelSettings.DateFormat="dd";
	monthViewSettings.MonthLabelSettings = monthLabelSettings;
	schedule.MonthViewSettings = monthViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Week number

You display the week number of the year in month view by setting ShowWeekNumber in property of MonthViewSettings are true. By default it is false.

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.MonthView;

	//setting month view settings properties
	MonthViewSettings monthViewSettings = new MonthViewSettings();
	monthViewSettings.ShowWeekNumber=true;
	schedule.MonthViewSettings = monthViewSettings;

	// Set our view from the "main" layout resource
	SetContentView(schedule);

Visible AppointmentCount

You can customize the number of appointments to be rendered inside a month view cell using VisibleCellAppointmentsCount property of MonthViewSettings

C#

//creating new instance for schedule
	schedule = new SfSchedule(this);

	//setting schedule view
	schedule.ScheduleView = ScheduleView.MonthView;

	//setting month view settings properties
	MonthViewSettings monthViewSettings = new MonthViewSettings();
	monthViewSettings.VisibleCellAppointmentsCount = 10;
	schedule.MonthViewSettings = monthViewSettings;
	
	// Set our view from the "main" layout resource
	SetContentView(schedule);

Month cell customization

You can customize the month cells of MonthView using various properties of MonthCellStyle. To know more about customization of MonthView refer View Customization