Hi,
You can achieve similar appearance by using a combination of settings and custom drawing. The following code can give you an insight on how to do this:
public CalendarSamplePage()
{
InitializeComponent();
calendar.MonthSettings.ShowDayOfWeek = State.Enabled;
calendar.MonthSettings.WeekNumbersHeaderWidth = 20;
calendar.MonthSettings.WeekHeaderAlignment = Alignment.Near;
calendar.MonthSettings.DayOfWeekFormat = DayOfWeekFormat.Abbreviated;
calendar.MonthSettings.Style.HeaderBrush = new LinearGradientBrush(
Color.FromRgb(137, 176, 210), Color.FromRgb(125, 153, 180), 90);
calendar.MonthSettings.Style.HeaderTextColor = Color.FromRgb(242, 255, 255);
calendar.MonthSettings.Style.HeaderFont =
calendar.MonthSettings.Style.HeaderFont.Value.WithAttributes(FontAttributes.Bold).WithSize(12);
calendar.MonthSettings.Style.HeaderTextAlignment = MindFusion.Drawing.TextAlignment.MiddleLeft;
calendar.MonthSettings.DaySettings.Style.BorderTopColor = Color.FromRgb(120, 140, 160);
calendar.MonthSettings.DaySettings.Style.BorderLeftColor = Color.FromRgb(120, 140, 160);
calendar.MonthSettings.DaySettings.Style.BorderRightColor = Color.FromRgb(120, 140, 160);
calendar.MonthSettings.DaySettings.Style.BorderBottomColor = Color.FromRgb(120, 140, 160);
calendar.MonthSettings.DaySettings.Style.HeaderBorderBottomColor = Color.FromRgb(120, 140, 160);
calendar.MonthSettings.DaySettings.Style.HeaderBorderBottomWidth = 1;
calendar.MonthSettings.DaySettings.Margin = 0;
calendar.MonthSettings.DaySpacing = 0;
calendar.MonthSettings.ContentsMargin = 0;
calendar.MonthSettings.DaySpacing = 0;
var brush = new LinearGradientBrush(Colors.Empty, Colors.Empty, 90);
brush.Positions = new[] { 0, 0.5, 0.5, 1 };
brush.Colors = new[] { Color.FromRgb(220, 235, 248), Color.FromRgb(213, 229, 244),
Color.FromRgb(199, 216, 233), Color.FromRgb(199, 221, 240) };
calendar.MonthSettings.DaySettings.Style.HeaderBrush = brush;
calendar.MonthSettings.DaySettings.Style.HeaderTextColor = Color.Black;
calendar.MonthSettings.DaySettings.Style.HeaderFont =
calendar.MonthSettings.DaySettings.Style.HeaderFont.Value.WithAttributes(FontAttributes.Bold);
calendar.MonthSettings.DaySettings.Style.HeaderTextAlignment = MindFusion.Drawing.TextAlignment.MiddleLeft;
calendar.Selection.SelectedElementsStyle.Brush = new SolidBrush(Color.FromRgb(164, 194, 224));
calendar.Selection.SelectedElementsStyle.HeaderBrush = brush;
var brush2 = new LinearGradientBrush(Colors.Empty, Colors.Empty, 0);
brush2.Positions = new[] { 0, 0.5, 0.5, 1 };
brush2.Colors = new[] { Color.FromRgb(220, 235, 248), Color.FromRgb(213, 229, 244),
Color.FromRgb(199, 216, 233), Color.FromRgb(199, 221, 240) };
calendar.CustomDraw = CustomDrawElements.MonthSubHeaderCell |
CustomDrawElements.MonthWeekNumbersHeader | CustomDrawElements.MonthWeekNumbersHeaderCell;
calendar.Draw += (sender, e) =>
{
if (e.Element == CustomDrawElements.MonthWeekNumbersHeader)
{
var rect = e.Bounds;
rect.Height = calendar.MonthSettings.SubHeaderHeight;
e.Graphics.FillRectangle(new SolidBrush(Color.FromRgb(226, 241, 255)), rect);
}
if (e.Element == CustomDrawElements.MonthWeekNumbersHeaderCell)
{
e.Graphics.FillRectangle(new SolidBrush(Color.FromRgb(226, 241, 255)), e.Bounds);
var rect = e.Bounds;
rect.Y += calendar.MonthSettings.DaySettings.HeaderSize;
rect.Height -= calendar.MonthSettings.DaySettings.HeaderSize;
e.Graphics.FillRectangle(brush2, rect);
e.Graphics.DrawString(e.Text, e.Style.Font.Value, new SolidBrush(Color.FromRgb(130, 151, 172)), rect,
new StringFormat { HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center });
e.Graphics.DrawRectangle(new Pen(Color.FromRgb(120, 140, 160), 1, PenUnit.Pixel), rect);
}
if (e.Element == CustomDrawElements.MonthSubHeaderCell)
{
e.Graphics.FillRectangle(new SolidBrush(Color.FromRgb(226, 241, 255)), e.Bounds);
e.Graphics.DrawString(e.Text, e.Style.Font.Value, new SolidBrush(Color.FromRgb(130, 151, 172)), e.Bounds,
new StringFormat { HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center });
}
};
}
Below you can see the result. You can improve the resemblance even further by customizing and rotating the headers on the left.
Let me know if this helps.
Regards,
Meppy