This is a migrated thread and some comments may be shown as answers.

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

11 Answers 76 Views
Scheduler and Reminder
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 11 May 2017, 03:32 AM
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";
}
}
}

11 Answers, 1 is accepted

Sort by
0
Accepted
Hristo
Telerik team
answered on 12 May 2017, 11:16 AM
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.
0
John
Top achievements
Rank 1
answered on 16 May 2017, 01:53 PM

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

0
Hristo
Telerik team
answered on 17 May 2017, 08:13 AM
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.
0
John
Top achievements
Rank 1
answered on 17 May 2017, 08:31 AM

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

 

0
Hristo
Telerik team
answered on 17 May 2017, 08:57 AM
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.
0
John
Top achievements
Rank 1
answered on 17 May 2017, 09:18 AM

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
0
Hristo
Telerik team
answered on 17 May 2017, 12:07 PM
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.
0
John
Top achievements
Rank 1
answered on 17 May 2017, 12:16 PM

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

0
Hristo
Telerik team
answered on 18 May 2017, 06:36 AM
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.
0
John
Top achievements
Rank 1
answered on 18 May 2017, 07:10 AM

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

0
Hristo
Telerik team
answered on 18 May 2017, 09:51 AM
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.
Tags
Scheduler and Reminder
Asked by
John
Top achievements
Rank 1
Answers by
Hristo
Telerik team
John
Top achievements
Rank 1
Share this question
or