Create a Self Signup Calendar

A common need in companies for events like training or special events is a way for users to book themselves into an available timeslot for said events.

Use case:

1) User goes to a SharePoint calendar
2) User selects from a available days for the event
3) User is presented with all the available timeslots for the event
4) User clicks a button for the timeslot
5) Timeslot is booked and confirmation email is sent to user.
6) Done

Required SharePoint lists

• Calendar (for the available days for the event)
• Timeslots (Custom list)
• Title
• BookingDate (lookup to Calendar)
• TimeSlot (text field of timeslot like 9AM, 10AM, 11AM, etc)
• MaxCount (the maximum amount of participants for this timeslot)
• Bookings (Custom list)
• Title, 
• Timeslot (choice)
• BookingDate (text)
• Person (peoplepicker)

You create one Timeslots row for each timeslot available. So if you had 2 days of events with 10AM, 11AM, 1PM and 3PM timeslots, you would need 8 rows (2 days x 4 timeslots)

How it works

1. Add entries in the calendar for the days that will have timeslots. For instance add 2 days. Click one of these days to get the DispForm.aspx for the event.
2. Copy the 2 code files below to your SiteAssets/js folder (create if needed)
3. Customize the DispForm.aspx.
1. Hide the form you see
2. Add a Content Editor Web Part and link to the code below.
4. The page will now show all the timeslots you configured for this day. There will be a "Book it" button beside each timeslot that hasn't reached its MaxCount maximum yet. Any timeslot that has reached the maximum will not have a button beside it.

Code

Data Access code the above file needs

Pass data to a nested Async AJAX call

This is not specific to SharePoint iteself, but I find myself using the SP Rest services more and more.

This stumped me for many hours. Lets say you have two async ajax calls. Further, lets say you need the results from the first call in the second. Sounds easy, but there is no way to jam a parameter in the .done() function and everything goes "out of scope" when you go from the first call to the second one's .done().

Solution? embed the data in the HTTP call itself!