Scheduler inside calendar in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

Scheduler inside calendar

5 Answers 21 Views

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 03 Aug 2018, 04:40 PM

Hello Basil,

The Calendar control is different from a Scheduler control and doesn't have a built-in appointment editor as it cannot make changes to the bound AppointmentsSource collection.

It's the responsibility of the applications business logic to Add/Remove items in the bound collection. We do have a "Scheduler-like" interaction feature request on our backlog, but I can't promise a time frame as to when this would be developed.

In the meantime, if you're looking for a fast way to build a UI for data entry, you can use the RadDataForm for new/existing items in the bound AppointmentsSource collection.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 06 Aug 2018, 04:32 PM

Hi Basil,

This is certainly one of our highest requested items. I can't make any promises for a definitive delivery, but rest assured that the development team is working extra hard to get this shipped soon.

To be automatically notified when this feature is available, you can subscribe to the following Feedback Portal item: Add Scheduler Control (click the "like" and "follow" button)

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

answered on 14 Nov 2018, 11:42 PM

Hello Alex,

The Calendar has the ability for you to set an AppointmentsSource (just like ItemsSource for a ListView). If you follow the RadCalendar Appointments tutorial, you'll see that you create an Appointment object and then add it to the collection that is bound to AppointmentsSource.

Now, if you want the DataForm to be the control that creates the Appointment object, then just set the DataForm.Source property using an instance of an Appointment object. Please visit the DataForm Getting Started Documentation to get started, instead of a SourceItem model, you would use your Appointment model.

When the user is done editing that appointment in the DataForm, you call myDataForm.CommitAll() which saves the values to the Source. then finally you can add that appointment to the AppointmentsSource.

To address your request on this being "in real time" then just make sure you're using an ObservableCollection for the AppointmentSource. When you change any of the items in an ObservableCollection, anything bound to it will also be updated.

As a concept example, here's a Calendar next to a DataForm (note this will not fit on a mobile phone screen).

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:CalendarWithDataForm.Portable"

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

x:Class="CalendarWithDataForm.Portable.MainPage">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition />

</Grid.ColumnDefinitions>

<telerikInput:RadCalendar x:Name="calendar" />

<Grid x:Name="DataFormGrid" Grid.Column="1">

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<telerikInput:RadDataForm x:Name="dataForm" />

<telerikInput:RadButton Text="Save Appointment" Clicked="SaveAppointmentButton_OnClick" Grid.Row="1" />

</Grid>

</ContentPage>

using System;

using System.Collections.ObjectModel;

using Telerik.XamarinForms.Common.DataAnnotations;

using Telerik.XamarinForms.Input;

using Xamarin.Forms;

namespace CalendarWithDataForm.Portable

{

public partial class MainPage : ContentPage

{

public ObservableCollection<Appointment> Appointments { get; set; } = new ObservableCollection<Appointment>();

public MainPage()

{

InitializeComponent();

Appointments.Add(new Appointment

{

Title = "Meeting with Tom",

Detail = "Sea Garden",

StartDate = DateTime.Today.AddHours(1),

EndDate = DateTime.Today.AddHours(2),

Color = Color.Tomato

});

calendar.AppointmentsSource = this.Appointments;

dataForm.Source = new Appointment();

}

private void SaveAppointmentButton_OnClick(object sender, EventArgs e)

{

// Commit the values in the form to the Source object

dataForm.CommitAll();

// add the appointment to the Appointments collection

this.Appointments.Add(dataForm.Source as Appointment);

// reset the DataForm so that you can add a new appointment

dataForm.Source = null;

dataForm.Source = new Appointment();

}

public class Appointment : IAppointment

{

[DisplayOptions(Header = "Start Date")]

public DateTime StartDate { get; set; }

[DisplayOptions(Header = "End Date")]

public DateTime EndDate { get; set; }

[DisplayOptions(Header = "Title")]

public string Title { get; set; }

[DisplayOptions(Header = "Detail")]

public string Detail { get; set; }

[DisplayOptions(Header = "Is All Day")]

public bool IsAllDay { get; set; }

[Ignore]

public Color Color { get; set; }

}

Note that is doesn't cover all your potential scenarios. You would also want to take care of when the user selects an existing appointment and possibly load that into the DataForm to be edited. In this case, take a look at the Calendar's AppointmentTapped event, you would then set the DataForm.source using the selected appointment.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik