appointments are not placed in the correct time slot when using a custom MonthTimescale

12 posts, 1 answers
  1. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 10 May 2017 Link to this post

    appointments are not placed in the correct time slot when using a custom MonthTimescale


    public RadRibbonForm1()
    {
    InitializeComponent();

    this.radScheduler1.FocusedDate = new DateTime(2016, 1, 1);
    this.radScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Timeline;
    SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();
    timelineView.RangeStartDate = new DateTime(2016, 1, 1, 00, 00, 00);
    timelineView.RangeEndDate = new DateTime(2016, 12, 31, 23, 59, 59);
    timelineView.StartDate = new DateTime(2016, 1, 1, 00, 00, 00);

    Appointment appointment = new Appointment(new DateTime(2016, 1, 1, 00, 00, 00), new DateTime(2016, 1, 10, 00, 00, 00), "Quarter 1");
    Appointment appointment2 = new Appointment(new DateTime(2016, 2, 1, 00, 00, 00), new DateTime(2016, 2, 10, 00, 00, 00), "Quarter 1");
    Appointment appointment3 = new Appointment(new DateTime(2016, 4, 1, 00, 00, 00), new DateTime(2016, 4, 10, 00, 00, 00), "Quarter 2");
    Appointment appointment4 = new Appointment(new DateTime(2016, 5, 1, 00, 00, 00), new DateTime(2016, 6, 10, 00, 00, 00), "Quarter 2");
    Appointment appointment5 = new Appointment(new DateTime(2016, 7, 1, 00, 00, 00), new DateTime(2016, 7, 10, 00, 00, 00), "Quarter 3");
    Appointment appointment6 = new Appointment(new DateTime(2016, 8, 1, 00, 00, 00), new DateTime(2016, 8, 10, 00, 00, 00), "Quarter 3");
    Appointment appointment7 = new Appointment(new DateTime(2016, 11, 1, 00, 00, 00), new DateTime(2016, 11, 10, 00, 00, 00), "Quarter 4");
    Appointment appointment8 = new Appointment(new DateTime(2016, 12, 1, 00, 00, 00), new DateTime(2016, 12, 10, 00, 00, 00), "Quarter 4");

    this.radScheduler1.Appointments.Add(appointment);
    this.radScheduler1.Appointments.Add(appointment2);
    this.radScheduler1.Appointments.Add(appointment3);
    this.radScheduler1.Appointments.Add(appointment4);
    this.radScheduler1.Appointments.Add(appointment5);
    this.radScheduler1.Appointments.Add(appointment6);
    this.radScheduler1.Appointments.Add(appointment7);
    this.radScheduler1.Appointments.Add(appointment8);

    QuarterTimescale qTimeScale = new QuarterTimescale();
    qTimeScale.DisplayedCellsCount = 4;
    timelineView.SchedulerTimescales.Add(qTimeScale);
    this.radScheduler1.GetTimelineView().ShowTimescale(qTimeScale);
    }

    class QuarterTimescale : MonthTimescale
    {
    public override int ScalingFactor
    {
    get
    {
    return 3;
    }
    }

    public override string Name
    {
    get
    {
    return "Quarter";
    }
    }
    }
  2. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 12 May 2017 Link to this post

    Hi John,

    Thank you for writing.

    This behavior is not supported, we have an issue logged on our feedback portal, here: FIX. RadScheduler - appointments are not placed in the correct time slot when using a custom MonthTimescale. I have added a vote for the item on your behalf.

    Currently, I can suggest using standard month scale and create custom cells with collapsed borders using the ElmentProvider class. At the end, the scheduler will be displayed in quarters similarly to your scenario. Please check my code snippet below: 
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
             
            this.radScheduler1.FocusedDate = new DateTime(2016, 1, 1);
            this.radScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Timeline;
            SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();
            timelineView.RangeStartDate = new DateTime(2016, 1, 1, 00, 00, 00);
            timelineView.RangeEndDate = new DateTime(2016, 12, 31, 23, 59, 59);
            timelineView.StartDate = new DateTime(2016, 1, 1, 00, 00, 00);
     
            Appointment appointment = new Appointment(new DateTime(2016, 1, 1, 00, 00, 00), new DateTime(2016, 1, 10, 00, 00, 00), "1Quarter 1");
            Appointment appointment2 = new Appointment(new DateTime(2016, 2, 1, 00, 00, 00), new DateTime(2016, 2, 10, 00, 00, 00), "2Quarter 1");
     
            Appointment appointment3 = new Appointment(new DateTime(2016, 4, 1, 00, 00, 00), new DateTime(2016, 4, 10, 00, 00, 00), "1Quarter 2");
            Appointment appointment4 = new Appointment(new DateTime(2016, 5, 1, 00, 00, 00), new DateTime(2016, 6, 10, 00, 00, 00), "2Quarter 2");
     
            Appointment appointment5 = new Appointment(new DateTime(2016, 7, 1, 00, 00, 00), new DateTime(2016, 7, 10, 00, 00, 00), "1Quarter 3");
            Appointment appointment6 = new Appointment(new DateTime(2016, 8, 1, 00, 00, 00), new DateTime(2016, 8, 10, 00, 00, 00), "2Quarter 3");
     
            Appointment appointment7 = new Appointment(new DateTime(2016, 11, 1, 00, 00, 00), new DateTime(2016, 11, 10, 00, 00, 00), "1Quarter 4");
            Appointment appointment8 = new Appointment(new DateTime(2016, 12, 1, 00, 00, 00), new DateTime(2016, 12, 10, 00, 00, 00), "2Quarter 4");
     
            this.radScheduler1.Appointments.Add(appointment);
            this.radScheduler1.Appointments.Add(appointment2);
            this.radScheduler1.Appointments.Add(appointment3);
            this.radScheduler1.Appointments.Add(appointment4);
            this.radScheduler1.Appointments.Add(appointment5);
            this.radScheduler1.Appointments.Add(appointment6);
            this.radScheduler1.Appointments.Add(appointment7);
            this.radScheduler1.Appointments.Add(appointment8);
     
            Timescales scale = Timescales.Months;
            timelineView.ShowTimescale(scale);
            SchedulerTimescale currentScaling = timelineView.GetScaling();
            currentScaling.Format = "dd MMM";
            currentScaling.DisplayedCellsCount = 12;
     
            this.radScheduler1.ElementProvider = new MyElementProvider(this.radScheduler1);
        }
    }
     
    public class MyElementProvider : SchedulerElementProvider
    {
        public MyElementProvider(RadScheduler scheduler)
            : base(scheduler)
        { }
     
        protected override T CreateElement<T>(SchedulerView view, object context)
        {
            if (view is SchedulerTimelineView && typeof(T) == typeof(SchedulerHeaderCellElement))
            {
                return new MySchedulerHeaderCellElement(this.Scheduler, view) as T;
            }
            else if (view is SchedulerTimelineView && typeof(T) == typeof(SchedulerCellElement))
            {
                return new MySchedulerCellElement(this.Scheduler, view) as T;
            }
     
            return base.CreateElement<T>(view, context);
        }
    }
     
    internal class MySchedulerHeaderCellElement : SchedulerHeaderCellElement
    {
        public MySchedulerHeaderCellElement(RadScheduler scheduler, SchedulerView view)
            : base(scheduler, view)
        {
        }
     
        public override string Text
        {
            get
            {
                return base.Text;
            }
            set
            {
                string res = string.Empty;
                if (this.Date.Month == 2)
                {
                    res = "Q1";
                }
                else if (this.Date.Month == 5)
                {
                    res = "Q2";
                }
                else if (this.Date.Month == 8)
                {
                    res = "Q3";
                }
                else if (this.Date.Month == 11)
                {
                    res = "Q4";
                }
     
                base.Text = res;
            }
        }
     
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(SchedulerHeaderCellElement);
            }
        }
     
        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            SizeF size = base.ArrangeOverride(finalSize);
     
            this.Text = string.Empty;
            if (this.Date.Month == 1 || this.Date.Month == 4 || this.Date.Month == 7 || this.Date.Month == 10)
            {
                this.BorderRightWidth = 0;
            }
            else if (this.Date.Month == 3 || this.Date.Month == 6 || this.Date.Month == 9 || this.Date.Month == 12)
            {
                this.BorderLeftWidth = 0;
            }
            else
            {
                this.BorderRightWidth = 0;
                this.BorderLeftWidth = 0;
            }
     
            return size;
        }
    }
     
    internal class MySchedulerCellElement : SchedulerCellElement
    {
        public MySchedulerCellElement(RadScheduler scheduler, SchedulerView view)
            : base(scheduler, view)
        { }
     
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(SchedulerCellElement);
            }
        }
     
        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            SizeF size = base.ArrangeOverride(finalSize);
     
            this.Text = string.Empty;
            if (this.Date.Month == 1 || this.Date.Month == 4 || this.Date.Month == 7 || this.Date.Month == 10)
            {
                this.BorderRightWidth = 0;
            }
            else if (this.Date.Month == 3 || this.Date.Month == 6 || this.Date.Month == 9 || this.Date.Month == 12)
            {
                this.BorderLeftWidth = 0;
            }
            else
            {
                this.BorderRightWidth = 0;
                this.BorderLeftWidth = 0;
            }
     
            return size;
        }
    }

    I am also attaching a screenshot showing the result on my end.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 16 May 2017 Link to this post

    Thanks Hristo 

    I am happy your answer but still some issue faced How to set appointment height When select start date January month and end date select March month then not set height. (When select single month duration then set height but more than one month duration then not set height)

     

    ------Code

     Dim timelineViewElement = TryCast(Me.rsMacroTimeline.SchedulerElement.ViewElement, SchedulerMonthViewElement)
            If (Not timelineViewElement Is Nothing) Then
                timelineViewElement.AppointmentHeight = 350
            End If

  4. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 17 May 2017 Link to this post

    Hello John,

    Thank you for writing.

    Your initial post suggests that you are using the scheduler in a timeline view. If that case please make sure that you cast the RadScheduler.ViewElement to SchedulerTimelineViewElement
    protected override void OnShown(EventArgs e)
    {
        base.OnShown(e);
     
        SchedulerTimelineViewElement viewElement = (SchedulerTimelineViewElement)this.radScheduler1.ViewElement;
        viewElement.AppointmentHeight = 100;
    }

    I am also attaching a screenshot showing the result on my end.

    I hope this helps. Please let me know if you have other questions.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 17 May 2017 Link to this post

    Thanks Hristo for giving reply 

    I was mistake in post the code but my concern is different how to display every appointment with different height with day duration wise.Currently we set height then all  appointment height are same.So, how to display different appointment with different height

    Please Hristo possible to give fast reply

     

  6. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 17 May 2017 Link to this post

    Hi John,

    Thank you for writing back.

    You can specify different appointment heights by first setting the RadScheduler.AutoSizeAppointments property to true and they by handling the AppointmentFormatting event: 
    Private Sub RadScheduler1_AppointmentFormatting(sender As Object, e As SchedulerAppointmentEventArgs)
        If e.Appointment.Summary.Contains("Quarter 1") Then
            e.AppointmentElement.MinSize = New Size(0, 200)
        Else
            e.AppointmentElement.MinSize = New Size(0, 50)
        End If
     
    End Sub

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 17 May 2017 Link to this post

    Thanks Hristo for giving reply 

    I was write down code but not any effect and also i am saying every create appointment then height set run time differently like 

    create first appointment startdate 01-01-2017 to 01-31-2017 then set appointment height 100

    create second appointment startdate 01-01-2017 to 01-15-2017 then set appointment height 50

    create third appointment startdate 01-01-2017 to 01-5-2017 then set appointment height 28

    So, how to set every appointment with different height

    Please Hristo possible to give fast reply
  8. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 17 May 2017 Link to this post

    Hello John,

    Thank you for writing.

    Setting the heights as per the described setup on your end is not supported. Please try handling the formatting event. The event is fired for each of the appointments by performing validation for each of them you would be able to set a unique height.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 17 May 2017 Link to this post

    Thanks Hristo for giving reply 

    I was read your answer but Please can you  give code for how to set all appointment unique height using for each loop

    Please Hristo possible to give fast reply

  10. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 18 May 2017 Link to this post

    Hi John,

    Thank you for writing.

    RadScheduler is using UI virtualization and AppointmentElements are only created for the currently visible appointments. These visual objects are reused and the formatting event is fired every time when an appointment is displayed or needs to be updated.

    Please note that the correct approach for achieving your task is utilizing the AppointmentFormatting event. As seen in the code snippet I sent you previously the event provides an access to the underlying Appointment data object. By accessing the data object you should be able to set different heights for the different appointments.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 18 May 2017 Link to this post

    Thanks haristo for answer

    But  AppointmentFormatting  does not return AppointmentElement DesiredBounds value .it's all value give to 0 and not change height in scheduler.

    And one more question :- 

    how to display in week view as custom text and month view and year view display inbuilt header text using extend class SchedulerElementProvider

    Please Hristo possible to give fast reply

  12. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 18 May 2017 Link to this post

    Hi John,

    The DesiredBounds property returns 0 because it needs to layout to have passed. Since you need to increase the appointment heights please use their MinSize property: 
    Private Sub RadScheduler1_AppointmentFormatting(sender As Object, e As SchedulerAppointmentEventArgs)
        If e.Appointment.Summary.Contains("Quarter 1") Then
            e.AppointmentElement.MinSize = New Size(0, 200)
        Else
            e.AppointmentElement.MinSize = New Size(0, 50)
        End If
      
    End Sub

    Please also have in mind that we try to keep our threads focused on related topics. Your other question duplicates another thread of yours: http://www.telerik.com/forums/how-to-display-current-month-all-week-with-custom-header-using-timeline-control.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top