Question

我的系统需要一个完整的日历来显示即将发生的事件。我使用angularjs应用程序成功迁移了它，日历工作正常。我的问题是，我无法使用JSON格式从数据库中显示自定义事件。要在此处正确解释代码：

    //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();
         }

     }
 });

当我运行该应用时，它不会显示日历中的任何事件，但日历显示正常。我已经尽力修复它，我意识到我真的需要有人给我一个关于如何使用javascript格式从JSON完整日历显示事件的想法。任何想法将不胜感激。

Answer 1

你的做法不适合举办活动。

试试这个。

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'
    });
}

然后在您的fullcalendar配置中设置此evts。

events: evts,

这很好用。

在javascript上添加事件完整日历

1 个答案: