jquery全日历使用循环动态设置事件

Question

我正在尝试使用 jQuery 完整日历，并且我必须动态设置事件。这些是事件示例：

events: [
                {
                    title: 'Long Event',
                    start: '2016-09-07',
                    end: '2016-09-10'
                },
                {
                    title: 'Conference',
                    start: '2016-09-11',
                    end: '2016-09-13'
                },
                {
                    title: 'Meeting',
                    start: '2016-09-12T10:30:00',
                    end: '2016-09-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2016-09-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2016-09-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2016-09-12T17:30:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2016-09-28'
                }
            ]

我有包含事件标题、开始日期和结束日期的数组，我必须将它们设置为循环。 有人可以帮助我并告诉我该怎么做吗？ 谢谢

Answer 1

通过这种方式，您可以使用循环来动态设置事件（在 PHP 中）：

events:[
<?php for ($i=0; $i <count($countOfArray); $i++) { ?> 
{
     title: '<?php echo $countOfArray[$i]['Long_event']; ?>',
     start: '2016-09-07',
     end: '2016-09-10'
},
<?php } ?>
]

您还可以自定义日期：

start: '<?php echo $countOfArray[$i]['YourDate']; ?>',

Answer 2

$(document).ready(function(){
        var events = [your-json-array-of-events];

        var eventsArray = [];
        console.log('e',events);
        $.parseJSON(events).forEach(function(element, index){
             eventsArray.push({
                title:element.title,
                description:element.description.substring(0,30),
                start:new Date(element.start_date).toISOString(),
                end:new Date(element.end_date).toISOString(),

             })
          })

        $(function() {
            $('#calendar').fullCalendar({

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: Date.now(),
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: eventsArray,
            });
        });
    });

Answer 3

您可以使用

events

数组并将其作为提供给

fullCalendar()

: 的对象选项的 events

属性值传递

var events = [{title: 'Long Event',start: '2016-09-07',end: '2016-09-10'},{title: 'Conference',start: '2016-09-11',end: '2016-09-13'},{title: 'Meeting',start: '2016-09-12T10:30:00',end: '2016-09-12T12:30:00'},{title: 'Lunch',start: '2016-09-12T12:00:00'},{title: 'Meeting',start:'2016-09-12T14:30:00'},{title: 'Happy Hour',start: '2016-09-12T17:30:00'},{title: 'Click for Google',url: 'http://google.com/',start: '2016-09-28'}];

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
  },
  defaultDate: '2016-09-12',
  navLinks: true,
  editable: true,
  eventLimit: true,
  events: events
});

body {
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>

<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.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>

<div id="calendar"></div>

Answer 4

将 showNonCurrentDates: false 设置为您的完整日历代码，这将解决您的问题。