This recipe requires version 1.4.1 of the Room Management plugin (not free) from the Rock Shop.

This recipe will show you how to add a Calendar View to the Room Management plugin to allow you to view your room reservations in a traditional calendar format.

To get started, visit the Admin Tools tab of the Room Management page and click on Reservation Views.

Add View.gif

Add a new view and call it "Calendar". Enable the RockEntity command for this view:

Add View.gif

Paste the following Lava into the Lava field:


<link href='https://unpkg.com/@fullcalendar/core@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/list/main.min.css' rel='stylesheet' />

<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/list/main.min.js'></script>

<div id="calendar" style="margin-top: 50px;">

</div>

<!-- 
 Notes and Requester information is available using {{reservationSummary.Note}}
 and {{reservationSummary.RequesterAlias.Person}}
-->

{% assign reservationCount = ReservationSummaries | Size %}

{% if reservationCount == 0 %}
<div class="panel panel-default margin-t-md">
<div class="margin-all-md"> There are no reservations in this time frame.</div>
</div>
{% endif %}

<!-- What's the date range of these reservations? -->
{% assign firstReservation = ReservationSummaries | First | First %}
{% assign lastReservation = ReservationSummaries | Last | First %}

<!--Map:'Name' | Join:','-->



<div style="display: none;" id="calendar-json">
{
	"start":"{{ firstReservation.EventStartDateTime | Date:'yyyy-MM-dd'}}T00:00:00",
	"end": "{{ lastReservation.EventEndDateTime | Date:'yyyy-MM-dd'}}T23:59:00",
	"data":[
		{% for reservationDate in ReservationSummaries %}{% for reservation in reservationDate %}
		{% capture locations %}{% for reservationLocation in reservation.Locations %} {{ reservationLocation.Location.Name }} {% endfor %}{% endcapture %}
		{"title": "{{ reservation.ReservationName }} ({{locations}})","start": "{{ reservation.EventStartDateTime | Date:'yyyy-MM-ddTHH:mm:ss' }}","end": "{{ reservation.EventEndDateTime | Date:'yyyy-MM-ddTHH:mm:ss' }}","url":"/ReservationDetail?ReservationId={{reservation.Id}}"{% if reservation.ApprovalState != 'Approved' %},"backgroundColor": "pink"{% endif %}}{% unless forloop.last %}, {% endunless %}{% endfor %}{% unless forloop.last %}, {% endunless %}{% endfor %}
	]
}
</div>

<script type="text/javascript">

	var calendarJs;

	function loadCal() {

		var calendarEl = document.getElementById('calendar');

		if (calendarJs) {
			calendarJs.destroy();
			calendarJs = null;
			calendarEl.innerHTML = "";
		}
		
		var calendarJSON = document.getElementById('calendar-json').innerHTML;
		var eventData = JSON.parse(calendarJSON);

		calendarJs = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'dayGrid','timeGrid','list' ],
			events: eventData.data,
			validRange: {
				start: eventData.start,
				end: eventData.end
			},
			header: {
				left:   'title',
				center: '',
				right:  'dayGridMonth,timeGridWeek,timeGridDay,listMonth today prev,next'
			},
			views: {
				dayGrid: {
					eventColor: 'white',
					eventTextColor: 'black'
				}
			}
		});
		calendarJs.render();
	}
	
	loadCal();

	var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(function() { 
        loadCal();
    }); 

</script>
    

Save the view. Go back to the Room Reservation, and enable the View on the Reservation Lava block. Also enable the Year View (the year view will give you the best experience with the Calendar view):

Note: You may need to refresh the page after this change.
Add View.gif

Now, you can select "Calendar" from the View As dropdown on the main Room Management page. Choosing the Year view allows you to instantly travel through the months of the year without waiting for the page to load.

Note: You may need to refresh the page after this change.
Add View.gif

You can click on reservations to go to the reservation details page. Unapproved reservations show in pink on the calendar.