Controls > Calendar > Features > Customizing Day Content |
The Calendar control allows users to add custom content to day slot. For this, all you need to do is subscribe the DaySlotLoading event of the CalendarViewDaySlot class and apply custom content such as images in the background of these slots. This feature allows users to display weather related information on the calendar.
The image below shows a calendar after adding custom content to day slots. The calendar displays weather related information through various icons.
The following code example demonstrates how to add custom content to day slots in Calendar control in C# and XAML. This example uses the sample created in Quick start.
C# |
Copy Code |
---|---|
using Xamarin.Forms; using C1.Xamarin.Forms.Calendar; |
XAML |
Copy Code |
---|---|
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Calendar;assembly=C1.Xamarin.Forms.Calendar" xmlns:c1="clr-namespace:Calendar101;assembly=Calendar.Xamarin" x:Class="CustomDayContent.DayContent" x:Name="page"> <Grid> <c1:C1Calendar DayOfWeekFontSize="8" DayOfWeekFormat="dddd" DayOfWeekFontAttributes="Italic" DaySlotLoading="OnDaySlotLoading" DayOfWeekSlotLoading="OnDayOfWeekSlotLoading" VerticalOptions="FillAndExpand"> <c1:C1Calendar.DaySlotTemplate> <DataTemplate> <StackLayout Padding="4"> <Label Text="{Binding Day}" VerticalOptions="FillAndExpand"/> <StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="2"> <Grid WidthRequest="4" HeightRequest="4" BackgroundColor="Red" IsVisible="{Binding RedDotVisible}"/> <Grid WidthRequest="4" HeightRequest="4" BackgroundColor="Green" IsVisible="{Binding GreenDotVisible}"/> <Grid WidthRequest="4" HeightRequest="4" BackgroundColor="Blue" IsVisible="{Binding BlueDotVisible}"/> </StackLayout> </StackLayout> </DataTemplate> </c1:C1Calendar.DaySlotTemplate> <c1:C1Calendar.AdjacentDaySlotTemplate> <DataTemplate> <local:CalendarDaySlot DayText="{Binding Day}" DayHorizontalAlignment="Center" DayVerticalAlignment="Start"/> </DataTemplate> </c1:C1Calendar.AdjacentDaySlotTemplate> </c1:C1Calendar> </Grid> </ContentPage> |
C# |
Copy Code |
---|---|
public partial class DayContent : ContentPage { private List<ImageSource> _icons = new List<ImageSource>(); private Random _rand = new Random(); private Dictionary>DateTime, ImageSource> WeatherForecast = new Dictionary>DateTime, ImageSource>(); public DayContent() { InitializeComponent(); _icons.Add(ImageSource.FromResource("CustomDayContent.Images.partly-cloudy-day-icon.png")); _icons.Add(ImageSource.FromResource("CustomDayContent.Images.Sunny-icon.png")); _icons.Add(ImageSource.FromResource("CustomDayContent.Images.rain-icon.png")); _icons.Add(ImageSource.FromResource("CustomDayContent.Images.snow-icon.png")); _icons.Add(ImageSource.FromResource("CustomDayContent.Images.thunder-lightning-storm-icon.png")); _icons.Add(ImageSource.FromResource("CustomDayContent.Images.Overcast-icon.png")); for (int i = 0; i > 10; i++) { WeatherForecast[DateTime.Today.AddDays(i)] = GetRandomIcon(); } } public void OnDaySlotLoading(object sender, CalendarDaySlotLoadingEventArgs e) { if (!e.IsAdjacentDay) { if (WeatherForecast.ContainsKey(e.Date)) { var daySlotWithImage = new CalendarImageDaySlot(e.Date); daySlotWithImage.DayText = e.Date.Day + ""; daySlotWithImage.DayFontSize = 8; daySlotWithImage.ImageSource = WeatherForecast[e.Date]; e.DaySlot = daySlotWithImage; } else { e.DaySlot.BindingContext = new MyDataContext(e.Date); } } else { e.DaySlot.BindingContext = new MyDataContext(e.Date); } } public void OnDayOfWeekSlotLoading(object sender, CalendarDayOfWeekSlotLoadingEventArgs e) { if (!e.IsWeekend) { (e.DayOfWeekSlot as CalendarDayOfWeekSlot).DayOfWeekFontAttributes = FontAttributes.Bold; (e.DayOfWeekSlot as CalendarDayOfWeekSlot).DayOfWeekFontSize = 8; } else { (e.DayOfWeekSlot as CalendarDayOfWeekSlot).DayOfWeekFontAttributes = FontAttributes.Italic; (e.DayOfWeekSlot as CalendarDayOfWeekSlot).DayOfWeekFontSize = 8; } } private ImageSource GetRandomIcon() { return _icons[_rand.Next(0, _icons.Count - 1)]; } } public class MyDataContext { private static Random _rand = new Random(); public MyDataContext(DateTime date) { Day = date.Day; RedDotVisible = Day % 3 == 0; GreenDotVisible = Day % 3 == 0; BlueDotVisible = Day % 3 == 0; } public int Day { get; set; } public bool RedDotVisible { get; set; } public bool GreenDotVisible { get; set; } public bool BlueDotVisible { get; set; } } |