The MAUI Scheduler allows you to display the calendar days or timeline views that autofit to the screen size when there is no need to scroll the timeslot views or when changing the start or end hour by setting the TimeIntervalWidth property value to -1 for Timeline views and TimeIntervalHeight value to -1 for Day, Week, and Workweek views. XAML <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WorkHour.MainPage" xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"> <scheduler:SfScheduler x:Name="Scheduler" View="TimelineDay" AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek"> <scheduler:SfScheduler.DaysView> <scheduler:SchedulerDaysView StartHour="9" EndHour="18" TimeIntervalHeight="-1"/> </scheduler:SfScheduler.DaysView> <scheduler:SfScheduler.TimelineView> <scheduler:SchedulerTimelineView StartHour="9" EndHour="18" TimeIntervalWidth="-1" /> </scheduler:SfScheduler.TimelineView> </scheduler:SfScheduler> </ContentPage>
.NET MAUI Scheduler displays all-day and span appointments in separate all-day appointment layouts for day, week, and workweek views. You can customize the more appointments count view to display the expandable more all day or span appointments count value in the all-day appointment layouts by using the MoreAppointmentsTemplate in DaysView of the scheduler. Note:It is applicable only for day, week, and workweek views. The BindingContext of the MoreAppointmentsTemplate is expandable more appointments count value in the all-day layout. XAML Add the template more appointments. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MoreAppointmentTemplate.MainPage" BackgroundColor="{DynamicResource SecondaryColor}" xmlns:local="clr-namespace:MoreAppointmentTemplate"> <Grid> <Grid.Resources> <DataTemplate x:Key="moreAppointmentsTemplate"> <StackLayout Background="LightGreen" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Label Text="{Binding}" TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"> </Label> </StackLayout> </DataTemplate> </Grid.Resources> <scheduler:SfScheduler x:Name="Scheduler" View="Day"> <scheduler:SfScheduler.AppointmentMapping> <scheduler:SchedulerAppointmentMapping Subject="EventName" StartTime="From" EndTime="To" Background="Background" IsAllDay="IsAllDay" StartTimeZone="StartTimeZone" EndTimeZone="EndTimeZone" RecurrenceExceptionDates="RecurrenceExceptions" RecurrenceRule="RecurrenceRule" RecurrenceId="RecurrenceId"/> </scheduler:SfScheduler.AppointmentMapping> <scheduler:SfScheduler.DaysView> <scheduler:SchedulerDaysView MoreAppointmentsTemplate="{StaticResource moreAppointmentsTemplate}"/> </scheduler:SfScheduler.DaysView> <scheduler:SfScheduler.Behaviors> <local:ScheduleBehavior/> </scheduler:SfScheduler.Behaviors> </scheduler:SfScheduler> </Grid> </ContentPage> View Sample on GitHub. Conclusion I hope you enjoyed learning about how to customize the appointments count view in .NET MAUI Scheduler.You can refer to our .NET MAUI Schedule feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Schedule 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!
In MAUI Scheduler, you can highlight the timeslots of working and non-working hours using the TimeRegions property of the DaysView and TimelineView in scheduler. By using the EnablePointerInteraction value you can enable or disable the touch interaction. By default the value of EnablePointerInteraction is true. XAML Initialize the scheduler with required properties. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WorkHour.MainPage" xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"> <Grid> <scheduler:SfScheduler x:Name="Scheduler" AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek"/> </Grid> </ContentPage> CS Add the required time regions for highlighting the working and non-working hour with the help of below method. public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); this.Scheduler.View = SchedulerView.Week; this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion(); this.Scheduler.DaysView.TimeRegions = this.GetTimeRegion(); } private ObservableCollection<SchedulerTimeRegion> GetTimeRegion() { var timeRegions = new ObservableCollection<SchedulerTimeRegion>(); DateTime today = DateTime.Now; Brush background = new SolidColorBrush(Colors.LightGray.WithAlpha(0.3f)); var nonWorkingRegion1 = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 00, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 9, 0, 0), EnablePointerInteraction = false, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR", Background = background, }; var nonWorkingRegion2 = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 18, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 23, 59, 0), EnablePointerInteraction = false, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR", Background = background, }; var workingRegion = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 9, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 18, 0, 0), EnablePointerInteraction = true, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR", Background = new SolidColorBrush(Colors.LightBlue.WithAlpha(0.3f)) }; var nonWorkingDays = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 0, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 23, 59, 0), EnablePointerInteraction = false, Background = background, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=SU,SA", }; var lunchBreak = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 13, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 14, 0, 0), EnablePointerInteraction = false, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR", Background = Brush.Gray, Text = "Lunch", TextStyle = new SchedulerTextStyle { TextColor = Colors.White, FontSize = 10 }, }; var breakFN = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 10, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 10, 30, 0), EnablePointerInteraction = false, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR", Background = Brush.Gray, Text = "Break", TextStyle = new SchedulerTextStyle { TextColor = Colors.White, FontSize = 10 }, }; var breakAN = new SchedulerTimeRegion() { StartTime = new DateTime(today.Year, today.Month, 1, 16, 0, 0), EndTime = new DateTime(today.Year, today.Month, 1, 16, 30, 0), EnablePointerInteraction = false, RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=TU,TH", Background = Brush.Gray, Text = "Break", TextStyle = new SchedulerTextStyle { TextColor = Colors.White, FontSize = 10 }, }; timeRegions.Add(nonWorkingRegion1); timeRegions.Add(nonWorkingRegion2); timeRegions.Add(workingRegion); timeRegions.Add(nonWorkingDays); timeRegions.Add(lunchBreak); timeRegions.Add(breakFN); timeRegions.Add(breakAN); return timeRegions; } }
The Scheduler allows customization of the time label text of the schedule views. The time label text can be customized for DayView, WeekView, WorkWeekView, and TimelineView by using the TimeRulerFormat property of the TimelineViewSettings and the DaysViewSettings in the Scheduler. XAML Bind the appointments to a schedule using the Scheduler.ItemsSource property. <scheduler:SfScheduler x:Name="scheduler" ViewType="TimelineWeek"> </scheduler:SfScheduler> C# Initialize an object for the TimelineViewSettings and append the required string value with the time slot value and assign it to the TimeRulerFormat property of the TimelineViewSettings. TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); timelineViewSettings.StartHour = 0; timelineViewSettings.EndHour = 23; timelineViewSettings.TimeRulerFormat = string.Format("'Room'") + " " + "HH"; this.AssociatedObject.TimelineViewSettings = timelineViewSettings; C# Initialize an object for the DaysViewSettings and append the required string value with the time slot value and assign it to the TimeRulerFormat property of the DaysViewSettings. DaysViewSettings daysViewSettings = new DaysViewSettings(); daysViewSettings.StartHour = 0; daysViewSettings.EndHour = 23; daysViewSettings.TimeRulerFormat = string.Format("'Room'") + " " + "HH"; this.AssociatedObject.DaysViewSettings = daysViewSettings; Timeline view Day view Week view Take a moment to pursue the documentation. You can also find the options like customizing the time label in Scheduler.ConclusionI hope you enjoyed learning about how to customize the time label of WinUI Scheduler (Calendar).You can refer to our WinUI Scheduler 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 Scheduler example 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!
Configure the day view as per the requirements in the WinUI SfScheduler. XAML Avoid the vertical scrolling by setting the StartHour and the EndHour properties of the DayViewSettings. By setting the TimeIntervalSize to -1, view the scheduler in full screen. <scheduler:SfScheduler x:Name="scheduler" ViewType="Day"> <scheduler:SfScheduler.DaysViewSettings> <scheduler:DaysViewSettings StartHour="11" EndHour="20" TimeIntervalSize="-1"> </scheduler:DaysViewSettings> </scheduler:SfScheduler.DaysViewSettings> </scheduler:SfScheduler> C# Disable the navigation by setting the MinimumDate and the MaximumDate properties of the schedule. By setting the DisplayDate property in the schedule, move to the specific date in the schedule. public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); this.scheduler.DisplayDate = DateTime.Now.Date.AddHours(11); this.scheduler.MinimumDate = DateTime.Now.Date; this.scheduler.MaximumDate = DateTime.Now.Date; } }
In the SfScheduler, move to the required time while switching the scheduler view by using the DisplayDate property in the CellTapped event, which will be fired while tapping the scheduler cell. XAML Add Scheduler, to handle the CellTapped handler. <scheduler:SfScheduler x:Name="Schedule" ViewType="Month" CellTapped="Schedule_CellTapped"/> C# In the CellTapped event, set the required SchedulerViewType to be switched. Set the DisplayDate to the schedule with the required hour and date to be moved on tapping the date on the month cell, so that the view changes to that specific date and time in the day view. By setting the current time to the date and subtracting the hours needed from the current time of the day, the time of the day can be positioned in the center of the view while switching from the month view to the day view. //Event Customization private void Schedule_CellTapped(object sender, CellTappedEventArgs e) { this.Schedule.ViewType = SchedulerViewType.Day; DateTime currentDate = DateTime.Now; DateTime SpecificDateTime = new DateTime(currentDate.Year, currentDate.Month, currentDate.Day, currentDate.Hour, currentDate.Minute, currentDate.Second); var numberOfSecondsPerHour = 3600; var requiredHours = 6; this.Schedule.DisplayDate = e.DateTime.AddSeconds((SpecificDateTime.Hour - requiredHours) * numberOfSecondsPerHour); }
Restrict the day view for the selected week only, by using the MinimumDate and the MaximumDate properties of the WinUI SfScheduler. XAML Set the FirstDayOfWeek as Monday and the ViewType as Week. <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" Spacing="10" Padding="10" HorizontalAlignment="Right" Grid.Row="0"> <Button Content="Day" Width="100" x:Name="DayButton" Click="OnDayButtonClicked"/> <Button Content="Week" Width="100" x:Name="WeekButton" Click="OnWeekButtonClicked"/> </StackPanel> <scheduler:SfScheduler x:Name="scheduler" Grid.Row="1" FirstDayOfWeek="Monday" ViewType="Week" ViewChanged="OnSchedulerViewChanged"> </scheduler:SfScheduler> </Grid> C# Get the week’s first and last date by using the ViewChangedEventArgs argument of the ViewChanged event. Using this, set the MinimumDate and the MaximumDate for the schedule while navigating to day view. Also, change the min/max value while navigating back to week view. public sealed partial class MainPage : Page { DateTime minDate, maxDate; public MainPage() { this.InitializeComponent(); scheduler.DisplayDate = DateTime.Now.Date.AddHours(9); } private void OnDayButtonClicked(object sender, RoutedEventArgs e) { this.scheduler.MinimumDate = minDate; this.scheduler.MaximumDate = maxDate; this.scheduler.ViewType = SchedulerViewType.Day; } private void OnWeekButtonClicked(object sender, RoutedEventArgs e) { this.scheduler.ViewType = SchedulerViewType.Week; } private void OnSchedulerViewChanged(object sender, Syncfusion.UI.Xaml.Scheduler.ViewChangedEventArgs e) { if (this.scheduler.ViewType == SchedulerViewType.Week) { minDate = e.NewValue.ActualStartDate; maxDate = e.NewValue.ActualEndDate; this.scheduler.MinimumDate = new DateTime(01, 01, 01); this.scheduler.MaximumDate = new DateTime(9999, 12, 31); } } }
With the help of the TimeIntervalSize property in the WPF Schedule, display the full-screen scheduler views. XAML To display the full-screen scheduler, set the TimeIntervalSize property to -1 in the DaysViewSettings for Day, Week, and WorkWeek views, and in the TimelineViewSettings for TimelineDay, TimelineWeek, and TimelineWorkWeek views. <Grid x:Name="grid"> <syncfusion:SfScheduler x:Name="schedule" ViewType="Week" > <syncfusion:SfScheduler.DaysViewSettings> <syncfusion:DaysViewSettings TimeIntervalSize="-1"/> </syncfusion:SfScheduler.DaysViewSettings> <syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:TimelineViewSettings TimeIntervalSize="-1"/> </syncfusion:SfScheduler.TimelineViewSettings> </syncfusion:SfScheduler> <interactivity:Interaction.Behaviors> <local:ScheduleBehavior/> </interactivity:Interaction.Behaviors> </Grid> View Sample in GitHub ConclusionI hope you enjoyed learning about ow to show full screen scheduler views in WPF Scheduler.You can refer to our WPF Scheduler feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Scheduler 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!
In the Flutter Event Calendar, change the month header format by using the headerDateFormat property. Using the onViewChanged callback, the different header format can be assigned based on the calendar views. child: SfCalendar( view: CalendarView.day, controller: _controller, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth, CalendarView.schedule ], dataSource: _getCalendarDataSource(), headerDateFormat: _headerFormat, onViewChanged: viewChanged, ) void viewChanged(ViewChangedDetails viewChangedDetails) { if (_controller.view == CalendarView.day) { _headerFormat = 'yyy MMM'; } else if (_controller.view == CalendarView.week || _controller.view == CalendarView.workWeek || _controller.view == CalendarView.timelineDay || _controller.view == CalendarView.timelineMonth) { _headerFormat = 'MMM yyy'; } else if (_controller.view == CalendarView.month) { _headerFormat = 'MMMM yy'; } else if (_controller.view == CalendarView.timelineWeek || _controller.view == CalendarView.timelineWorkWeek) { _headerFormat = 'MMM yy'; } else { _headerFormat = 'yyy'; } SchedulerBinding.instance!.addPostFrameCallback((timeStamp) { setState(() { }); }); } View sample in GitHub
You can restrict the day view for the selected week only by using the MinimumDate and MaximumDate properties of WPF Scheduler . XAML Set the FirstDayOfWeek as Monday and ViewType as Week. <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="0"> <Button Content="Day" Width="100" x:Name="DayButton"/> <Button Content="Week" Width="100" x:Name="WeekButton"/> </StackPanel> <syncfusion:SfScheduler x:Name="Schedule" Grid.Row="1" FirstDayOfWeek="Monday" ViewType="Week" ItemsSource="{Binding Meetings}"> <syncfusion:SfScheduler.AppointmentMapping> <syncfusion:AppointmentMapping StartTime="From" EndTime="To" Subject="EventName" AppointmentBackground="Color" IsAllDay="IsAllDay"/> </syncfusion:SfScheduler.AppointmentMapping> </syncfusion:SfScheduler> <interactivity:Interaction.Behaviors> <local:SchedulerBehavior/> </interactivity:Interaction.Behaviors> </Grid> C# You can get the week’s first and last date by using the ViewChangedEventArgs argument of ViewChanged event, using this you can set the MinimumDate and MaximumDate for schedule while navigating to day view. Also, changing the min/max value while navigating back to week view. public class SchedulerBehavior : Behavior<Grid> { SfScheduler scheduler; Button dayButton, weekButton; private DateTime minDate, maxDate; protected override void OnAttached() { base.OnAttached(); scheduler = this.AssociatedObject.FindName("Schedule") as SfScheduler; dayButton = this.AssociatedObject.FindName("DayButton") as Button; weekButton = this.AssociatedObject.FindName("WeekButton") as Button; scheduler.DisplayDate = DateTime.Now.Date.AddHours(9); this.OnWirEvents(); } private void OnWirEvents() { this.dayButton.Click += DayButton_Click; this.weekButton.Click += WeekButton_Click; this.scheduler.ViewChanged += Scheduler_ViewChanged; } private void Scheduler_ViewChanged(object sender, ViewChangedEventArgs e) { if (this.scheduler.ViewType == SchedulerViewType.Week) { minDate = e.NewValue.ActualStartDate; maxDate = e.NewValue.ActualEndDate; this.scheduler.MinimumDate = new DateTime(01, 01, 01); this.scheduler.MaximumDate = new DateTime(9999, 12, 31); } } private void WeekButton_Click(object sender, RoutedEventArgs e) { this.scheduler.ViewType = SchedulerViewType.Week; } private void DayButton_Click(object sender, RoutedEventArgs e) { this.scheduler.MinimumDate = minDate; this.scheduler.MaximumDate = maxDate; this.scheduler.ViewType = SchedulerViewType.Day; } protected override void OnDetaching() { base.OnDetaching(); this.UnWireEvents(); this.scheduler = null; this.dayButton = null; this.weekButton = null; } private void UnWireEvents() { this.dayButton.Click -= DayButton_Click; this.weekButton.Click -= WeekButton_Click; this.scheduler.ViewChanged -= Scheduler_ViewChanged; } } View Sample in GitHub ConclusionHope you enjoyed learning about how to show a particular week in a day view of WPF Scheduler.You can refer to our WPF Scheduler feature tour page to learn about its other groundbreaking feature representations. You can explore our WPF Scheduler documentation to understand how to present and manipulate data.For current customers, you can check out our Angular 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 Angular Diagram and other Angular components.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!
In the Flutter Event Calendar, you can highlight the current day by using the todayHighlightColor property of calendar. import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_calendar/calendar.dart'; void main() { return runApp(TodayHighLightColor()); } class TodayHighLightColor extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SafeArea( child: SfCalendar( view: CalendarView.day, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth, CalendarView.schedule ], dataSource: _getCalendarDataSource(), todayHighlightColor: Colors.green, ), )), ); } _AppointmentDataSource _getCalendarDataSource() { List<Appointment> appointments = <Appointment>[]; appointments.add(Appointment( startTime: DateTime.now(), endTime:DateTime.now().add(Duration(hours: 1)), subject: 'Meeting', color: Colors.blue, )); appointments.add(Appointment( startTime: DateTime.now().add(Duration(hours: 2)), endTime: DateTime.now().add(Duration(hours: 3)), subject: 'Planning', color: Colors.green, )); return _AppointmentDataSource(appointments); } } class _AppointmentDataSource extends CalendarDataSource { _AppointmentDataSource(List<Appointment> source) { appointments = source; } } View sample in GitHub
You can restrict the day view for the selected week only by using the MinDisplayDate and MaxDisplayDate properties of Xamarin SfSchedule. XAML Set the FirstDayOfWeek as 2 and ScheduleView as WeekView <ContentPage.ToolbarItems> <ToolbarItem x:Name="Day" Priority="1" Order="Primary" Text="Day"/> <ToolbarItem x:Name="Week" Priority="1" Order="Primary" Text="Week"/> </ContentPage.ToolbarItems> <ContentPage.Behaviors> <local:SchedulerBehavior/> </ContentPage.Behaviors> <ContentPage.Content> <syncfusion:SfSchedule x:Name="schedule" FirstDayOfWeek="2" ScheduleView="WeekView" DataSource="{Binding Appointments}"> <syncfusion:SfSchedule.BindingContext> <local:SchedulerViewModel/> </syncfusion:SfSchedule.BindingContext> </syncfusion:SfSchedule> </ContentPage.Content> C# You can get the week’s first and last date by using the VisibleDatesChangedEventArgs argument of VisibleDatesChanged event, using this you can set the MinDisplayDate and MaxDisplayDate for schedule while navigating to day view. Also, changing the min/max value while navigating back to week view. public class SchedulerBehavior : Behavior<ContentPage> { SfSchedule schedule; ToolbarItem day, week; DateTime? minDate, maxDate; protected override void OnAttachedTo(ContentPage bindable) { base.OnAttachedTo(bindable); schedule = bindable.FindByName<SfSchedule>("schedule"); day = bindable.FindByName<ToolbarItem>("Day"); week = bindable.FindByName<ToolbarItem>("Week"); schedule.VisibleDatesChangedEvent += Schedule_VisibleDatesChangedEvent; day.Clicked += Day_Clicked; week.Clicked += Week_Clicked; } private void Schedule_VisibleDatesChangedEvent(object sender, VisibleDatesChangedEventArgs e) { if (schedule.ScheduleView == ScheduleView.WeekView) { minDate = e.visibleDates[0].Date; maxDate = e.visibleDates[e.visibleDates.Count - 1].Date; schedule.MinDisplayDate = new DateTime(01, 01, 01); schedule.MaxDisplayDate = new DateTime(9999, 12, 31); } } private void Week_Clicked(object sender, EventArgs e) { schedule.ScheduleView = ScheduleView.WeekView; } private void Day_Clicked(object sender, EventArgs e) { schedule.ScheduleView = ScheduleView.DayView; schedule.MinDisplayDate = (DateTime)minDate; schedule.MaxDisplayDate = (DateTime)maxDate; } } View sample in GitHub
In the Flutter Event Calendar, you can change the time interval, width and height by using the timeInterval properties timeIntervalHeight and timeIntervalWidth in TimeSlotViewSettings. Note:The timeIntervalWidth property is only applicable for timeline day, week, work week, month views. The timeIntervalHeight property is only applicable for day, week, work week views. import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_calendar/calendar.dart'; void main() { return runApp(TimeInterval()); } class TimeInterval extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SafeArea( child: SfCalendar( view: CalendarView.day, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth ], dataSource: _getCalendarDataSource(), timeSlotViewSettings: TimeSlotViewSettings( timeInterval: Duration(hours: 2), timeIntervalHeight: 80, timeIntervalWidth: 100), ), )), ); } _AppointmentDataSource _getCalendarDataSource() { List<Appointment> appointments = <Appointment>[]; appointments.add(Appointment( startTime: DateTime(2021, 1, 25, 04, 0, 0), endTime: DateTime(2021, 1, 25, 05, 0, 0), subject: 'Meeting', color: Colors.blue, )); appointments.add(Appointment( startTime: DateTime(2021, 1, 26, 01, 0, 0), endTime: DateTime(2021, 1, 26, 03, 0, 0), subject: 'Planning', color: Colors.green, )); return _AppointmentDataSource(appointments); } } class _AppointmentDataSource extends CalendarDataSource { _AppointmentDataSource(List<Appointment> source) { appointments = source; } } View sample in GitHub
In the Flutter Event Calendar, you can show the particular week in day view by using the minDate and maxDate property of the calendar. In initState(), set the default values. DateTime? _minDate, _maxDate, _firstDate, _lastDate; final CalendarController? _controller = CalendarController(); Using the onViewChanged callback of the Flutter calendar get the first and last dates of the visible dates. void viewChanged(ViewChangedDetails viewChangedDetails) { if (_controller!.view == CalendarView.week) { _firstDate = viewChangedDetails.visibleDates[0]; _lastDate = viewChangedDetails .visibleDates[viewChangedDetails.visibleDates.length - 1]; } } If the calendar view is day, set_firstDate, _lastDate to _minDate and _maxDate. child: SfCalendar( view: CalendarView.week, controller: _controller, minDate: _minDate, maxDate: _maxDate, onViewChanged: viewChanged, ), appBar: AppBar( actions: [ FlatButton( onPressed: () { setState(() { _controller!.view = CalendarView.day; _minDate = _firstDate; _maxDate = _lastDate; }); }, child: Text("Day"), ), FlatButton(padding: const EdgeInsets.only(left: 10), onPressed: () { setState(() { _controller!.view = CalendarView.week; _minDate = DateTime(01, 01, 01, 01, 0, 0); _maxDate = DateTime(9999, 12, 31, 01, 0, 0); }); }, child: Text("Week"), ), ], ), View sample in GitHub ConclusionI hope you enjoyed learning about how to show a particular week in a day view of Flutter Calendar.You can refer to our Flutter 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 Flutter Calendar example 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!
In the Flutter Event Calendar, you can format the view header date and day by using the dayFormat and dateFormat properties in TimeSlotViewSettings. Inside the state initialize the default values for calendar. final CalendarController _controller = CalendarController(); String _dayFormat = 'EEE', _dateFormat = 'dd'; CalendarDataSource? _dataSource; @override initState() { _dataSource = _getCalendarDataSource(); super.initState(); } Using onViewChanged callback get the current calendar view, based on the calendar views, set the dayFormat and dateFormat. void viewChanged(ViewChangedDetails viewChangedDetails) { if (_controller.view == CalendarView.day) { SchedulerBinding.instance!.addPostFrameCallback((Duration duration) { if (_dayFormat != 'EEEEE' || _dateFormat != 'dd') { setState(() { _dayFormat = 'EEEEE'; _dateFormat = 'dd'; }); } else { return; } }); } else { SchedulerBinding.instance!.addPostFrameCallback((Duration duration) { if (_dayFormat != 'EEE' || _dateFormat != 'dd') { setState(() { _dayFormat = 'EEE'; _dateFormat = 'dd'; }); } else { return; } }); } } Assign _dayFormat and _dateFormat values to the calendar. child: SfCalendar( view: CalendarView.week, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek ], controller: _controller, dataSource: _dataSource, timeSlotViewSettings: TimeSlotViewSettings( dateFormat: _dateFormat, dayFormat: _dayFormat), onViewChanged: viewChanged, ), View sample in GitHub Day view Week view Work week view ConclusionI hope you enjoyed learning about how to format the view header day and date in the Flutter Calendar.You can refer to our Flutter Calender feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Calendar 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!
In the Flutter Event Calendar, you can customize the day, month, week header of schedule view by using the DayHeaderSettings, WeekHeaderSettings, MonthHeaderSettings properties of ScheduleViewsettings. child: SfCalendar( view: CalendarView.schedule, scheduleViewSettings: ScheduleViewSettings( dayHeaderSettings: DayHeaderSettings( dateTextStyle: TextStyle(color: Colors.green, fontSize: 10), dayFormat: 'EEEE', dayTextStyle: TextStyle(color: Colors.red, fontSize: 10)), weekHeaderSettings: WeekHeaderSettings( weekTextStyle: TextStyle( color: Colors.pink, ), startDateFormat: 'MMMM dd, yyyy', endDateFormat: 'MMMM dd, yyyy'), monthHeaderSettings: MonthHeaderSettings( monthFormat: 'MMM yyyy', backgroundColor: Colors.teal, monthTextStyle: TextStyle(color: Colors.black),textAlign: TextAlign.center)), dataSource: _getCalendarDataSource(), )), View sample in GitHub ConclusionI hope you enjoyed learning about how to customize date header of Schedule view in the Flutter Calendar.You can refer to our Flutter Calendar page to know about its other groundbreaking feature representations. You can also explore our Flutter Calendar Documentation to understand how to manipulate data.For current customers you can check out on our Flutter components from the License and Download page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Flutter Calendar and other Flutter components.If you have any queries or require clarifications, please let us know in the comment 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 show Tooltip for appointment view by using the AppointmentTemplate property of ViewSettingsBase in WPF Scheduler. XAML You can customize the appointment view for Week, WorkWeek and Day view with Tooltip by using the AppointmentTemplate property of DaysViewSettings. For timeline and month view use the AppointmentTemplate property of TimeLineViewSettings and MonthViewSettings. <Window.DataContext> <local:SchedulerViewModel /> </Window.DataContext> <Window.Resources> <DataTemplate x:Key="dayAppointmentTemplate"> <Grid Background="{Binding AppointmentBackground}"> <TextBlock Margin="5,5,0,0" HorizontalAlignment="Stretch" Text="{Binding Subject}" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" /> <Grid.ToolTip> <ToolTip> <Grid Background="WhiteSmoke" Height="90" Width="150"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition /> </Grid.RowDefinitions> <Border Grid.Row="0" Background="#63707e"> <TextBlock FontSize="12" Text="{Binding Subject}" Grid.Row="0" Foreground="WhiteSmoke"/> </Border> <TextBlock FontSize="14" FontWeight="Bold" FontStyle="Italic" Text="Location: " Background="#93b5b3" Foreground="White" Grid.Row="1"/> <TextBlock FontSize="14" Text="{Binding Location}" Grid.Row="2" Background="#c8dad3" Foreground="White"/> </Grid> </ToolTip> </Grid.ToolTip> </Grid> </DataTemplate> </Window.Resources> <Grid> <syncfusion:SfScheduler x:Name="schedule" Grid.Row="1" ViewType="week" ItemsSource="{Binding AppointmentCollection}"> <syncfusion:SfScheduler.DaysViewSettings> <syncfusion:DaysViewSettings AppointmentTemplate="{StaticResource dayAppointmentTemplate}"/> </syncfusion:SfScheduler.DaysViewSettings> <syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:TimelineViewSettings AppointmentTemplate="{StaticResource dayAppointmentTemplate}"/> </syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:SfScheduler.MonthViewSettings> <syncfusion:MonthViewSettings AppointmentTemplate="{StaticResource dayAppointmentTemplate}"/> </syncfusion:SfScheduler.MonthViewSettings> </syncfusion:SfScheduler> </Grid> </Window> View sample in GitHub ConclusionHope you enjoyed learning about how to show tooltip for appointments in WPF Scheduler (Calendar). You can refer to our WPF Scheduler feature tour page to learn about its other groundbreaking feature representations. You can explore our WPF Scheduler documentation to understand how to present and manipulate data.For current customers, you can check out our Angular 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 Angular Diagram and other Angular components.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 configure the day view as per your requirements in Xamarin.Forms SfSchedule. XAML You can disable the navigation by setting the EnableNavigation property of the schedule and avoid the vertical scrolling by setting the StartHour and EndHour properties of DayViewSettings. By setting TimeIntervalHeight to -1, you can view the scheduler in full screen. <schedule:SfSchedule x:Name="Schedule" DataSource="{Binding Meetings}" ScheduleView="DayView" EnableNavigation="False" TimeIntervalHeight="-1" Margin="0"> <schedule:SfSchedule.DayViewSettings> <schedule:DayViewSettings StartHour="11" EndHour="20"/> </schedule:SfSchedule.DayViewSettings> <schedule:SfSchedule.AppointmentMapping> <schedule:ScheduleAppointmentMapping ColorMapping="Color" EndTimeMapping="To" StartTimeMapping="From" SubjectMapping="EventName" /> </schedule:SfSchedule.AppointmentMapping> <schedule:SfSchedule.BindingContext> <local:SchedulerViewModel/> </schedule:SfSchedule.BindingContext> </schedule:SfSchedule> C# By setting MoveToDate in the schedule, you can move to the specific date in schedule. this.schedule.MoveToDate = DateTime.Now.Date.AddHours(11); View Sample in GitHub
SfScheduler allows you customize the time label text of schedule views. The time label text can be customized for DayView, WeekView, WorkWeekView and TimelineView by using the TimeRulerFormat property of TimelineViewSettings and DaysViewSettings in SfScheduler. XAML Bind the appointments to a schedule using the Scheduler.ItemsSource property. <Window.DataContext> <local:SchedulerViewModel /> </Window.DataContext> <Grid> <syncfusion:SfScheduler x:Name="Schedule" ViewType="Timeline" ItemsSource="{Binding AppointmentCollection }"> <interactivity:Interaction.Behaviors> <local:SchedulerBehavior/> </interactivity:Interaction.Behaviors> </syncfusion:SfScheduler> </Grid> C# Create a ViewModel class with recurring appointments by setting the RecurrenceRule property in ScheduleAppointment . public class SchedulerViewModel { public ScheduleAppointmentCollection AppointmentCollection { get; set; } = new ScheduleAppointmentCollection(); public SchedulerViewModel() { //Adding schedule appointment in schedule appointment collection ScheduleAppointment appointment1 = new ScheduleAppointment() { StartTime = new DateTime(2020, 11, 10, 10, 0, 0), EndTime = new DateTime(2020, 11, 10, 11, 0, 0), Subject = "Booked", AppointmentBackground = new SolidColorBrush(Colors.Red), }; //Creating recurrence rule appointment1.RecurrenceRule = "FREQ=DAILY;INTERVAL=2;COUNT=10"; //Adding schedule appointment in the schedule appointment collection AppointmentCollection.Add(appointment1); } } C# Initialize an object for TimelineViewSettings and append the required string value with time slot value, and assign it to the TimeRulerFormat property of TimelineViewSettings. TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); timelineViewSettings.StartHour = 0; timelineViewSettings.EndHour = 23; timelineViewSettings.TimeRulerFormat = string.Format("'Room'") + " " + "HH"; this.AssociatedObject.TimelineViewSettings = timelineViewSettings; C# Initialize an object for DaysViewSettings and append the required string value with time slot value, and assign it to the TimeRulerFormat property of DaysViewSettings. DaysViewSettings daysViewSettings = new DaysViewSettings(); daysViewSettings.StartHour = 0; daysViewSettings.EndHour = 23; daysViewSettings.TimeRulerFormat = string.Format("'Room'") + " " + "HH"; this.AssociatedObject.DaysViewSettings = daysViewSettings; View sample in GitHub TimelineView WeekView WorkWeekView DayView
You can customize the schedule view label by using TimeFormat property in each ScheduleView in Xamarin.Forms SfSchedule. DayView Customize the DayView label by setting TimeFormat property in DayLabelSettings. <schedule:SfSchedule.DayViewSettings> <schedule:DayViewSettings> <schedule:DayViewSettings.DayLabelSettings> <schedule:DayLabelSettings TimeFormat="hh:mm"/> </schedule:DayViewSettings.DayLabelSettings> </schedule:DayViewSettings> </schedule:SfSchedule.DayViewSettings> WeekView Customize the WeekView label by setting TimeFormat property in WeekLabelSettings. <schedule:SfSchedule.WeekViewSettings> <schedule:WeekViewSettings> <schedule:WeekViewSettings.WeekLabelSettings> <schedule:WeekLabelSettings TimeFormat="hh:mm"/> </schedule:WeekViewSettings.WeekLabelSettings> </schedule:WeekViewSettings> </schedule:SfSchedule.WeekViewSettings> WorkWeekView Customize the WorkWeekView label by setting TimeFormat property in WorkWeekLabelSettings. <schedule:SfSchedule.WorkWeekViewSettings> <schedule:WorkWeekViewSettings> <schedule:WorkWeekViewSettings.WorkWeekLabelSettings> <schedule:WorkWeekLabelSettings TimeFormat="hh:mm"/> </schedule:WorkWeekViewSettings.WorkWeekLabelSettings> </schedule:WorkWeekViewSettings> </schedule:SfSchedule.WorkWeekViewSettings> TimelineView Customize the TimelineView label by setting TimeFormat property in of LabelSettings. <schedule:SfSchedule.TimelineViewSettings> <schedule:TimelineViewSettings> <schedule:TimelineViewSettings.LabelSettings> <schedule:TimelineLabelSettings TimeFormat="hh:mm"/> </schedule:TimelineViewSettings.LabelSettings> </schedule:TimelineViewSettings> </schedule:SfSchedule.TimelineViewSettings> OutPut View Sample in GitHub
Time label customization in schedule SfSchedule allows you customize the time label text of schedule views. This article explains you how to customize the time label text of TimeLineView in schedule. Note:The time label text can be customized for DayView, WeekView, and WorkWeekView using the DayViewSettings, WeekViewSettings, and WorkWeekViewSettings properties, respectively. Step 1: Initialize an object for TimeLineViewSettings, and assign it to SfSchedule TimeLineViewSettings. TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); schedule.TimelineViewSettings = timelineViewSettings; Step 2: Initialize an object for TimeLineLabelSettings, and assign it to SfSchedule TimeLineViewSettings. TimelineLabelSettings labelSettings = new TimelineLabelSettings(); timelineViewSettings.LabelSettings = labelSettings; Step 3: Append the required string value with time slot value, and assign it to the TimeFormat property of TimeLineLabelSettings. labelSettings.TimeFormat = string.Format(" 'Room' ") + " " + "H"; Sample Demo: CustomTimeLabelText DayView WeekView WorkWeekView TimelineView
