JSFiddle - React, Tailwind, and code Playground

by Garth Edwards

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css">
Here is my Calendar: 
<button id='setEventToday'>set myEvent to today</button>
<button id='moveEventsForward'>move event 1 day --></button
<br>
<br>
<div id='calendar'></div>

CSS

.fc-bgevent{
  opacity: 1
}

JavaScript

var myEvent = {
	events: [
		{
			title  : 'FROM',
			allDay : true,
			start  : moment(),
      rendering: 'background'
		}
	],
	color: 'red',
};

$(document).ready(function() {
  $('#calendar').fullCalendar({
  	eventSources: [myEvent],
    dayClick: 	function(dateClicked, jsEvent, view) {
        console.log('dayClick dateClicked', dateClicked);
      $('#calendar').fullCalendar('clientEvents')[0].start = dateClicked;
      $('#calendar').fullCalendar('refetchEvents');
    }
  });

	$(document).on('click', '#setEventToday', function(){
		var from = $('#calendar').fullCalendar('clientEvents')[0];
    from.start = moment();
    $('#calendar').fullCalendar('updateEvent', from)
  });

	$(document).on('click', '#moveEventsForward', function(){
		var from = $('#calendar').fullCalendar('clientEvents')[0];
    from.start = from.start.add(1, 'days');
    $('#calendar').fullCalendar('updateEvent', from)
  });

});