JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
<div style="border:solid 2px red;">
<div id='calendar1'></div>
</div>
JavaScript
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [
{
title: 'All Day Event',
start: new Date(2012, 6, 3)},
{
title: 'Long Event',
start: new Date(2012, 6, 1)}
];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: events_array
});
var eventsFromCalendar = $('#calendar').fullCalendar( 'clientEvents');
var eventsForCookie = [];
$.each(eventsFromCalendar, function(index,value) {
var event = new Object();
event.id = value.id;
event.start = value.start;
event.end = value.end;
event.title = value.title;
eventsForCookie.push(event);
});
console.log(JSON.stringify(eventsForCookie));
$.cookie("DSCalendar", JSON.stringify(eventsForCookie), {expires: 1});
var savedEvents = $.cookie("DSCalendar");
console.log(JSON.parse(savedEvents));
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: JSON.parse(savedEvents)
});
});