CODEWITHSUNDEEP
javascriptfullcalendar
Dhanushka Weerasinghe
Dhanushka Weerasinghe

Reputation: 177

How to pass a variable to full calendar event?

this is my code

$(document).ready(function() {
  var dates = "{title  : 'event1',start  : '2018-07-10'},{title  : 'event2',start  : '2010-07-18'}";

  dates = JSON.parse(dates);
  alert(dates);

  $('#calendar').fullCalendar({
    height: 450,
    defaultView: 'month',
    events: dates
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>

I need to pass the dates variable to the full calendar event. Please help

Upvotes: 1

Views: 5820

Answers (2)

BenM
BenM

Reputation: 53198

You need to pass event data as an array. At the moment, you're passing an object. Instead of writing your dates in a string, just write the array manually into the events property of the constructor as follows:

$(function() {
    $('#calendar').fullCalendar({
        height: 450,
        defaultView: 'month',
        events: [
            {
                title: 'event1',
                start: '2018-07-10'
            },
            {
                title: 'event2',
                start: '2010-07-18'
            }
        ]
    });
});

You can read more about adding events in the FullCalendar docs.

Alternatively, if you have to use the JSON.parse(), simply wrap the string in square brackets:

var dates = JSON.parse('[{"title": "event1","start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}]');

Upvotes: 1

ADyson
ADyson

Reputation: 61849

Your JSON is invalid, as it's just a list of objects with no link between them. You can use https://jsonlint.com/ to validate your JSON strings. This is causing you to get an error when you try and parse it because you can't change a series of objects into a single variable. Your field names and values also need to be double-quoted, so you need to wrap your string in single-quotes. Besides that fullCalendar requires an array of events, and this is a valid thing to parse into a variable.

Try this:

$(document).ready(function() {
   var dates = '[{"title": "event1", "start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}]';
  dates = JSON.parse(dates);

  $('#calendar').fullCalendar({
    height: 450,
    defaultView: 'month',
    events: dates
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>

Alternatively, you could build a JavaScript object directly, if you're using JavaScript to generate the event data:

$(document).ready(function() {
   var dates = [{"title": "event1", "start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}];

  $('#calendar').fullCalendar({
    height: 450,
    defaultView: 'month',
    events: dates
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>

Upvotes: 1

Related Questions