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