building calendar activity using xamforms.controls.calendar - mvvm

Question

So, like most, I am still pretty new and am navigating through all things c# and Xamarin.Forms, but it is going exceptionally slow. Using XamarinForms and the XamForms.Controls.Calendar plugin, I am trying to build a calendar that gets a LIST of dates and events that happened and puts a small color code at the bottom. I reviewed all of the source code and topics on this I could find and I have refactored it out and built a VERSION of the code below that does what I want but it is ugly...I want to make it more reuseable and more MVVM than the example they were using earlier and what I did. Essentially my plan is to bind colors to activity based on a bool value (should be able to see in the code). So, the challenge is that I don't really know where to go or what to do, but below is what I THINK needs to happen. Please forgive me if this is a simple question, I am just not seeing it.
XamlPage
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
x:Class="MyApp.View.LogPageViews.LogPage"
ControlTemplate="{StaticResource MainPageTemplate}">
<ContentPage.Content>
<ScrollView>
<StackLayout>
<controls:Calendar x:Name="calendar Padding="10,0,10,0" SelectedBorderWidth="4" DisabledBorderColor="Black" ShowNumberOfWeek="false" StartDay="Monday TitleRightArrowTextColor="Blue" TitleLabelTextColor="Purple" TitleLeftArrowTextColor="Blue" WeekdaysFontSize="12" SelectedDate="{Binding Date}" SpecialDates="{Binding Workout}" DateCommand="{Binding DateChosen}" >
</controls:Calendar>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
I am getting my error in the code behind with everything I have tried...which is several probably wrong things...and I don't even know if this is good code. My current error is Severity Code Description Project File Line Suppression State
Error CS1503 Argument 1: cannot convert from 'MyApp.ViewModel.CalendarActivityVM' to 'XamForms.Controls.SpecialDate'
namespace MyApp.View.LogPageViews
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LogPage : ContentPage
{
public LogPage ()
{
InitializeComponent ();
var Dates = new List<SpecialDate>();
NavigationPage.SetHasNavigationBar(this, false);
DateTime testdate = new DateTime(2018, 06, 26);
//This is where I am getting the errors when I try to do anything like this. Getting errors like "Cannot convert from" and "Cannot use like a method"
//I did have code here that worked, but refactored it out and got stuck
calendar.SpecialDates.Add(new CalendarActivityVM(testdate, true, true, true, true));
calendar.SelectedDate = (DateTime.Now);
}
}
}
My Calendar ActivityVM (I have no idea if this is correct...This is where I am learning and think it is right)
namespace MyApp.ViewModel
{
public class CalendarActivityVM
{
public DateTime Datetime { get; set; }
public bool A { get; set; }
public bool B { get; set; }
public bool C { get; set; }
public bool D { get; set; }
public CalendarActivityVM(DateTime datetime, bool a, bool b, bool c, bool d)
{
Datetime = datetime;
A = a;
B = b;
C = c;
D = d;
var AColor = new Color();
var BColor = new Color();
var CColor = new Color();
var DColor = new Color();
if (A == true) { AColor = Color.Red; } else { AColor = Color.Transparent; };
if (B == true) { BColor = Color.Yellow; } else { BColor = Color.Transparent; };
if (C == true) { CColor = Color.Green; } else { CColor = Color.Transparent; };
if (D == true) { DColor = Color.Blue; } else { DColor = Color.Transparent; };
var white_row = new Pattern { WidthPercent = .1275f, HightPercent = 0.75f, Color = Color.Transparent };
var white_col = new Pattern { WidthPercent = 0.04f, HightPercent = 1f, Color = Color.Transparent };
var aPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = AColor };
var bPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = BColor };
var cPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = CColor };
var dPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = DColor };
var activity = new BackgroundPattern(7)
{
Pattern = new List<Pattern>
{
white_row, white_row, white_row, white_row, white_row, white_row, white_row,
aPattern, white_col, bPattern, white_col, cPattern, white_col, dPattern
}
};
}
}
}
a normal "SpecialDate" looks like this according to the example...this is why I am trying to refactor:
calendar.SpecialDates = new List<SpecialDate>{
new SpecialDate(DateTime.Now.AddDays(3))
{
BackgroundColor = Color.White,
TextColor = Color.Black,
Selectable = true,
BackgroundPattern = new BackgroundPattern(7)
{
Pattern = new List<Pattern>
{
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Red, Text = "X", TextColor=Color.White, TextSize=11, TextAlign=TextAlign.Middle},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Gold, Text = "Y", TextColor=Color.White, TextSize=11, TextAlign=TextAlign.Middle},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Green, Text = "Z", TextColor=Color.White, TextSize=11, TextAlign=TextAlign.Middle},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Purple,Text = "Q", TextColor=Color.White, TextSize=11, TextAlign=TextAlign.Middle},
white_row,white_row,white_row,white_row,white_row,white_row,white_row,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Blue},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Chocolate},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Cyan},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Fuchsia},
white_row,white_row,white_row,white_row,white_row,white_row,white_row,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Crimson},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Aquamarine},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.OrangeRed},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.DarkOrchid},
white_row,white_row,white_row,white_row,white_row,white_row,white_row,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Black},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.DeepSkyBlue},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.DarkGoldenrod},
white_col,
new Pattern{ WidthPercent = 0.22f, HightPercent = 0.22f, Color = Color.Firebrick},
}
}
}
I appreciate your time and any help is greatly appreciated.

Answer 1

So, after a bit more research (and maybe this will help others) there is a really nice tool to refactor to a method that makes it much easier than trying to do it myself (although I had to play with it a couple of times before I got it correct). Using the example in the code (or the code I got to work), on the left side of the screen there is a little paintbrush (VS2017) that helped me refactor. Here is the code that I eventually generated after playing with it for just a couple minutes. Now I did create it in the codebehind, but now I am pretty certain I can refactor that to my VM.
private static SpecialDate TestMethod(DateTime datetime, bool A, bool B, bool C, bool D)
{
var AColor = new Color();
var BColor = new Color();
var CColor = new Color();
var DColor = new Color();
if (A == true) { AColor = Color.Red; } else { AColor = Color.Transparent; };
if (B == true) { BColor = Color.Yellow; } else { BColor = Color.Transparent; };
if (C == true) { CColor = Color.Green; } else { CColor = Color.Transparent; };
if (D == true) { DColor = Color.Blue; } else { DColor = Color.Transparent; };
var white_row = new Pattern { WidthPercent = .1275f, HightPercent = 0.75f, Color = Color.Transparent };
var white_col = new Pattern { WidthPercent = 0.04f, HightPercent = 1f, Color = Color.Transparent };
var aPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = AColor };
var bPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = BColor };
var cPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = CColor };
var dPattern = new Pattern { WidthPercent = 0.22f, HightPercent = 0.22f, Color = DColor };
return new SpecialDate(datetime)
{
BackgroundColor = Color.White,
TextColor = Color.Black,
Selectable = true,
BackgroundPattern = new BackgroundPattern(7)
{
Pattern = new List<Pattern>
{
white_row, white_row, white_row, white_row, white_row, white_row, white_row,
aPattern, white_col, bPattern, white_col, cPattern, white_col, dPattern
}
}
};
}
I know I answered my own question and marked it as answered, but hopefully it will help someone else...showing how you can refactor much more simply than trying to do it on your own.