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='seeFromEvent'>see fromEvent in console</button>
<button id='moveEventsForward'>move events 1 day forward</button>
<button id='moveEventsBack'>move events 1 day back</button>
<br>
<br>
<div id='calendar'></div>

CSS

.fc-bgevent{
  opacity: 1
}

JavaScript

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

var toEvent = {
	events: [
		{
			title  : 'FROM',
			allDay : true,
			start  : moment().add(3, 'days'),
      rendering: 'background'
		}
	],
	color: 'red',
};

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

	$('#calendar').fullCalendar('addEventSource', fromEvent);
 	$('#calendar').fullCalendar('addEventSource', toEvent);

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

 		var to = $('#calendar').fullCalendar('clientEvents')[1]
    to.start = to.start.add(1, 'days');
    $('#calendar').fullCalendar('updateEvent', to);
  });

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

 		var to = $('#calendar').fullCalendar('clientEvents')[1]
    to.start = to.start.subtract(1, 'days');
    $('#calendar').fullCalendar('updateEvent', to);
  });


	$(document).on('click', '#seeFromEvent', function(){
    console.log('seeFromEvent in console button: ', fromEvent.events[0].start._d);
  });
});