使用fullcalendar插件在一个页面上显示不同人的多个日历

时间:2014-09-12 20:05:39

标签: jquery

说明:

jQuery插件fullcalendar允许用户在具有id"日历"

的div中显示日历

通过以下代码,我们可以在页面上加载日历

HTML

<div id= "calendar" class="calender_box" style="display: hidden; "></div>

JQuery的

 $('#calendar').fullCalendar({

                    header: {
                    left: 'prev,next today',
                     center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    },

                    events: '../PHP/get_events.php'
                     });    

它完美无缺!

更改ID后

HTML

<div id= "calendar_1" class="calender_box" style="display: hidden; "></div>

JQuery的

 $('#calendar_1').fullCalendar({

                    header: {
                    left: 'prev,next today',
                     center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    },

                    events: '../PHP/get_events.php'
                     });    

除了空盒子外,没有显示任何内容

问题:

我已尝试将ID从$("#calendar")更改为$("#calendar_1"),但确实有效...

我有一个页面,其中有一个人的图片,下面是日历的图标,当我们点击日历我们可以看到那个人的事件...只要有一个人,它的工作完美时,计数到两个我卡住了因为没有其他ID而不是#34; calendar&#34;它接受并且id是唯一的,所以每个div都必须有所不同......我该怎么办?

1 个答案:

答案 0 :(得分:0)

您应该只使用ID就可以在不同的<div>中呈现日历,所以:

$('#calendar_1').fullCalendar({...});将进入<div id='calendar_1'>$('#calendar_2').fullCalendar({...});进入<div id='calendar_2'>,依此类推。

另一个需要考虑的选择是使用每个用户的单独事件源在同一日历上显示不同的人事件。不确定您的用例是什么,但也值得研究:http://fullcalendar.io/docs/event_data/Event_Source_Object/