Customizing WPF Scheduler

[Emir Smlatic]

Hello. I'm new in this so please understand me :D

How can I change time format from 12-hr to 24-hr in Scheduler?

How can I customize form for adding and editing appointments?

How can I save appointments in my SQL Data?

Thank You

[Karthikraja Arumugam]

Hi Emir, 

 

Thank you for contacting Syncfusion support. 

 

Query 1: Regarding changing TimeFormat 

SfScheduler supports to change time format from 12 hour to 24 hour by using TimeRulerFormat property of DaysViewSettings and TimelineViewSettings. 

 

Please refer the below code example for the same, 

this.scheduler.DaysViewSettings.TimeRulerFormat = "HH mm"; 

this.scheduler.TimelineViewSettings.TimeRulerFormat = "HH mm"; 

 

You can also refer our UG documentation for the same, 

https://help.syncfusion.com/wpf/scheduler/daysview#time-text-formatting 

https://help.syncfusion.com/wpf/scheduler/timelineview#time-text-formatting 

 

Query 2: Regarding customizing existing appointment editor 

SfScheduler supports to collapse existing appointment editing fields by using AppointmentEditingOptions in AppointmentEditorOpening event. 

 

Please refer the below code example for collapsing Reminder and Resource fields from appointment editor window. 

this.scheduler.AppointmentEditorOpening += this.OnSchedulerAppointmentEditorOpening; 

 

private void OnSchedulerAppointmentEditorOpening(object sender, AppointmentEditorOpeningEventArgs e) 

{ 

            e.AppointmentEditorOptions = AppointmentEditorOptions.All | (~AppointmentEditorOptions.Reminder & ~AppointmentEditorOptions.Resource); 

 } 

 

You can also refer our UG documentation for the same, 

https://help.syncfusion.com/wpf/scheduler/appointment-editing#visiblecollapse-the-built-in-editors-in-appointment-editor-window 

 

But if you want to add a new editor field or customize existing filed, you need to create your own appointment editor. Please follow the below steps to create a new appointment editor.  

  

1.  Create a new appointment editor window based on requirements.  

2. Wire SfScheduler.AppointmentEditorOpening event.  

3.  In AppointmentEditorOpeing event handler, set e.Cancel = true to cancel the inbuild editor opening. And show the custom editor window as dialog.  

4.  In custom editor, keep Save button. On save button click, update appointment details from editor values.  

5.  If editor opening for a new appointment, then you have to create a new appointment object and update values from editor and add appointment object to SfScheduler.ItemSource.  

6.  If editor opening for existing appointment. On save button click, update Appointment which can be get from AppointmentEditorOpeningEventArgs.Appointment.  

7. In custom editor on Save or Cancel button click, close custom editor dialog window.  

  

We have prepared a sample for the custom editor. Kindly check the sample.  

Sample link: SchedulerCustomEditor 

Query 3: Regarding saving appointments to SQL database 

You can get the new or edited appointment details from AppointmentEditorClosing event of scheduler, so after editor closed get details from event and update it to the SQL database. 

 

Please refer the below code example for the same, 

this.scheduler.AppointmentEditorClosing += OnSchedulerAppointmentEditorClosing; 

 

private void OnSchedulerAppointmentEditorClosing(object sender, AppointmentEditorClosingEventArgs e) 

{ 

            var appointment = e.Appointment; 

            if (e.Action == AppointmentEditorAction.Add) 

            { 

                // Add new appointment to database. 

            } 

            else if(e.Action == AppointmentEditorAction.Delete) 

            { 

                // Delete appointment from database. 

            } 

            else if(e.Action == AppointmentEditorAction.Edit) 

            { 

                // Modify appointment data from database. 

            } 

 } 

 

Note: AppointmentEditorClosing event will be triggered only if in-build editor is used. If you have used custom editor, then you need to update database details on Save button click from custom editor window.  

 

We will prepare sample for connecting Scheduler with SQL database and share you on or before 6 April 2021. We appreciate your patience until then. 

 

Please let us know if you require any further assistance on above queries. 

 

Regards, 

Karthik Raja A 

[Emir Smlatic]

Thank You. One more question. How to show saved appointments from SQL DB to scheduler? 

[Emir Smlatic]

Sorry if I have some dumb questions but can You tell me please what variables do You use so I can bind it with my sql db? 

For example I wanna save appointment to my DB. How I can bind Title of appointment from default appointment editor to my variables?

For example Title textbox have name titletextbox and when I wanna save it to my DB I will write something like INSERT INTO DB @titletextbox, so my question is how do You guys have named those textboxes and buttons and comboboxes in default editor so I can bind it with my DB. Thank You.

[Karthikraja Arumugam]

Hi Emir, 

 

Thank you for the update. 

 

Regarding editing field names 

We are suggesting to use appointment’s property names instead of editor field names, for example Title field is used for appointment Subject, and Description field is used for appointment Notes and so on.  

 

Regarding Sample for loading Appointment from DataBase 

Currently, we are preparing the sample for using Scheduler with SQL DataBase. We will prepare the sample and share on or before April 07, 2021. We appreciate your patience until then. 

 

Regards, 

Karthik Raja A 

[Karthikraja Arumugam]

Hi Emir, 

 

Thank you for your patience. 

 

We have prepared the sample including SfScheduler with SQL database. Kindly check the below sample. 

 

Sample link: SchedulerDataBaseSample 

 

We hope this helps. Please let us know if you require any further assistance. 

 

Regards, 

Karthik Raja A 

[Emir Smlatic]

Thank You

[Karthikraja Arumugam]

Hi Emir, 

 

Thank you for the update. 

 

Please let us know if you require any further assistance. 

 

Regards, 

Karthik Raja A 

[Emir Smlatic]

For now is ok. Thank You. 
To get resource id in appointment editor I have to connect directly to part of array 

appointment.ResourceIdCollection[0].ToString()

And than I got those id in which collection does appointment belong.

Thank You very much.

[Karthikraja Arumugam]

Hi Emir, 

 

Thank you for the update, let us know if you require any further assistance. We are always happy to assist you. 

 

Regards, 

Karthik Raja A