I got this request from Cory
Alexander,
I was curious if you’d be interested in brain-storming a javascript idea for SharePoint calendars?
I’d be more than happy to buy you a couple beers to support it… 🙂Here is what I was looking at doing.
1. Using Javascript, validate a new (or edited) calendar entry prior to save.
2. The save will check for overlapping dates and/or times.
3. The save could (if possible) validate pre-blocked times for either allowing entries or disallowing entries.Real-world example.
We have an appointment calendar. I envision having within the same calendar (or for the sake of organization) in a seperate calendar,entries of what days and times are allowed to be “booked” and/or entries of days and times that are block from being “booked”
When a user attempts to create a new entry, the “booking” layer is evaluated to see if this new entry violates any of the currently exisiting rules. If it does, a notice is displayed.
Next, the new entry will be evaluated if it violates any currently exisiting entries. If it does, a notice will be displayed.Do you think this might be possible via Javascript and/or SP Services?
Thanks!
I have made a solution that lets you set the time period of each week day that a resource (like a meeting room) can be booked. This is done by specifying a choice field (Meeting room) in the setup of this solution, and to add records in the settings list for each selection in the choice field (like Meeting room 1 or Meeting room 2).
This solution will ensure the room can be booked in the available time period only, and will also prevent users from double booking the resource by checking for overlapping time periods before saving the new or edited record.
The user will be presented with informative messages regarding time period or dates out of range, and/or double bookings so they can correct their input before attempting another save.
This solution is designed for both SharePoint 2007 and SharePoint 2010.
Here is a few screenshots before we walk trough the setup
In this example, Team 1 has booked room 1 for their morning meeting:
Then Team 2 tries to book the same room for a sales meeting:
- Download the latest version of “spjs_utility.js” from here
- Download the file “SPJS-ResourceManagement.js” and the CEWP code from here
- Upload “spjs_utility.js”, “SPJS-ResourceManagement.js”, jQuery and jQueryUI (if you prefer a local copy), to a shared document library, or a folder created in SharePoint Designer. Ensure all user have read access to the location where you put the files.
- Change the variables in the top of the CEWP code, and the script src to jQuery, jqueryUI, the jQueryUI css file, “spjs-utility.js” and “SPJS-ResourceManagement.js” to reflect your local copies.
- Upload the CEWP code as a txt file to the same location as the other files.
- Add a CEWP below the form web part in NewForm.aspx / EditForm.aspx and use the “content link option” to link to the CEWP code you uploaded in the previous step. You may also use the HTML form web part and put the CEWP code in the “source editor” directly.
- Enter edit mode by clicking the © below the form in NewForm.aspx.
- You may supply a password in the GUI to prevent user from editing the settings.
When you first enter the edit mode, you are prompted to create the configuration list:
Click “OK” to create it:
You will never have to hand edit the configuration list, but you find it under “All Site Content” of the site you specify as “SPJSRM_settingsListBaseUrl” in the CEWP code.
This is PARTS of the CEWP code
There are also a chunk of HTML code that must be included. You find the complete code in the download referred above.
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript" src="/test/Scripts/spjs_utility - blog/spjs-utility.js"></script> <script type="text/javascript" src="/test/Scripts/SPJSResourceManagement/SPJS-ResourceManagement.js"></script> <script type="text/javascript"> var SPJSRM_listName = "SPJSRM"; // Preferably use the List GUID var SPJSRM_settingsListBaseUrl = L_Menu_BaseUrl; // The base url of the settings list var SPJSRM_resourceFieldInternalName = "MeetingRoom"; // the FieldInternalName of the choice field that holds the name of the resources var timeFormat = 24; // 12 for 12 Hour format or 24 for 24 Hour // Validation messages var alreadyBookedMsg = "This resource can be booked between {0} and {1}"; var overlapMsg = "The selected time period is not available. It has been booked by {0} between {1} and {2}."; var endBeforeStartMsg = "End time cannot be less than or equal to start time."; var startDateOutOfRange = "{0} is out of range.nnStarting date cannot be prior to {1}."; var endDateOutOfRange = "{0} is out of range.nEnd date cannot be after {1}."; </script>
These are the primary variables that needs attention
- SPJSRM_listName: This is the list GUID or the DisplayName of the list you want this feature to apply to. In SharePoint 2010 you can use the variable “_spPageContextInfo.pageListId”, but for SharePoint 2007 you must find the GUID as described here
- SPJSRM_settingsListBaseUrl: This is the base url of the settings list. Use “L_Menu_BaseUrl” to refer the current site, or supply another baseUrl to place the configuration list in another site – use “” to refer the root site.
- SPJSRM_resourceFieldInternalName This is the FieldInternalName of the choice field that holds the name of the resources. Go here to learn how to find the FieldInternalName for a field
- timeFormat: Use 12 for 12 Hour format or 24 for 24 Hour. Only cosmetics regarding the time as displayed in validation messages.