日历年视图 -

Question

我正在寻找一个控件（UWP 或 ASP.NET），它可以提供日历年视图（财政年度 ;-)）并让我对日期进行分类。所以我希望能够点击一天，然后选择一种颜色来表示繁忙、有空……或者我如何自己创建启用此功能的东西？

目前我用它来计划未来几天。在 excel 中看起来像这样。

Answer 1

要更改 CalendarViewDayItem 的 Background，我们应该可以使用 CalendarViewDayItemChangingEventArgs.Item 属性在 [=16] 中得到 CalendarViewDayItem =] 事件.

我们应该能够创建一个 class 它有 MyColor 和 MyDateTime 属性来保存 Color 和 DateTime.

例如：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CalendarView Name="MyCalendarView" SelectedDatesChanged="MyCalendarView_SelectedDatesChanged" CalendarViewDayItemChanging="MyCalendarView_CalendarViewDayItemChanging"></CalendarView>
</Grid>

后面的代码：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        times = new ObservableCollection<DayItem>();
        for (int i = 1; i < 10; i++)
        {
            times.Add(new DayItem(new DateTime(2017, 1, i), Colors.Yellow));
        }

        for (int i = 10; i < 20; i++)
        {
            times.Add(new DayItem(new DateTime(2016, 12, i), Colors.Green));
        }
        for (int i = 20; i < 29; i++)
        {
            times.Add(new DayItem(new DateTime(2017, 1, i), Colors.Red));
        }
    }

    private ObservableCollection<DayItem> times;

    private void MyCalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
    {
        bool add = false;
        //If we double click the CalendarViewDayItem, the second time args.AddedDates.Count is 0
        if (args.AddedDates.Count >= 1) 
        {
            var newDate = args.AddedDates[0];
            for (int i = 0; i < times.Count; i++)
            {
                if (newDate.Date.Year == times[i].MyDateTime.Year && newDate.Date.Month == times[i].MyDateTime.Month && newDate.Date.Day == times[i].MyDateTime.Day)
                {
                    add = true;
                }
            }
            if (!add)
            {
                times.Add(new DayItem(newDate.DateTime, Colors.Green));
            }
        }
    }

    private void MyCalendarView_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
    {
        var selectDay = args.Item as CalendarViewDayItem;
        for (int i = 0; i < times.Count; i++)
        {
            if (selectDay.Date.Year == times[i].MyDateTime.Year && selectDay.Date.Month == times[i].MyDateTime.Month && selectDay.Date.Day == times[i].MyDateTime.Day)

                selectDay.Background = new SolidColorBrush(times[i].MyColor);
        }
    }
}

internal class DayItem
{
    public DayItem(DateTime today, Color red)
    {
        MyDateTime = today;
        MyColor = red;
    }

    public Color MyColor { get; set; }
    public DateTime MyDateTime { get; set; }
}

当我们设置CalendarViewDayItem的Background时，CalendarViewDayItemChanging不会被触发。它在加载 CalendarViewDayItem 时发生。所以您应该能够重新加载 CalendarViewDayItem。

此外，如果您想显示日历年视图，您应该能够在页面上使用 12 个日历视图。

日历年视图 -

Calendar Year View -

c#

asp.net

uwp

uwp-xaml