title: How to check non-selectable slots on fullcalendar
body: <p>I have a different range of available hours for every single day, for example:</p>
  
  <ul>
  <li>monday 4th from 9:00 to 14:00</li>
  <li>monday 4th from 16:00 to 18:00</li>
  <li>thursday 5th from 9:30 to 15:00</li>
  <li>wednesday 6th from 10:00 to 12:00</li>
  <li>wednesday 6th from 16:00 to 18:00</li>
  <li>...</li>
  <li>monday 11th from 12:00 to 14:00</li>
  <li>monday 11th from 15:00 to 17:30</li>
  <li>...</li>
  </ul>
  
  <p>These ranges can change from a day to another. They're stored on a database and I render them on the calendar using the "rendering: background" property.</p>
  
  <p>The user can only create events on these ranges. When the user clicks inside a "rendering: background" range they can see a modal window that prompts the user for creating a new event.</p>
  
  <p>My problem is: when I click on the calendar outside a "rendering: background" slot -let's say on monday 4th at 14:30h- the modal window is shown. How can I avoid this? When the user clicks outside a non-permitted slot I want they to show an error message, not the modal window.</p>
  
  <p>This is my code:</p>
  
  <pre><code>$('#calendar').fullCalendar({
          // put your options and callbacks here
          height: 1055,
          //aspectRatio: 0.5,
          allDaySlot: false,
          slotEventOverlap: false,
          header: {
              left: '',
              center: '',
              right: ''
          },
          columnHeader: false,
          columnFormat: 'Class type',
          defaultView: 'agendaDay',
          weekends: false,
          selectable: true,
          eventRender: my_render_function,
          },
          select: function (start, end, jsEvent) {  // click on empty time slot
          // code to show my modal for creating a new event
          ...
          ...
          $('#myModal').modal('show');
          },
          selectOverlap: function (event) {
              // Here you will get all background events which are on same time.
              return event.rendering === 'background';
          },
          businessHours: {
              // days of week. an array of zero-based day of week integers (0=Sunday)
              dow: [1, 2, 3, 4, 5], // Monday - Thursday
              start: '09:00', // a start time (10am in this example)
              end: '18:00', // an end time (6pm in this example)
          },
          minTime: '09:00:00',
          maxTime: '18:00:00',
          eventSources: [
              {
                  url: '/agenda/my_existent_events'
                  }
              },
              {
                  url: '/agenda/mybackground_events_with_colors'
              }
          ],
      }) 
  </code></pre>
  
  <p>I've tested this solution but it doesn't work for me:
  <a href="https://stackoverflow.com/questions/27359369/detect-click-on-background-event">Detect click on background event</a>
  Any suggestion will be welcome. Thanks in advance!</p>