如何在Xamarin.Forms中按计划拜访列表添加日历视图及添加日历事件

嘿，我来帮你搞定Xamarin.Forms里的日历视图和事件添加问题！Xamarin.Forms本身没有内置的日历控件，所以咱们通常会用成熟的第三方库来实现，下面我就以Syncfusion Xamarin.Forms Calendar（免费版足够个人/小型项目使用）为例，一步步给你讲清楚：

一、先搞定日历视图的添加 #

1. 安装NuGet包 #

打开你的项目，右键点击解决方案→管理NuGet程序包，搜索并安装 Syncfusion.Xamarin.SfCalendar，记得给每个平台（Android、iOS、UWP）都装上哦。

2. 在XAML中引用并添加日历控件 #

首先在XAML的根节点添加命名空间：

xmlns:calendar="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"

然后就可以直接添加日历控件了：

<ContentPage.Content>
    <calendar:SfCalendar x:Name="VisitCalendar"
                         ViewMode="Month"
                         ShowNavigationArrows="True"
                         ShowDatePickerButton="True"/>
</ContentPage.Content>

这里ViewMode可以设为Month/Week/Day，根据你的需求调整显示模式。

3. 绑定你的计划拜访列表 #

首先咱们得定义一个拜访计划的模型类，比如：

public class VisitPlan
{
    public string VisitTitle { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public Color EventColor { get; set; } = Color.Blue;
}

然后把你的拜访列表转成日历能识别的事件集合。Syncfusion的日历需要用CalendarEvent类型，所以咱们可以写个转换方法：

private List<CalendarEvent> ConvertVisitsToCalendarEvents(List<VisitPlan> visitPlans)
{
    var calendarEvents = new List<CalendarEvent>();
    foreach (var plan in visitPlans)
    {
        calendarEvents.Add(new CalendarEvent
        {
            Subject = plan.VisitTitle,
            StartTime = plan.StartTime,
            EndTime = plan.EndTime,
            Color = plan.EventColor
        });
    }
    return calendarEvents;
}

最后在页面的构造函数或者ViewModel里绑定到日历的EventsSource：

// 假设你的拜访列表是this.MyVisitPlans
VisitCalendar.EventsSource = ConvertVisitsToCalendarEvents(this.MyVisitPlans);

二、手动添加日历事件 #

如果需要让用户手动添加事件（比如新增拜访计划），咱们可以做个简单的弹窗或者页面，收集事件信息后添加到日历的事件源里：

1. 示例：添加单个事件 #

private void AddNewVisitEvent(string title, DateTime start, DateTime end)
{
    var newEvent = new CalendarEvent
    {
        Subject = title,
        StartTime = start,
        EndTime = end,
        Color = Color.Green
    };

    // 先把原有的事件集合取出来，添加新事件后再赋值回去
    var currentEvents = VisitCalendar.EventsSource as List<CalendarEvent>;
    if (currentEvents != null)
    {
        currentEvents.Add(newEvent);
        VisitCalendar.EventsSource = null; // 先清空触发刷新
        VisitCalendar.EventsSource = currentEvents;
    }
}

你可以把这个方法绑定到按钮的点击事件，比如用户点击“添加拜访”按钮后，弹出输入框获取标题、时间，再调用这个方法。

2. 自定义事件样式（可选） #

如果想让不同类型的拜访事件显示不同样式，比如重要拜访用红色，普通用蓝色，可以通过CalendarEvent的Color属性控制，也可以自定义事件模板：

<calendar:SfCalendar>
    <calendar:SfCalendar.EventTemplate>
        <DataTemplate>
            <Label Text="{Binding Subject}"
                   TextColor="White"
                   BackgroundColor="{Binding Color}"
                   Padding="2"
                   FontSize="Small"/>
        </DataTemplate>
    </calendar:SfCalendar.EventTemplate>
</calendar:SfCalendar>

小提示 #

如果你不想用Syncfusion的库，也可以试试社区维护的Xam.Plugins.Forms.Calendar，用法类似，也是通过NuGet安装后绑定事件源就行。不过Syncfusion的文档更全，控件功能也更丰富。

内容的提问来源于stack exchange，提问作者brijesh kumar yadav