JSFiddle - React, Tailwind, and code Playground

by mridulpv

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.js"></script>
	<div id='calendar'></div>

JavaScript

$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,basicWeek,basicDay'
			},
			windowResize: function (view) {
				var view = getView();
                $('#calendar').fullCalendar('changeView', view);
                $('#calendar').fullCalendar('updateHeader',getHeader(), view);                
            },
			defaultDate: '2016-06-12',
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			
		});
		
		function getHeader() 
			{
         if (window.innerWidth < 768) {
             return {
                 left: 'prev today',
                 center: 'title',
                 right: 'next'
             };
            
         }
         else {
             return {
                 left: 'prev,next today ',
                 center: 'title',
                 right: 'month,basicWeek,basicDay'
             }
         }
     }
	 function getView() 
			{
         if (window.innerWidth < 768) {
             return "basicDay";
         }
         else {
		 return "month";
         }
     }
		
	});