Frequently when building Sitecore websites, the need has come up for the content author to be able to enter the hours of operation for his or her business. Unfortunately there is no built-in field type in Sitecore and nothing on the Sitecore Marketplace to accomplish this. With the help of two of my colleagues, Aaron Ladage and Patrick Delancy, we created a custom hours-of-operation field type. Our type allows content authors to easily enter opening and closing times for each day of the week. The value is stored as XML and can be easily parsed not only to display for website visitors, but also to add the proper microdata and boost the website’s SEO.
Saving Value from Content Editor
1. Click the ‘Edit’ button directly above the name of the field. Don’t see this button? Make sure the files under App_Config and sitecore modules have been published.
2. Set the appropriate values in the modal that appears. *Checking the ’24 Hours’ checkbox will disable the rest of the modal. Likewise, selecting ‘Closed’ on a specific day of the week will disable the drop downs for that day.*
3. Click ‘OK’
4. Save. *The box displaying the times will not update until the item has been saved.*
Raw XML Structure
The raw value is simply a serialization of the Hours Of Operation Model using an XmlSerializer. Here are some examples of what that raw value can look like. Later I will show how to create the Hours Of Operation Model from the raw value and also how to serialize it to the raw value.
Open 24 hours:
Open 8:00 AM – 5:00 PM Monday – Friday, closed weekends:
Create Model from Raw Value
Instantiating the Hours Of Operation Model from the raw value stored in Sitecore is very easy. The model contains a constructor that will accept the raw value from Sitecore and take care of any sanitizing that may need to occur for you.
Serialize Model to Raw Value
Creating the raw value to save in Sitecore from the Hours Of Operation Model is done by using an XmlSerializer, which does the work for us. See the example method below.
Displaying Values in View
You as the developer have complete control of how you display the information in the view. Below are some examples of how to do so. *In order to make this as page-editor friendly as possible, I recommend using an edit frame. This greatly improves the page editor experience by not displaying the raw value.*
We encourage you to download this and give it a try! Want to contribute? Send us a pull request!