Add check box into appointment slot

[david]

I need to be able to add a checkbox into the appointment on the scheduler its to allow staff to say that someone has arrived for the appointment. I am using c# and the 30 day demo thanks.

 

[Hristo]

Hi David,

Thank you for writing.

You can create a custom appointment element by following the approach suggested in the following documentation article: https://docs.telerik.com/devtools/winforms/scheduler/appointments-and-dialogs/custom-appointment-element.

The code snippet below suggests a sample implementation: 

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

    StackLayoutElement container = new StackLayoutElement();
    RadCheckBoxElement checkBox = new RadCheckBoxElement();
    StackLayoutElement panel = new StackLayoutElement();
    LightVisualElement timeInterval = new LightVisualElement();
    LightVisualElement description = new LightVisualElement();

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.container = new StackLayoutElement();
        this.container.Orientation = Orientation.Horizontal;
        this.container.StretchHorizontally = true;
        this.container.StretchVertically = true;

        this.checkBox = new RadCheckBoxElement() { MaxSize = new Size(20,0)};
        this.checkBox.CheckStateChanged += CheckBox_CheckStateChanged;
        this.container.Children.Add(this.checkBox);

        this.panel.StretchHorizontally = true;
        this.panel.StretchVertically = true;
        this.panel.Orientation = Orientation.Vertical;
        this.panel.Children.Add(timeInterval);
        this.panel.Children.Add(description);

        this.container.Children.Add(this.panel);
        this.Children.Add(this.container);
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        SizeF size = base.ArrangeOverride(finalSize);

        float start = this.checkBox.DesiredSize.Width;
        this.panel.Arrange(new RectangleF(start, 0, size.Width - start, size.Height));

        return size;
    }

    private void CheckBox_CheckStateChanged(object sender, EventArgs e)
    {
        //...
    }

    private void button_Click(object sender, EventArgs e)
    {
        this.Scheduler.Appointments.Remove(this.Appointment);
    }

    public override void Synchronize()
    {
        base.Synchronize();

        timeInterval.Text = this.Appointment.Start.ToLongTimeString() + " - " + this.Appointment.End.ToLongTimeString();
        description.Text = this.Appointment.Summary;
    }

    public override void DrawEventText(Telerik.WinControls.Paint.IGraphics graphics)
    {
        //leave the method empty to prevent the default appointment information to be drawn
    }
}

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
Progress Telerik

[david]

While that worked I lost the ability to launch my custom edit dialog can you tell me how I add that back in with a custom appointment with checked box I stil lneed to be able to double click into my appointment

[david]

Ie when you double click on a non custom appointment it opens fine but on the custom code which you gave me the dialog does not do I have to handle the event in the class instead if so how would I pass my appointments entity to the class then to the form?

[david]

I also need to access the appointment details in the class so what I want to be able to do is add the patient first name and last name beside the time also how do i force the text to be on the left side of appointment as you see in screen shot its centrilized.

 

 

[Hristo]

Hello David,

You are not receiving mouse notifications because the mouse is handled by the inner elements that were added to the custom appointment element. Whether an element handles the mouse or notifies its parent for any mouse messages is controlled by the ShouldHandleMouseInput and NotifyParentOnMouseInput properties. I also understand that you would like to have the time and description parts aligned to the left. This can be accomplished by setting the TextAlignment property of the two LightVisualElements. You can initialize the custom elements this way: 

StackLayoutElement container = new StackLayoutElement();
RadCheckBoxElement checkBox = new RadCheckBoxElement();
StackLayoutElement panel = new StackLayoutElement();
LightVisualElement timeInterval = new LightVisualElement() { TextAlignment = ContentAlignment.MiddleLeft };
LightVisualElement description = new LightVisualElement() { TextAlignment = ContentAlignment.MiddleLeft };

protected override void CreateChildElements()
{
    base.CreateChildElements();

    this.container = new StackLayoutElement();
    this.container.Orientation = Orientation.Horizontal;
    this.container.StretchHorizontally = true;
    this.container.StretchVertically = true;
    this.container.ShouldHandleMouseInput = false;
    this.container.NotifyParentOnMouseInput = true;

    this.checkBox = new RadCheckBoxElement() { MaxSize = new Size(20, 0) };
    this.checkBox.CheckStateChanged += CheckBox_CheckStateChanged;
    this.container.Children.Add(this.checkBox);

    this.panel.StretchHorizontally = true;
    this.panel.StretchVertically = true;
    this.panel.ShouldHandleMouseInput = false;
    this.panel.NotifyParentOnMouseInput = true;
    this.panel.Orientation = Orientation.Vertical;

    this.timeInterval.ShouldHandleMouseInput = false;
    this.timeInterval.NotifyParentOnMouseInput = true;
    this.panel.Children.Add(timeInterval);
    this.description.ShouldHandleMouseInput = false;
    this.description.NotifyParentOnMouseInput = true;
    this.panel.Children.Add(description);

    this.container.Children.Add(this.panel);
    this.Children.Add(this.container);
}

Please also check the following section of the documentation discussing in details how you can create custom elements and layout: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/layout/layout-overview.

The exact type of the appointment entities is not related to the custom appointment elements. Creating a new appointment using the UI and the edit window results in creating an IEvent instance which is later painted by the scheduler using your custom element. The EditAppointmentDialog can be customized by following the approach suggested here: https://docs.telerik.com/devtools/winforms/scheduler/dialogs/editappointmentdialog.

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

Regards,
Hristo
Progress Telerik