Telerik Forums / UI for WinForms
This is a migrated thread and some comments may be shown as answers.

set different width for each appointment in RadScheduler month view

3 Answers 159 Views
Scheduler and Reminder
This is a migrated thread and some comments may be shown as answers.
Danilo
Top achievements
Rank 1
Danilo asked on 23 Jan 2019, 02:29 PM
radscheduler_example.png

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);

3 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 24 Jan 2019, 09:26 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Danilo
Top achievements
Rank 1
answered on 24 Jan 2019, 05:33 PM
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
0
Danilo
Top achievements
Rank 1
answered on 05 Feb 2019, 10:20 AM
Hi Dess

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

Best Regards,
Danilo
Tags
Scheduler and Reminder
Asked by
Danilo
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Danilo
Top achievements
Rank 1
Share this question
or