property_hire/app/views/property_hires/view_calendar.html.erb

<% OrbitHelper.render_css_in_head(["property_hire_fullcalendar.css","property_hire_calendar"]) %>
<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.DateTimeFormat,Intl.DateTimeFormat.~locale.en,Intl.NumberFormat.~locale.en"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/assets/property_hire_fullcalendar.min.js"></script>
<script type="text/javascript" src="/assets/property_hire_calendar_frontend.js"></script>
<%
 data = action_data
 property = data["property"]
 url = data["url"]
%>
<% if !property.can_be_hired %>
	<script type="text/javascript">
		alert("This property is unavailable for hire.");
		window.location.href = "<%= "/" + I18n.locale.to_s +  url %>";
	</script>
<% end %>
<h3>Booking schedule for property <b><%= property.title %></b></h3>
<div id="orbit_calendar">
  <div id="sec1">
    <div class="btn-toolbar" id="navigation">
      <div id="calendar-nav">
        <div class="btn-group">
          <button class="btn btn-default btn-sm" id="prev_month_btn">
            <i class="icon-chevron-left"></i>
          </button>
          <button class="btn btn-default btn-sm" id="next_month_btn">
            <i class="icon-chevron-right"></i>
          </button>
          <button class="btn btn-default btn-sm" id="today_btn">Today</button>
        </div>
      </div>
    </div>
    <div class="form-inline" id="range_selection"></div>
  </div>
  <div id='sec3' class="btn-toolbar">
    <div class="btn-group calendar_mode">
      <button class="btn btn-default mode_switch btn-sm" data-mode="timeGridDay" >day</button>
      <button class="btn btn-default mode_switch btn-sm" data-mode="timeGridWeek" >week</button>
      <button class="btn btn-default active mode_switch btn-sm" data-mode="dayGridMonth" >month</button>
    </div>
    <button id="refresh_btn" class="btn btn-default btn-sm">
      <i class="icons-cycle"></i>
    </button>
  </div>
  <div id="view_holder">
    <h3 id="current_title" class="current_day_title"></h3>
    <div id="calendar"></div>
    <div id="calendar_agenda"></div>
  </div>
</div>
<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
<div id="calendar-loading"></div>
<a href="<%= "/" + I18n.locale.to_s +  url %>" class="btn btn-warning">Back</a>
<script type="text/javascript">
	var property_id = "<%= property.id.to_s %>";
  var calendar = new Calendar("#calendar",property_id,false);
</script>