Skip to content

Commit 4bafe15

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
committed
Updated heat map calendar demo
1 parent 172cbe5 commit 4bafe15

4 files changed

Lines changed: 171 additions & 61 deletions

File tree

‎HeatMap/SchedulerHeatMap/Helper/MonthCellTemplateSelector.cs‎

Lines changed: 20 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,71 +13,42 @@ namespace SchedulerHeatMap
1313
{
1414
public class MonthCellTemplateSelector : DataTemplateSelector
1515
{
16-
public DataTemplate LightGray { get; set; }
17-
public DataTemplate LightGreen { get; set; }
18-
public DataTemplate MidGreen { get; set; }
19-
public DataTemplate Green { get; set; }
20-
public DataTemplate DarkGreen { get; set; }
16+
public DataTemplate LightGrayTemplate { get; set; }
17+
public DataTemplate LightGreenTemplate { get; set; }
18+
public DataTemplate MidGreenTemplate { get; set; }
19+
public DataTemplate GreenTemplate { get; set; }
20+
public DataTemplate DarkGreenTemplate { get; set; }
2121

2222
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
2323
{
24-
var date = (container as MonthCell).DateTime;
25-
if (date.Month % 2 == 0)
24+
var appointments = (container as MonthCell).Appointments;
25+
if (appointments.Count != 0)
2626
{
27-
if (date.Day % 6 == 0)
27+
var internetData = appointments[0].Data as InternetData;
28+
//// Select custom template based on internet data used in each day.
29+
if (internetData.Usage < 3)
2830
{
29-
// 6, 12, 18, 24, 30
30-
return DarkGreen;
31+
return LightGrayTemplate;
3132
}
32-
else if (date.Day % 5 == 0)
33+
else if (internetData.Usage < 6)
3334
{
34-
// 5, 10, 15, 20, 25
35-
return MidGreen;
35+
return LightGreenTemplate;
3636
}
37-
else if (date.Day % 8 == 0 || date.Day % 4 == 0)
37+
else if (internetData.Usage < 9)
3838
{
39-
// 4, 8, 16, 24, 28
40-
return Green;
39+
return MidGreenTemplate;
4140
}
42-
else if (date.Day % 9 == 0 || date.Day % 3 == 0)
41+
else if (internetData.Usage < 12)
4342
{
44-
// 3, 9, 18, 21, 27
45-
return LightGray;
43+
return GreenTemplate;
4644
}
4745
else
4846
{
49-
// 1, 2, 7, 11, 13, 19, 22, 23, 26, 29
50-
return LightGreen;
51-
}
52-
}
53-
else
54-
{
55-
if (date.Day % 6 == 0)
56-
{
57-
// 6, 12, 18, 24, 30
58-
return LightGray;
59-
}
60-
else if (date.Day % 5 == 0)
61-
{
62-
// 5, 10, 15, 20, 25
63-
return LightGreen;
64-
}
65-
else if (date.Day % 8 == 0 || date.Day % 4 == 0)
66-
{
67-
// 4, 8, 16, 24, 28
68-
return MidGreen;
69-
}
70-
else if (date.Day % 9 == 0 || date.Day % 3 == 0)
71-
{
72-
// 3, 9, 18, 21, 27
73-
return Green;
74-
}
75-
else
76-
{
77-
// 1, 2, 7, 11, 13, 19, 22, 23, 26, 29
78-
return DarkGreen;
47+
return DarkGreenTemplate;
7948
}
8049
}
50+
51+
return LightGrayTemplate;
8152
}
8253
}
8354
}

‎HeatMap/SchedulerHeatMap/MainWindow.xaml‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,46 +8,56 @@
88
xmlns:Scheduler="using:Syncfusion.UI.Xaml.Scheduler"
99
mc:Ignorable="d">
1010
<Grid>
11+
<Grid.DataContext>
12+
<local:HeatMapViewModel />
13+
</Grid.DataContext>
1114
<Grid.Resources>
12-
<DataTemplate x:Key="monthCellTemplate1">
15+
<DataTemplate x:Key="lightGrayTemplate">
1316
<Grid Background="#eeeeee">
1417
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Text="{Binding DateText}" />
1518
</Grid>
1619
</DataTemplate>
17-
<DataTemplate x:Key="monthCellTemplate2">
20+
<DataTemplate x:Key="lightGreenTemplate">
1821
<Grid Background="#c6e48b">
1922
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Text="{Binding DateText}" />
2023
</Grid>
2124
</DataTemplate>
22-
<DataTemplate x:Key="monthCellTemplate3">
25+
<DataTemplate x:Key="midGreenTemplate">
2326
<Grid Background="#7bc96f">
2427
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Text="{Binding DateText}" />
2528
</Grid>
2629
</DataTemplate>
27-
<DataTemplate x:Key="monthCellTemplate4">
30+
<DataTemplate x:Key="greenTemplate">
2831
<Grid Background="#239a3b">
2932
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Text="{Binding DateText}" />
3033
</Grid>
3134
</DataTemplate>
32-
<DataTemplate x:Key="monthCellTemplate5">
35+
<DataTemplate x:Key="darkGreenTemplate">
3336
<Grid Background="#196127">
3437
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Text="{Binding DateText}" />
3538
</Grid>
3639
</DataTemplate>
3740
<local:MonthCellTemplateSelector x:Key="monthCellTemplateSelector"
38-
LightGray="{StaticResource monthCellTemplate1}"
39-
LightGreen="{StaticResource monthCellTemplate2}"
40-
MidGreen="{StaticResource monthCellTemplate3}"
41-
Green="{StaticResource monthCellTemplate4}"
42-
DarkGreen="{StaticResource monthCellTemplate5}" />
41+
LightGrayTemplate="{StaticResource lightGrayTemplate}"
42+
LightGreenTemplate="{StaticResource lightGreenTemplate}"
43+
MidGreenTemplate="{StaticResource midGreenTemplate}"
44+
GreenTemplate="{StaticResource greenTemplate}"
45+
DarkGreenTemplate="{StaticResource darkGreenTemplate}" />
4346
</Grid.Resources>
4447
<Grid.RowDefinitions>
4548
<RowDefinition Height="*"/>
4649
<RowDefinition Height="100"/>
4750
</Grid.RowDefinitions>
48-
<Scheduler:SfScheduler x:Name="scheduler" AppointmentEditFlag="None">
51+
<Scheduler:SfScheduler x:Name="scheduler"
52+
ItemsSource="{Binding InternetDataCollection}"
53+
AppointmentEditFlag="None">
54+
<Scheduler:SfScheduler.AppointmentMapping>
55+
<Scheduler:AppointmentMapping StartTime="Date"
56+
AppointmentBackground="Color"/>
57+
</Scheduler:SfScheduler.AppointmentMapping>
4958
<Scheduler:SfScheduler.MonthViewSettings>
50-
<Scheduler:MonthViewSettings MonthCellTemplateSelector="{StaticResource monthCellTemplateSelector}" />
59+
<Scheduler:MonthViewSettings AppointmentDisplayMode="None"
60+
MonthCellTemplateSelector="{StaticResource monthCellTemplateSelector}" />
5161
</Scheduler:SfScheduler.MonthViewSettings>
5262
</Scheduler:SfScheduler>
5363
<Grid Grid.Row="1">

‎HeatMap/SchedulerHeatMap/Model/InternetData.cs‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
using Microsoft.UI.Xaml.Media;
2+
using Syncfusion.UI.Xaml.Core;
3+
using System;
4+
using System.Collections.Generic;
5+
using System.Linq;
6+
using System.Text;
7+
using System.Threading.Tasks;
8+
9+
namespace SchedulerHeatMap
10+
{
11+
/// <summary>
12+
/// Represents the Internet data properties.
13+
/// </summary>
14+
public class InternetData : NotificationObject
15+
{
16+
private DateTime date;
17+
private Brush color;
18+
private int usage;
19+
20+
public int Usage
21+
{
22+
get { return usage; }
23+
set
24+
{
25+
usage = value;
26+
RaisePropertyChanged("Usage");
27+
}
28+
}
29+
30+
public DateTime Date
31+
{
32+
get { return date; }
33+
set
34+
{
35+
date = value;
36+
RaisePropertyChanged("Date");
37+
}
38+
}
39+
40+
public Brush Color
41+
{
42+
get { return color; }
43+
set
44+
{
45+
color = value;
46+
RaisePropertyChanged("Color");
47+
}
48+
}
49+
}
50+
}

‎HeatMap/SchedulerHeatMap/ViewModel/HeatMapViewModel.cs‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
using Microsoft.UI.Xaml.Media;
2+
using System;
3+
using System.Collections.Generic;
4+
using System.Collections.ObjectModel;
5+
using System.Linq;
6+
using System.Text;
7+
using System.Threading.Tasks;
8+
using Windows.UI;
9+
10+
namespace SchedulerHeatMap
11+
{
12+
/// <summary>
13+
/// The heat map view model class.
14+
/// </summary>
15+
public class HeatMapViewModel
16+
{
17+
public HeatMapViewModel()
18+
{
19+
this.GenerateData();
20+
}
21+
22+
public ObservableCollection<InternetData> InternetDataCollection { get; set; }
23+
24+
/// <summary>
25+
/// Generate random data for heat map calendar based on internet data usage.
26+
/// </summary>
27+
private void GenerateData()
28+
{
29+
//// Creating an instance for internet data collection.
30+
InternetDataCollection = new ObservableCollection<InternetData>();
31+
var startDate = DateTime.Now.Date.AddMonths(-2);
32+
var random = new Random();
33+
//// Data usage in terms of GB.
34+
var dataCollection = new ObservableCollection<int>()
35+
{
36+
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
37+
};
38+
39+
//// Adding random data to the internet data collection.
40+
for (int i = 0; i < 200; i++)
41+
{
42+
var dataUsage = dataCollection[random.Next(0, dataCollection.Count)];
43+
InternetData internetData = new InternetData();
44+
internetData.Date = startDate.AddDays(i);
45+
internetData.Usage = dataUsage;
46+
internetData.Color = GetColor(dataUsage);
47+
this.InternetDataCollection.Add(internetData);
48+
}
49+
}
50+
51+
/// <summary>
52+
/// Methods to get the color based on data usage.
53+
/// </summary>
54+
/// <param name="data"></param>
55+
private Brush GetColor(int data)
56+
{
57+
if (data < 3)
58+
{
59+
return new SolidColorBrush(Color.FromArgb(255, 238, 238, 238));
60+
}
61+
else if (data < 6)
62+
{
63+
return new SolidColorBrush(Color.FromArgb(255, 198, 228, 139));
64+
}
65+
else if (data < 9)
66+
{
67+
return new SolidColorBrush(Color.FromArgb(255, 123, 201, 111));
68+
}
69+
else if (data < 12)
70+
{
71+
return new SolidColorBrush(Color.FromArgb(255, 35, 154, 59));
72+
}
73+
else
74+
{
75+
return new SolidColorBrush(Color.FromArgb(255, 25, 97, 39));
76+
}
77+
}
78+
}
79+
}

0 commit comments

Comments
 (0)