set different width for each appointment in RadScheduler month view

[Danilo]

Hi there,

I'm using a RadScheduler with the month view as ViewType in my WindowsForms application. The main goal is the following:

I need to set the width of each appointment based on integer values. For example: I have a total (100%) of 41. It should now create an appointment with value 41 with the full width. So far so good, this is easy. But I need now two different appointments ("Open" and "Done") with a percentage width of the 41. E.g. 27 "Open", so the width of this appointment should be about 66% of the full width. Then I have 14 for "Done", which should be an appointment with about 33% of the full width. I provided an example image of how it should look at the end.

I hope you know what I mean. Is this possible?

 

I add the appointments like this:

 

schedule.FocusedDate = DateTime.Today;
schedule.Resources.Add(new Resource() { Id = new EventId(1), Name = "PlannedDay", Color = Color.LightGreen });
schedule.GroupType = GroupType.Resource;
schedule.ActiveView.ResourcesPerView = 2;
schedule.Appointments.Clear();

Appointment app1 = new Appointment(DateTime.Today.AddDays(2), new TimeSpan(0, 0, 5), "Total: 41 Boxes");
Appointment app2 = new Appointment(DateTime.Today.AddDays(2), new TimeSpan(0, 0, 4), "Open: 27 Boxes");
Appointment app3 = new Appointment(DateTime.Today.AddDays(2), new TimeSpan(0, 0, 3), "Done: 14 Boxes");

app1.AllowEdit = false;
app1.AllowDelete = false;
app1.ResourceId = new EventId(1);

app2.AllowEdit = false;
app2.AllowDelete = false;
app2.ResourceId = new EventId(1);

app3.AllowEdit = false;
app3.AllowDelete = false;
app3.ResourceId = new EventId(1);

schedule.Appointments.Add(app1);
schedule.Appointments.Add(app2);
schedule.Appointments.Add(app3);

[Dess | Tech Support Engineer, Principal]

Hello, Danilo,      

In order to achieve the design from the provided screenshot, it is suitable to create a custom AppointmentElement and insert a RadProgressBarElement for indicating the progress properly. Please refer to the following code snippet. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.

public RadForm1()
{
    InitializeComponent();
    new RadControlSpyForm().Show();

    this.radScheduler1.ElementProvider = new MyElementProvider(this.radScheduler1);
    this.radScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Month;

    this.radScheduler1.FocusedDate = DateTime.Today;
    this.radScheduler1.Resources.Add(new Resource() { Id = new EventId(1), Name = "PlannedDay", Color = Color.LightGreen });
    this.radScheduler1.GroupType = GroupType.Resource;
    this.radScheduler1.ActiveView.ResourcesPerView = 2;
    this.radScheduler1.Appointments.Clear();

    Appointment app1 = new Appointment(DateTime.Today.AddDays(2), new TimeSpan(0, 0, 5), "Total: 41 Boxes");
    Appointment app2 = new Appointment(DateTime.Today.AddDays(2), new TimeSpan(0, 0, 4), "Open: 27 Boxes");
    Appointment app3 = new Appointment(DateTime.Today.AddDays(2), new TimeSpan(0, 0, 3), "Done: 14 Boxes");

    app1.AllowEdit = false;
    app1.AllowDelete = false;
    app1.ResourceId = new EventId(1);

    app2.AllowEdit = false;
    app2.AllowDelete = false;
    app2.ResourceId = new EventId(1);

    app3.AllowEdit = false;
    app3.AllowDelete = false;
    app3.ResourceId = new EventId(1);

    this.radScheduler1.Appointments.Add(app1);
    this.radScheduler1.Appointments.Add(app2);
    this.radScheduler1.Appointments.Add(app3);
}

public class CustomAppointmentElement : AppointmentElement
{
    public CustomAppointmentElement(RadScheduler scheduler, SchedulerView view, IEvent appointment) : base(scheduler, view, appointment)
    {
    }

    RadProgressBarElement progressElement = new RadProgressBarElement();

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        progressElement.StretchHorizontally = true;
        progressElement.StretchVertically = false;
        progressElement.MaxSize = new System.Drawing.Size(0, 20);
        progressElement.Maximum = 41;
        this.Children.Add(progressElement);
    }

    public override void Synchronize()
    {
        base.Synchronize();
        if (this.Appointment.Summary != string.Empty)
        {
            string[] tokens = this.Appointment.Summary.Split(' ');
            int parsedValue = 0;
            if (int.TryParse(tokens[1], out parsedValue))
            {
                progressElement.Value1 = parsedValue;
            }
            progressElement.Text = this.Appointment.Summary;
            progressElement.TextAlignment = ContentAlignment.MiddleLeft;
            progressElement.DrawBorder = false;

            progressElement.IndicatorElement1.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
            switch (tokens[0])
            {
                case "Total:":
                    progressElement.IndicatorElement1.BackColor = Color.Black;
                    progressElement.TextElement.ForeColor = Color.White;

                    break;
                case "Open:":
                    progressElement.IndicatorElement1.BackColor = Color.Red;
                    progressElement.TextElement.ForeColor = Color.Black;
                    break;
                case "Done:":
                    progressElement.IndicatorElement1.BackColor = Color.Green;
                    progressElement.TextElement.ForeColor = Color.Black;
                    break;
                default:
                    break;
            }
        }
    }
}

public class MyElementProvider : SchedulerElementProvider
{
    public MyElementProvider(RadScheduler scheduler) : base(scheduler)
    {
    }

    protected override T CreateElement<T>(SchedulerView view, object context)
    {
        if (typeof(T) == typeof(AppointmentElement))
        {
            return new CustomAppointmentElement(this.Scheduler, view, (IEvent)context)as T;
        }

        return base.CreateElement<T>(view, context);
    }
}

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

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

[Danilo]

Hello Dess,

Thanks for your answer. Your code & screenshot looks great. I will test it after my holidays and I will give you a feedback. Thanks for now.

Regards,
Danilo

[Danilo]

Hi Dess

I tested your suggestion and it worked like a charm. Great! :) Thank you very much.

Best Regards,
Danilo