In MAUI Scheduler, you can customize the time label by using the TimeRulerTextStyle property of the DaysView and TimelineView in scheduler. XAML <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TimelabelCustomization.MainPage" BackgroundColor="{DynamicResource SecondaryColor}" xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"> <Grid> <scheduler:SfScheduler x:Name="Scheduler" View="Day" AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek"> </scheduler:SfScheduler> </Grid> </ContentPage> CS public MainPage() { InitializeComponent(); var timeRulerTextStyle = new SchedulerTextStyle() { TextColor = Colors.Red, FontSize = 10, }; this.Scheduler.DaysView.TimeRulerTextStyle = timeRulerTextStyle; this.Scheduler.TimelineView.TimeRulerTextStyle = timeRulerTextStyle; } } Day view TimelineDay view
Customize the schedule view label by using the TimeRulerFormat property in each Schedule view in the WinUI Calendar. XAML Create the WinUI Scheduler and set the ViewType as TimelineDay. <scheduler:SfScheduler x:Name="Schedule" ViewType="TimelineDay"> </scheduler:SfScheduler> XAML Customize the TimelineView label by setting the TimeRulerFormat property of the TimelineViewSettings. <scheduler:SfScheduler.TimelineViewSettings> <scheduler:TimelineViewSettings TimeRulerFormat="hh:mm"> </scheduler:TimelineViewSettings> </scheduler:SfScheduler.TimelineViewSettings> XAML Customize the WeekView, DayView, and WorkWeekView label by setting the TimeRulerFormat property of the DayViewSettings. <scheduler:SfScheduler.DaysViewSettings> <scheduler:DaysViewSettings TimeRulerFormat="hh:mm"> </scheduler:DaysViewSettings> </scheduler:SfScheduler.DaysViewSettings> Take a moment to pursue the documentation. You can also find the options about the Timeline Views.Conclusion I hope you enjoyed learning about how to format the Scheduler view (Calendar) time slot label in WinUI.You can refer to our WinUI Calendar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinUI Calendar example to understand how to create and manipulate data.For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
Change the time ruler view size by using the TimeRulerSize property of the TimelineViewSettings in the WinUI SfScheduler. XAML Bind the appointments to a schedule by using the Scheduler.ItemsSource property, and set the TimeRulerSize as 100 in the TimelineViewSettings to customize the size of the time ruler view. <scheduler:SfScheduler ViewType="TimelineWeek" ItemsSource="{Binding Meetings}"> <scheduler:SfScheduler.AppointmentMapping> <scheduler:AppointmentMapping StartTime="From" EndTime="To" AppointmentBackground="color" Subject="EventName"> </scheduler:AppointmentMapping> </scheduler:SfScheduler.AppointmentMapping> <scheduler:SfScheduler.TimelineViewSettings> <scheduler:TimelineViewSettings TimeRulerSize="100"> </scheduler:TimelineViewSettings> </scheduler:SfScheduler.TimelineViewSettings> </scheduler:SfScheduler>
You can change the time ruler view size by using the TimeRulerSize property of TimelineViewSettings in WPF Scheduler. C# Create class Meeting for appointment mapping. public class Meeting { public string EventName { get; set; } public DateTime From { get; set; } public DateTime To { get; set; } public Brush color { get; set; } } C# Create a SchedulerViewModel class and map the appointments. public class SchedulerViewModel : INotifyPropertyChanged { private ObservableCollection<Meeting> meetings; public SchedulerViewModel() { this.Meetings = new ObservableCollection<Meeting>(); this.AddAppointmentDetails(); this.AddAppointments(); } private void AddAppointmentDetails() { meetingSubjectCollection = new ObservableCollection<string>(); meetingSubjectCollection.Add("BigDoor Board Meeting"); meetingSubjectCollection.Add("Development Meeting"); this.colorCollection = new ObservableCollection<Brush>(); this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFA2C139"))); this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFD80073"))); this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF1BA1E2"))); } private void AddAppointments() { var today = DateTime.Now; var random = new Random(); for (int month = -1; month < 5; month++) { for (int day = -15; day < 15; day++) { for (double hour = -12; hour < 12; hour++) { for (int count = 0; count < 1; count++) { var meeting = new Meeting(); meeting.EventName = meetingSubjectCollection[random.Next(6)]; meeting.color = colorCollection[random.Next(10)]; meeting.From = today.AddMonths(month).AddDays(day).AddHours(hour); meeting.To = meeting.From.AddHours(1); this.Meetings.Add(meeting); } } } } } } XAML Bind the appointments to a schedule by using the Scheduler.ItemsSource property and set the TimeRulerSize as 100 in TimelineViewSettings to customize the size of the time ruler view <Window.DataContext> <local:SchedulerViewModel/> </Window.DataContext> <Grid> <syncfusion:SfScheduler x:Name="Schedule" ViewType="Timeline" ItemsSource="{Binding Meetings}"> <syncfusion:SfScheduler.AppointmentMapping> <syncfusion:AppointmentMapping StartTime="From" EndTime="To" AppointmentBackground="color" Subject="EventName"> </syncfusion:AppointmentMapping> </syncfusion:SfScheduler.AppointmentMapping> <syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:TimelineViewSettings TimeRulerSize="100"> </syncfusion:TimelineViewSettings> </syncfusion:SfScheduler.TimelineViewSettings> </syncfusion:SfScheduler> </Grid> View sample in GitHub ConclusionI hope you enjoyed learning about how to change the time ruler size in WPF Scheduler.You can refer to our WPF Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can create a roster schedule view using SfSchedule in Xamarin.Forms. A roster schedule is a schedule that provides information about a list of employees and associated information for a given time period. Step 1 Enable resource view by setting the ShowResourceView property of schedule, use Timeline view with Absolute ResourceViewMode and set schedule TimeInterval as 1440(24 hours) to make one slot for a day in TimelineView. <syncfusion:SfSchedule x:Name="schedule" ScheduleView="TimelineView" ShowResourceView="True" ResourceViewMode="Absolute" TimeInterval="1440"> Step 2 Customize the appearance of appointment using AppointmentTemplate. <syncfusion:SfSchedule.AppointmentTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.5*"/> <RowDefinition Height="0.5*"/> </Grid.RowDefinitions> <Label TextColor="Black" FontAttributes="Bold" Text="{Binding Subject}" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> <BoxView Color="{Binding Color}" CornerRadius="5" HeightRequest="10" WidthRequest="10" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" /> </Grid> </DataTemplate> </syncfusion:SfSchedule.AppointmentTemplate> Step 3 Set TimeRuler size to 0 to hide the time ruler and DaysCount as 7 to show Timeline for a week in TimelineViewSettings. As the default Timeline view starts from the current date, if you want to start Timeline from a particular day, you can set the MoveToDate property of schedule. TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); timelineViewSettings.TimeRulerSize = 0; timelineViewSettings.DaysCount = 7; this.schedule.TimelineViewSettings = timelineViewSettings; Step 4 Customize the ViewHeader date format as required using the DateFormat property of TimelineLabelSettings. TimelineLabelSettings labelSettings = new TimelineLabelSettings(); labelSettings.DateFormat = Device.RuntimePlatform == "UWP" ? "%d ddd" : "dd EEE"; timelineViewSettings.LabelSettings = labelSettings; this.schedule.TimelineViewSettings = timelineViewSettings; Output View sample in GitHub
