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 a new view and call it "Calendar". Enable the RockEntity command for this view:

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@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/list@4.3.0/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@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/list@4.3.0/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):

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.

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