We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfSchedule advanced customization (control template)

Hello!

It's my first time using syncfusion controls, and I must admit I'm really impressed. Really nice job what you did here! :)

I've just started working on a project -still in a very early stage- for a small hotel. They asked me to make a basic multiplatform bookings system for internal use only, nothing too fancy. After some research I think the week view of your schedule control could do the job, but I'd need to make some changes such as swapping the time labels for generic labels with the room numer, maybe adding more days (a whole month would be perfect!), etc...

However, after reading through the documentation and playing a bit with the control, the schedule control doesn't seem to support custom templates that would allow me to make such changes. So I was wondering if there's any way to achieve what I need? Or maybe there's any other control that supporst enough customization to build something along those lines?

Let me know if you need more details or clarification on what I'm trying to achieve.
Thanks very much in advance!

5 Replies

SP Subburaj Pandian Veluchamy Syncfusion Team July 19, 2019 12:04 PM UTC

Hi Snowy, 
  
Thank you for contacting Syncfusion support. 
  
Based on the shared information we have analyzed your requirement Customize time Label to have Room number instead of time and your requirements can be achieved using Schedule WeekView or TimeLineView. You can customize Time Label text using TimeFormat property of TimeLineLabelSettings. 
  
TimeFormat property can be used to provide room numbers as Label content, 
  
  
TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); 
TimelineLabelSettings labelSettings = new TimelineLabelSettings(); 
labelSettings.TimeFormat = string.Format(" 'Room' ") + " " + "H"; 
timelineViewSettings.LabelSettings = labelSettings; 
schedule.TimelineViewSettings = timelineViewSettings; 
 
  
As default schedule will have 24 time slots if you want to change the number of time slots you can use either StartHour and EndHour or TimeInterval properties of Scheule. 
  
If you want to have less than 24 slots its recommended to use StartHour and EndHour properties. 
 
  
TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); 
timelineViewSettings.StartHour = 0; 
timelineViewSettings.EndHour = 15; 
schedule.TimelineViewSettings = timelineViewSettings; 
 
If you want more than 24 slots, this can also be achieved using TimeInterval property. If we set TimeInterval = 10 then one-hour slot will be split into 6 slots. 
 
  
schedule.TimeInterval = 1; 
TimelineViewSettings timelineViewSettings = new TimelineViewSettings(); 
timelineViewSettings.StartHour = 0; 
timelineViewSettings.EndHour = 1; 
TimelineLabelSettings labelSettings = new TimelineLabelSettings(); 
labelSettings.TimeFormat = string.Format(" 'Room' ") + " " + "mm"; 
timelineViewSettings.LabelSettings = labelSettings; 
schedule.TimelineViewSettings = timelineViewSettings; 
  
 
Above code snippet will split an hour into 60 slots and Room numbers increased based on Minute value. 
  
Kindly Refer our UG document to know more about TimeLineView settings customization, 
 
  
We have prepared a sample for the same, 
 
Sample link: Schedule 
  
We hope this helps. Kindly revert us if you have any concern. 
 
Regards,
Subburaj Pandian V



SN Snowy July 19, 2019 01:24 PM UTC

Hi Subburaj,

Wow! Thank you very much! I wasn't expecting such a detailed answer.

I checked your sample and it differs quite a bit from what I need. Just to get you into the scene, I'm trying to achieve something like this:


I'm still not sure whether it can be done or not, but with the provided information I should be able to figure it out, hopefully.

Thank you again!

Regards,
J.




SP Subburaj Pandian Veluchamy Syncfusion Team July 22, 2019 11:48 AM UTC

Hi Snowy, 
  
Thank you for the update. 
  
Based on the shared information and image we have analyzed your requirement “Adding more days to WeekView in Schedule”, and we regret that as of now Schedule doesn’t have support to achieve the same. Schedule support WeekView including WeekDays only and Month View for the entire month but doesn’t have support for entire month days in WeekView format.

As we mentioned in previous update, you can use either WeekView / TimeLineView in Schedule with customization.

Screenshots: ScheduleScreenshots

 
Regards,
Subburaj Pandian V      



SN Snowy July 22, 2019 01:58 PM UTC

Hello Subburaj,

It's ok, no worries. I came to that conclusion too during this weekend. It was quite easy to achieve the custom WeekView thanks to your detailed reply, even so I still would need to be able to customize the room labels a bit more. So definitely can't use the Schedule control for this. However, I have a couple of ideas on how to use a mixture of some of your controls to do what I need. Actually, if any of them works fine, I'll get back and update the thread on how I did it, just in case it may help someone else in the future.

Thanks for your help!

Regards,
J.


SP Subburaj Pandian Veluchamy Syncfusion Team July 24, 2019 08:53 AM UTC

Hi Snowy,  
   
Thank you for the update.  

Please get in touch with us if you would require any further assistance. 
  
Regards,
Subburaj Pandian V 


Loader.
Up arrow icon