Answers.Body: <p><strong>Edited to provide a cleaner solution:</strong></p>
  
  <p>This code will display different contents for available times and unavailable times in 30 min increments, and makes no assumption on how long your events are.</p>
  
  <pre><code>{% set targetDate = "today" %}
  
  {% set events = craft.calendar.events({
      dateRangeStart: targetDate,
      dateRangeEnd: targetDate
  }) %}
  
  
  {% for hour in craft.calendar.day({date: targetDate}) %}
      {% set dateFirstHalfHour = hour.date.copy.addMinutes(30) %}
      {% set dateSecondHalfHour = hour.date.copy.addMinutes(60) %}
  
      {% set hasEventsInFirstHalf = false %}
      {% set hasEventsInSecondHalf = false %}
      {% for event in events %}
          {% if hour.date &gt;= event.startDate and hour.date &lt; event.endDate %}
              {% set hasEventsInFirstHalf = true %}
          {% endif %}
  
          {% if dateFirstHalfHour &gt;= event.startDate and dateFirstHalfHour &lt; event.endDate %}
              {% set hasEventsInSecondHalf = true %}
          {% endif %}
      {% endfor %}
  
      &lt;div&gt;
          {{ hour.date.format("H:i") }} - {{ hasEventsInFirstHalf ? "unavailable" : "available" }}
      &lt;/div&gt;
      &lt;div&gt;
          {{ dateFirstHalfHour.format("H:i") }} - {{ hasEventsInSecondHalf ? "unavailable" : "available" }}
      &lt;/div&gt;
  
  {% endfor %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-21T14:13:11.470Z
Answers.LastActivityDate: 2016-09-26T16:39:01.247Z
Answers.LastEditDate: 2016-09-26T16:39:01.247Z
Answers.UserDisplayName: Solspace
Body: <p>I have the following code that will output the UNAVAILABLE (previously booked) times of a Target Date. How would i edit this to output (in 30 minute increments) only the AVAILABLE times with Solspace Calendar?</p>
  
  <pre><code>{% set targetDate = "2016/09/27" %}
  {% set calendarHandle = "default" %}
  {% set day = craft.calendar.day({
       date: targetDate,
       calendar: calendarHandle
  }) %}
  
  {% for event in day.events %}
      {{ event.startDate.format('g:i a') }} - {{ event.endDate.format('g:i a') }}
  {% endfor %}
  </code></pre>
  
Tags: <datetime><query><plugin-solspacecalendar>
Title: List Only Available Times/Dates in Solspace Calendar
ThreadText: # List Only Available Times/Dates in Solspace Calendar
  
  (Asked by: username_0 on 2016-09-20)
  
  I have the following code that will output the UNAVAILABLE (previously booked) times of a Target Date. How would i edit this to output (in 30 minute increments) only the AVAILABLE times with username_1 Calendar?
  
  ```
  {% set targetDate = "2016/09/27" %}
  {% set calendarHandle = "default" %}
  {% set day = craft.calendar.day({
       date: targetDate,
       calendar: calendarHandle
  }) %}
  
  {% for event in day.events %}
      {{ event.startDate.format('g:i a') }} - {{ event.endDate.format('g:i a') }}
  {% endfor %}
  
  ```
  
  **Tags:** datetime, query, plugin-solspacecalendar
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-09-21. Score: 5 | Accepted answer
  
  **Edited to provide a cleaner solution:**
  
  This code will display different contents for available times and unavailable times in 30 min increments, and makes no assumption on how long your events are.
  
  ```
  {% set targetDate = "today" %}
  
  {% set events = craft.calendar.events({
      dateRangeStart: targetDate,
      dateRangeEnd: targetDate
  }) %}
  
  {% for hour in craft.calendar.day({date: targetDate}) %}
      {% set dateFirstHalfHour = hour.date.copy.addMinutes(30) %}
      {% set dateSecondHalfHour = hour.date.copy.addMinutes(60) %}
  
      {% set hasEventsInFirstHalf = false %}
      {% set hasEventsInSecondHalf = false %}
      {% for event in events %}
          {% if hour.date >= event.startDate and hour.date < event.endDate %}
              {% set hasEventsInFirstHalf = true %}
          {% endif %}
  
          {% if dateFirstHalfHour >= event.startDate and dateFirstHalfHour < event.endDate %}
              {% set hasEventsInSecondHalf = true %}
          {% endif %}
      {% endfor %}
  
      <div>
          {{ hour.date.format("H:i") }} - {{ hasEventsInFirstHalf ? "unavailable" : "available" }}
      </div>
      <div>
          {{ dateFirstHalfHour.format("H:i") }} - {{ hasEventsInSecondHalf ? "unavailable" : "available" }}
      </div>
  
  {% endfor %}
  
  ```
  
  
  ---
  
  