Scheduler inside calendar

[Basil]

Hi,

Is there any method to schedule an appointment from the calendar. I mean, can I find a control inside Telerik to schedule a meeting with(Meeting title, details, start date/time, end date/time etc.) inside Xamarin Forms?

[Lance | Senior Manager Technical Support]

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

[Basil]

Hello Lance,

Thank you so much for your response. I got your point. We were looking for appointment editor kind of control inside Xamarin forms, just like(https://www.telerik.com/aspnet-mvc/scheduler). As you said, hope Telerik team can deliver this kind of control ASAP.

:)

Regards,

Basil

[Lance | Senior Manager Technical Support]

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

[Ak]

I will like to follow up on this post. Can you point me to the right direction for how to get started on making this happen for using the RadDataFORM to make the Scheduler-like interaction through the pointer you mentioned for the built-in appointment editor. The goal here is add appointments and view them in the Calendar in real time.

 

[Lance | Senior Manager Technical Support]

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 />
            <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>
    </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