set different width for each appointment in RadScheduler month view

4 posts, 1 answers
  1. Danilo
    Danilo avatar
    47 posts
    Member since:
    Sep 2012

    Posted 23 Jan Link to this post

    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);
  2. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 24 Jan Link to this post

    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.
  3. Danilo
    Danilo avatar
    47 posts
    Member since:
    Sep 2012

    Posted 24 Jan in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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
  4. Danilo
    Danilo avatar
    47 posts
    Member since:
    Sep 2012

    Posted 05 Feb in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess

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

    Best Regards,
    Danilo
Back to Top