在javascript完整日历上添加事件

Question

I have a system which needs a full calendar to display the upcoming events. I successfully migrated it with my angularjs app and the calendar is working fine. My problem is, I can't display a custom event from the database using a JSON format. To properly explain it here's the code:

    //Date for the calendar events (dummy data)
 var date = new Date();
 var d = date.getDate(),
     m = date.getMonth(),
     y = date.getFullYear();
 var evts = '['; // variable for events
 //this is the part  where i tested to create a json format
 for (var i = 1; i <= 3; i++) {
     if (i < 3) evts = evts + '{"title":"John", "start": "new Date(y, m, ' + i + ')", "backgroundColor":"#f56954", "borderColor":"#f56954"},';
     else evts = evts + '{ "title":"John", "start": "new Date(y, m, ' + i + ')", "backgroundColor":"#f56954", "borderColor":"#f56954"}]';
 }
 $('#calendar').fullCalendar({
     header: {
         left: 'prev,next today',
         center: 'title',
         right: 'month,agendaWeek,agendaDay'
     },
     buttonText: {
         today: 'today',
         month: 'month',
         week: 'week',
         day: 'day'
     },
     events: evts, // here's the event to be added... i try this but no event is showing
     /* this are the proper format of adding events this is also what i did in the json format
          {
          title: test,
          start: new Date(y, m, 1),
          backgroundColor: "#f56954", //red
          borderColor: "#f56954" //red
        },
        {
          title: 'Kalag-kalag',
          start: new Date(y, m, 14),
          backgroundColor: "#f56954", //red
          borderColor: "#f56954" //red
        },
        {
          title: 'National Ero\'s day',
          start: new Date(y, m, d - 5),
          end: new Date(y, m, d - 2),
          backgroundColor: "#f39c12", //yellow
          borderColor: "#f39c12" //yellow
        },
        {
          title: 'Araw ng mga patay',
          start: new Date(y, m, d, 10, 30),
          allDay: false,
          backgroundColor: "#0073b7", //Blue
          borderColor: "#0073b7" //Blue
        },
        {
          title: 'Break-up day :(',
          start: new Date(y, m, d, 12, 0),
          end: new Date(y, m, d, 14, 0),
          allDay: false,
          backgroundColor: "#00c0ef", //Info (aqua)
          borderColor: "#00c0ef" //Info (aqua)
        },
        {
          title: 'Lonely birthday',
          start: new Date(y, m, d + 1, 19, 0),
          end: new Date(y, m, d + 1, 22, 30),
          allDay: false,
          backgroundColor: "#00a65a", //Success (green)
          borderColor: "#00a65a" //Success (green)
        },
        {
          title: 'Suicidal day',
          start: new Date(y, m, 28),
          end: new Date(y, m, 29),
          url: 'http://google.com/',
          backgroundColor: "#3c8dbc", //Primary (light-blue)
          borderColor: "#3c8dbc" //Primary (light-blue)
        }
      ],*/
     editable: true,
     droppable: true, // this allows things to be dropped onto the calendar !!!
     drop: function(date, allDay) { // this function is called when something is dropped

         // retrieve the dropped element's stored Event Object
         var originalEventObject = $(this).data('eventObject');

         // we need to copy it, so that multiple events don't have a reference to the same object
         var copiedEventObject = $.extend({}, originalEventObject);

         // assign it the date that was reported
         copiedEventObject.start = date;
         copiedEventObject.allDay = allDay;
         copiedEventObject.backgroundColor = $(this).css("background-color");
         copiedEventObject.borderColor = $(this).css("border-color");

         // render the event on the calendar
         // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
         $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

         // is the "remove after drop" checkbox checked?
         if ($('#drop-remove').is(':checked')) {
             // if so, remove the element from the "Draggable Events" list
             $(this).remove();
         }

     }
 });

when i run the app it doesn't show any events from the calendar but the calendar is showing fine. I already did my best on fixing it and I realized I really need someone to give me idea on how to show event from a javascript full calendar using JSON format. Any idea will greatly be appreciated.

Answer 1

Your approach is not proper to of making events.

Try this one.

var date = new Date();
var d = date.getDate(),
 m = date.getMonth(),
 y = date.getFullYear();
var evts = []; // variable for events
//this is the part  where i tested to create a json format
for (var i = 1; i <= 3; i++) {
    evts.push({
        title: "John",
        start: new Date(y, m, i),
        backgroundColor: '#f56954',
        borderColor: '#f56954'
    });
}

And then set this evts in your fullcalendar configuration.

events: evts,

This works fine.