Scrollable Calendar and Time Control in Xamarin Form

 

Scrollable Calendar and Time Control in xamarin form

Please, support my blog by clicking on our sponsors ad!

In this Blog, we have create control for calendar and time, in which control can scroll using button. In this control can scroll by your finger tips.

Lets start with the code:

First we will create template for calendar and time control

CalendarTemplate.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:SchoolUIDesigns.ViewModels"
             x:Class="SchoolUIDesigns.Control.CalendarTemplate">
  <ContentView.Content>
        <Grid RowDefinitions="Auto,Auto" x:DataType="vm:CalendarViewModel" Padding="10,0">
            <Label Text="{Binding WeekName}" Grid.Row="0"  FontAttributes="Bold" />
            <Label Text="{Binding Date}" Grid.Row="1" HorizontalOptions="Center" FontAttributes="Bold" />
        </Grid>
    </ContentView.Content>
</ContentView>

TimeTemplate.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:SchoolUIDesigns.ViewModels"
             x:Class="SchoolUIDesigns.Control.TimeTemplate">
  <ContentView.Content>
        <Grid RowDefinitions="Auto,Auto" x:DataType="vm:TimeViewModel" Padding="10,0">
            <Label Text="{Binding Time}" HorizontalOptions="Center" Grid.Row="1" FontAttributes="Bold" />
        </Grid>
    </ContentView.Content>
</ContentView>

Now we will create class for list of dates and time

CalendarViewModel.cs

    public class CalendarViewModel
    {
        public string WeekName { get; set; }
        public string Date { get; set; }
        public DateTime Dtime { get; set; }
    }

    public class TimeViewModel
    {
        public string Time { get; set; }
    }

    public class CalendarModel
    {
        public List<CalendarViewModel> GetDates()
        {
            List<CalendarViewModel> list = new List<CalendarViewModel>();
            DateTime startDate = DateTime.Now.AddDays(3);
            DateTime endDate = DateTime.Now.AddDays(30);
            for (DateTime date = startDate; date <= endDate; date = date.AddDays(1))
            {
                list.Add(new CalendarViewModel { Date = date.ToString("dd"), Dtime = date, WeekName = date.DayOfWeek.ToString().Substring(0, 3) });
            }
            return list;
        }

        public List<TimeViewModel> GetMorningTime()
        {
            List<TimeViewModel> list = new List<TimeViewModel>();
            list.Add(new TimeViewModel { Time = "9:00 am" });
            list.Add(new TimeViewModel { Time = "9:30 am" });
            list.Add(new TimeViewModel { Time = "10:00 am" });
            list.Add(new TimeViewModel { Time = "10:30 am" });
            list.Add(new TimeViewModel { Time = "11:00 am" });
            list.Add(new TimeViewModel { Time = "11:30 am" });
            return list;
        }

        public List<TimeViewModel> GetAfternoonTime()
        {
            List<TimeViewModel> list = new List<TimeViewModel>();
            list.Add(new TimeViewModel { Time = "12:00 pm" });
            list.Add(new TimeViewModel { Time = "12:30 pm" });
            list.Add(new TimeViewModel { Time = "01:00 pm" });
            list.Add(new TimeViewModel { Time = "01:30 pm" });
            list.Add(new TimeViewModel { Time = "02:00 pm" });
            list.Add(new TimeViewModel { Time = "02:30 pm" });
            list.Add(new TimeViewModel { Time = "03:00 pm" });
            list.Add(new TimeViewModel { Time = "03:30 pm" });
            list.Add(new TimeViewModel { Time = "04:00 pm" });
            list.Add(new TimeViewModel { Time = "04:30 pm" });
            return list;
        }

        public List<TimeViewModel> GetNightTime()
        {
            List<TimeViewModel> list = new List<TimeViewModel>();
            list.Add(new TimeViewModel { Time = "05:00 pm" });
            list.Add(new TimeViewModel { Time = "05:30 pm" });
            list.Add(new TimeViewModel { Time = "06:00 pm" });
            list.Add(new TimeViewModel { Time = "06:30 pm" });
            list.Add(new TimeViewModel { Time = "07:00 pm" });
            list.Add(new TimeViewModel { Time = "07:30 pm" });
            list.Add(new TimeViewModel { Time = "08:00 pm" });
            list.Add(new TimeViewModel { Time = "08:30 pm" });
            list.Add(new TimeViewModel { Time = "09:00 pm" });
            list.Add(new TimeViewModel { Time = "09:30 pm" });
            return list;
        }
    }

Now we will create main page

Calendar.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:template="clr-namespace:SchoolUIDesigns.Control"
             x:Class="SchoolUIDesigns.Views.Calendar"
             Title="Calendar and Time">
    <ContentPage.Content>
        <Grid RowDefinitions="Auto,Auto,Auto,Auto"  VerticalOptions="FillAndExpand" Padding="10" RowSpacing="10">
            
            <Frame CornerRadius="10" Grid.Row="0">
                <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="-8,0">
                    <Label x:Name="lblMonthYear" Grid.Row="0" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.ColumnSpan="3" HorizontalOptions="CenterAndExpand" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                  
                    <CollectionView x:Name="cvCalender"  Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" SelectionMode="Single" HeightRequest="60" SelectionChanged="cvCalender_SelectionChanged">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" ></LinearItemsLayout>
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <template:CalendarTemplate></template:CalendarTemplate>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                    
                </Grid>
            </Frame>

            <Frame CornerRadius="10" Grid.Row="1">
                <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="-8,0">
                    <Label Text="Morning" HorizontalOptions="CenterAndExpand" TextColor="Black" FontAttributes="Bold" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Style="{x:DynamicResource PoppinsBoldLabel}" ></Label>
                   
                    <CollectionView x:Name="cvMorning" SelectionMode="Single" Grid.Row="1" Grid.Column="1" HeightRequest="40" SelectionChanged="cvMorning_SelectionChanged">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" ></LinearItemsLayout>
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <template:TimeTemplate></template:TimeTemplate>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                    
                </Grid>
            </Frame>

            <Frame CornerRadius="10" Grid.Row="2">
                <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="-8,0">
                    <Label Text="Afternoon" TextColor="Black" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                  
                    <CollectionView x:Name="cvAfternoon" Grid.Row="1" Grid.Column="1" SelectionMode="Single" HeightRequest="35" SelectionChanged="cvAfternoon_SelectionChanged">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" ></LinearItemsLayout>
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <template:TimeTemplate></template:TimeTemplate>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                  
                </Grid>

            </Frame>

            <Frame CornerRadius="10" Grid.Row="3">
                <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="-8,0">
                    <Label Text="Evening"  Grid.Row="0" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.ColumnSpan="3" HorizontalOptions="CenterAndExpand" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                  
                    <CollectionView x:Name="cvEvening" Grid.Row="1" Grid.Column="1" SelectionMode="Single" HeightRequest="35" SelectionChanged="cvEvening_SelectionChanged">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" ></LinearItemsLayout>
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <template:TimeTemplate></template:TimeTemplate>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                   
                </Grid>
            </Frame>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Calendar.xaml.cs

    public partial class Calendar : ContentPage
    {
        int cnt;
        int afternooncnt, eveningcnt;
        DateTime calendarDate = DateTime.Now.AddDays(3);
        List<TimeViewModel> morningTimeList = new CalendarModel().GetMorningTime();
        List<TimeViewModel> afternoonTimeList = new CalendarModel().GetAfternoonTime();
        List<TimeViewModel> eveningTimeList = new CalendarModel().GetNightTime();
        List<CalendarViewModel> calendarList = new List<CalendarViewModel>();
        public Calendar()
        {
            InitializeComponent();
            lblMonthYear.Text = calendarDate.ToString("MMM") + " " + calendarDate.ToString("yyyy");
            cvCalender.ItemsSource = new CalendarModel().GetDates();
            cvMorning.ItemsSource = morningTimeList.ToList();
            cvAfternoon.ItemsSource = afternoonTimeList.ToList();
            cvEvening.ItemsSource = eveningTimeList.ToList();
        }
       
                
        private void cvMorning_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (cvMorning.SelectedItem != null)
            {
                cvEvening.SelectedItem = null;
                cvAfternoon.SelectedItem = null;
            }
        }

        private void cvAfternoon_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (cvAfternoon.SelectedItem != null)
            {
                cvMorning.SelectedItem = null;
                cvEvening.SelectedItem = null;
            }
        }

        private void cvEvening_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (cvEvening.SelectedItem != null)
            {
                cvMorning.SelectedItem = null;
                cvAfternoon.SelectedItem = null;
            }
        }

        private void cvCalender_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (cvCalender.SelectedItem != null)
            {
                var data = (CalendarViewModel)cvCalender.SelectedItem;
            }
        }

    }
}

Hope this is helpful to you, Please share your feedback in comment section. Thanks.