jquery完整日历使用循环来动态设置事件

6qftjkof 于 2023-10-17 发布在 jQuery

关注(0)|答案(4)|浏览(104)

我正在尝试使用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'
                }
            ]

我有标题，事件的开始日期和结束日期的数组，我必须在一个循环中设置它们。谁能帮帮我，告诉我该怎么做？谢谢

jquery

来源：https://stackoverflow.com/questions/40087814/jquery-full-calendar-use-loop-to-set-events-dynamically

4条答案

按热度按时间

mccptt671#

这样你就可以使用loop来动态地设置事件（在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']; ?>',

赞(0）回复(0）举报 2023-10-17

ix0qys7i2#

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

赞(0）回复(0）举报 2023-10-17

o2g1uqev3#

您可以使用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>

赞(0）回复(0）举报 2023-10-17

zhte4eai4#

set showNonCurrentDates：false，进入你的fullcalendar代码，这将解决你的问题。

赞(0）回复(0）举报 2023-10-17